Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Tutorials’.

We are pleased to present below all posts tagged with ‘Tutorials’.

Designing With Real Data In Sketch Using The Craft Plugin

Besides the user's needs, what's another vital aspect of an app? Your first thought might be its design. That's important, correct, but before you can even think about the design, you need to get something else right: the data.

The image shows a preview of a movie app, designed with the Craft plugin in Sketch

Data should be the cornerstone of everything you create. Not only does it help you to make more informed decisions, but it also makes it easier to account for edge cases, or things you might not have thought of otherwise.

If you want to get even more out of Sketch, feel free to check out our fancy new book, “The Sketch Handbook”, with practical examples that you can follow along, step-by-step, to master even the trickiest, advanced facets and become a true master of Sketch.

Read more...

How To Create A Realistic Clock In Sketch

Creating a clock in Sketch might not sound exciting at first, but we'll discover how easy it is to recreate real-world objects in a very accurate way. You'll learn how to apply multiple layers of borders and shadows, you'll take a deeper look at gradients and you will see how objects can be rotated and duplicated in special ways. To help you along the way you can also download the Sketch editable file.

How To Create A Realistic Clock In Sketch

This is a rather advanced tutorial, so if you are not that savvy with Sketch yet and need some help, I would recommend to first read "Design a Responsive Music Player in Sketch" (Part One | Part Two) that cover a few key aspects in detail when working with Sketch. You can also have a look at my personal project sketchtips.info where I regularly provide tips and tricks about Sketch.

Read more...

Designing A Responsive Music Player In Sketch (Part 2)

Welcome to the second part of this tutorial, in which we will finish designing the music player that we started in part one. This includes creating the icons at the bottom, as well as making the music player responsive, so that all elements adapt to the width of the artboard and, thus, can be used for different device widths.

Designing A Responsive Music Player In Sketch (Part 2)

Our premise in creating all of the icons is to use basic shapes as often as possible, instead of custom vector elements. Shapes are much easier to set up and modify, and we will still be able to combine them into more complex forms using Boolean operations.

Read more...

Designing A Responsive Music Player In Sketch (Part 1)

Sketch is known for its tricky, advanced facets, but it's not rocket science. We've got you covered with The Sketch Handbook which is filled with practical examples and tutorials that will help you get the most out of this mighty tool. In today's article, Christian Krammer gives us a little taste of all the impressive designs Sketch is capable of bringing to life. — Ed.

Music plays a big role in my life. For the most part, I listen to music when I'm commuting, but also when I'm exercising or doing some housework. It makes the time fly, and I couldn't imagine living without it.

Designing A Responsive Music Player In Sketch (Part 1)

However, one thing that has always bothered me is that the controls of music apps can be quite small and hard to catch. This can be a major issue, especially in the car, where every distraction matters. Another issue, in particular with the recent redesign of iOS' Music app, is that you can't directly like tracks anymore and instead need to open a separate dialog. And I do that a lot — which means one needless tap for me.

Read more...

How To Create A Dramatic Vector Illustration

I have been drawing desktop wallpapers for Smashing Magazine's monthly collections for over a year now, and every time it's a very fun and challenging mission. In this article, I would like to share how I approach all stages of the process and provide general techniques for creating vector illustrations in Adobe Illustrator. Hopefully, you will find these techniques useful.

How To Create A Dramatic Vector Illustration

While referring to a particular drawing — the illustration for the "Understand Yourself" desktop wallpaper, which was featured in May's wallpaper collection this year — I'll also highlight key takeaways from my experience as an illustrator and designer.

Read more...

Sponsored Post How To Create Icons In Adobe XD

Released in March this year, Adobe Experience Design is a new all-in-one tool that lets you design and prototype websites and mobile apps. XD is still in beta and available for Mac with a Windows version on track for a release later in 2016. It is bound to provide a fast and efficient way to create new user interfaces, wireframes, and visual designs with various devices in mind.

Creating Icons With Adobe XD

As an icon creator, I tried to use XD to create icons from scratch and to apply them to a new user interface. In this tutorial, I want to guide you through the steps it took so you can follow along. We’ll take a look at how to create a set of office icons for a new app. Plus, I’m going to show you how you can use XD’s features to interact with your newly-created user interfaces during the prototyping phase. So, let’s get started.

Read more...

Drawing A Cartoon In Illustrator

Drawing a cartoon is no trivial pursuit. It turns us into a director, writer, narrator. Through a cartoon or comic, you tell a story that takes place in a certain time, a certain environment, with certain characters. This is why you will learn here not just how to draw a cartoon in Adobe Illustrator, but how to decide on character, place and situation.

Drawing A Cartoon In Illustrator

Before grabbing your pencil or software tool, ask yourself, “What will be my topic?” How many characters you will use, and who will they be? What background will they move against? What era will they live in? In what scene will you put them? Through the steps in this tutorial, I will explain to you my own choices. Let’s begin.

Read more...

A Beginner’s Guide To Creating A WordPress Website

Earlier this year, WordPress passed the 24% mark, running almost a quarter of all websites — and for good reason. It has a loyal user base and scores of dedicated developers who bring better features to the system year round.

A Beginner's Guide To Creating A WordPress Website

This article is for those of you who either are new to WordPress or are regular users who want to learn about the best way to run a WordPress website. We’ll be learning about working with domains, installing WordPress, managing content and using great plugins and themes to secure our website and make our content shine.

Read more...

Customizing Tree-Like Data Structures In WordPress With The Walker Class

In WordPress, a navigation menu, a list of categories or pages, and a list of comments all share one common characteristic: They are the visual representation of tree-like data structures. This means that a relationship of superordination and subordination exists among the elements of each data tree.

Customizing Tree-Like Data Structures In WordPress With The Walker Class

There will be elements that are parents of other elements and, conversely, elements that are children of other elements. A reply to a comment depends logically on its parent, in the same way that a submenu item depends logically on the root element of the tree (or subtree).

Read more...

↑ Back to top