Tag Archives: tutorials

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 (139 KB).

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 OnePart 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.

The post How To Create A Realistic Clock In Sketch appeared first on Smashing Magazine.

Continued here: 

How To Create A Realistic Clock In Sketch


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.

The post Designing A Responsive Music Player In Sketch (Part 1) appeared first on Smashing Magazine.

Link to article: 

Designing A Responsive Music Player In Sketch (Part 1)

Winter- And Holiday-Inspired Icon Sets [Christmas Freebies]

Christmas is just around the corner, and what better way to celebrate than with some free goodies? We sifted through the web (and our archives) to find holiday-themed icon sets for you that’ll give your creative projects some holiday flair. Perfect for Christmas cards, gift tags, last-minute wrapping paper, or whatever else you can think of.
All icons can be downloaded for free, but please consult their licenses or contact the creators before using them in commercial projects.


Winter- And Holiday-Inspired Icon Sets [Christmas Freebies]

25 Free Christmas Advent Icons To Bring Festive Mood To Your Site

Are you ready for the countdown to Christmas? Today, we’re merrily releasing a brand new Christmas Advent Icon Set, a set of 25 icons that are all available in AI, EPS, SVG, PNG and PDF formats. These icons were all designed and created by Manuela Langella and are free to be used in private as well as commercial projects.
You may modify the size, color or shape of the icons.

Read the article: 

25 Free Christmas Advent Icons To Bring Festive Mood To Your Site

The Art Of Layout Testing With Galen Framework

When designing a graphical user interface, there is always an open question: How do we automate testing for it? And how do we make sure the website layout stays responsive and displays correctly on all kinds of devices with various resolutions? Add to this the complications arising from dynamic content, requirements for internationalization and localization, and it becomes a real challenge.

The Art Of Layout Testing With Galen Framework

In this article, I will guide you through an interesting new layout testing technique. Using Galen Framework, I will provide a detailed tutorial for writing meaningful generalized layout tests, which can be executed in any browser and on any device and at the same time used as a single source of truth in your design documentation.

The post The Art Of Layout Testing With Galen Framework appeared first on Smashing Magazine.

Visit site: 

The Art Of Layout Testing With Galen Framework

40 Otherworldly Space Icons [Freebie]

We’ve featured a lot of different icon sets in the past, but we still haven’t had one dedicated to rockets, satellites and solar systems (well, don’t forget supernatural aliens as well). There’s so much to explore in the world of astronomy, and it’s about time we did. Today’s space icons were created and designed by the team at Iconshock, and consists of 40 icons in AI, PNG as well as SVG formats.

From – 

40 Otherworldly Space Icons [Freebie]

Creating Advanced Animations In Photoshop

While animation in Photoshop is not a new concept, it definitely has come a long way in the last few years: The Timeline panel has been overhauled, video layers have been introduced, as has the ability to create keyframe animation. These additions have really upped Photoshop’s game.

Even though Photoshop is still a long way off from being able to create the high-end and cinematic animations of such programs as After Effects, it still has enough power to create complex animation — which is especially useful if you don’t want to spend time learning a new application.

In this article, I will share several advanced techniques to help you create complex animations. We’ll look at the Timeline panel and the different properties that can be animated. We’ll also explore the roles that adjustment layers, filters and smart objects can have in animation (and how to combine all three for some amazing effects). Because the topics and techniques in this article are advanced, a moderate level of Photoshop knowledge is expected.

Overview Of Timeline Panel

Opening the Timeline panel (“Window” → “Timeline”) allows you to select between two types of timelines: video and frame. The frame timeline is for frame-by-frame animation and can be very limiting. It generally works by converting the layers in your Layers panel to individual frames. I won’t go into any more detail on this timeline; I want to focus on the video timeline.

Photoshop has two timelines for you to choose from.1
Photoshop has two timelines for you to choose from. (View large version2)

Video Timeline

The video timeline allows for keyframe animation — which is an animation process in which you define key points of animation along a timeline and Photoshop will interpret the in-between frames to create a cohesive animation. Let’s go ahead and create a very simple animation to see how this works.

The Video Timeline panel shows a layer (1) with layer properties (2). The timeline shows the Current Time Indicator (3) and existing keyframes (4).3
The video timeline panel shows a layer (1) with layer properties (2). The timeline shows the current time indicator (3) and existing keyframes (4). (View large version4)

As you probably noticed from the image above, the video timeline shows a representation of layers in the Layers panel. Each layer in the timeline has a dropdown panel that exposes the layer properties (these are the properties that can be animated). To animate a layer property, simply click the stopwatch icon, which enables keyframe animation. Notice that a keyframe is automatically placed at the current time indicator.

The stopwatch icon has been selected for the Position property. A keyframe is automatically added to the timeline.5
The stopwatch icon has been selected for the “Position” property. A keyframe is automatically added to the timeline. (View large version6)

Move the current time indicator to another point in the timeline and reposition the layer. Again, another keyframe will automatically be added to the timeline.

Moving the layer automatically adds a keyframe at the current time indicator's location on the timeline.7
Moving the layer automatically adds a keyframe at the current time indicator’s location in the timeline. (View large version8)

Playing back the animation shows how the object on the canvas moves from one position to the next.

Photoshop automatically creates the animation in between the keyframes.

Layer Types

Now that we have a good idea of how the animation process works in Photoshop, let’s take a closer look at the common layer types that can be animated. Because different layer types have different properties to animate, pay attention to which layer types are being used.

The standard (pixel) layer is a layer that contains pixel information. This is the most common (and most basic) layer in Photoshop. Layer properties include:

  • position,
  • opacity,
  • styles.
A standard layer in the timeline with the layer properties exposed.
A standard layer in the timeline with the layer properties exposed.

Adding a layer mask or vector mask to any layer will introduce additional properties specific to that mask. Layer properties that are added to the layer’s existing properties include:

  • layer or vector mask position
  • layer or vector mask enabling
A layer with a layer mask in the timeline
A layer with a layer mask in the timeline.

A layer with a vector mask in the timeline
A layer with a vector mask in the timeline.

A shape layer contains a shape (whether from one of the shape tools or the Pen tool) or a line segment. Because shapes and line segments are built with vector mask information, those mask properties will appear in addition to the other layer properties. Layer properties include:

  • position,
  • opacity,
  • styles,
  • vector mask position,
  • vector mask enabling.
A shape layer in the timeline with the layer properties exposed
A shape layer in the timeline with the layer properties exposed.

A text layer contains editable text. If text has been rasterized, then the layer will no longer be a text layer, but rather will be a standard layer with pixel information. Layer properties include:

  • transform,
  • opacity,
  • styles,
  • text warp.
A text layer in the timeline with the layer properties exposed
A text layer in the timeline with the layer properties exposed.

A smart object can contain any one or combination of the above layer types. A smart object acts like a wrapper for any layer, preserving the original layer while using a new set of properties. These properties include:

  • transform,
  • opacity,
  • styles.
A text layer in the timeline with the layer properties exposed
A text layer in the timeline with the layer properties exposed.

A word of warning when using smart objects. Because a smart object preserves the original quality of the layer or the set of layers it contains, it can be scaled and rescaled without losing quality. However, it cannot be scaled any larger than the size of the original layer it contains. Doing so would cause the smart object to lose quality.

At this point, I want to mention two other layer types — a video layer and a 3D layer. Both of these layers are completely unique from the other layer types mentioned. The video layer is actually a layer group that contains its own set of properties, while the 3D layer — besides containing a unique set of properties — is manipulated in an environment entirely separate from the other layers, adding to the level of complexity. Due to the uniqueness of these two layer types, I will not go into detail here. You can see how both layers are represented in the timeline below:

A video layer group in the timeline with the layer properties exposed
A video layer group in the timeline with the layer properties exposed.

A 3D layer in the timeline with the layer properties exposed
A 3D layer in the timeline with the layer properties exposed.

I encourage you to explore these two layer types on your own. For the rest of this article, I will be focusing only on the traditional layer types, excluding video and 3D.

Layer Properties

Now that we have a grasp of the different layer types, let’s examine the different properties that we are able to animate. Knowing how each property works is important to understanding their limitations and how to get around them. Let’s look at the common animation properties.

The Position property allows for movement along the X- and Y-axis. Manipulate the position of an object by using the Move Tool.

The object’s Position property was keyframed to move the ball back and forth along the x axis.

Opacity allows you to keyframe the opacity of a layer. The Opacity control can be found in the Layers panel.

The object’s opacity was keyframed at 100% and 0% to create a fading animation.

The Style property allows you to keyframe the layer styles of a layer. Access the layer styles by double-clicking a layer in the Layers panel.

The object’s layer styles (Bevel & Emboss, Color Overlay, and Drop Shadow) were all keyframed to create a pulsing animation.

The layer mask or vector mask position keyframes the x and y positions of each mask. It works best when the mask is not linked to the layer.

The mask’s position is keyframed to scrub across the layer, revealing the background layer.

Enabling or disabling a layer or vector mask is also possible. To enable or disable a layer mask, go to “Layer” → “Layer Mask” and select either “Enable” or “Disable.” For vector masks, go to “Layer” → “Vector Mask.” Alternatively, you can “Shift + Click” the mask in the Layers panel to toggle on or off.

The mask is keyframed to be enabled, then disabled after a short time, causing a reveal.

Specific to text layers, the Text Warp property allows you to keyframe any text warp applied to a text layer. You can access a list of text warp effects by going to “Type” → “Warp Text.”

A Flag warp was applied to the text and keyframed to create a warping animation.

The Transform property allows you to keyframe transformation to a layer. Various transformations (such as Rotate and Scale) can be accessed by going to “Edit” → “Transform,” or by pressing Control + T to enter Free Transform mode.

The object’s Scale and Rotation are keyframed to create a spinning star that grows and shrinks.


  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-01-overview-opt.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-01-overview-opt.jpg
  3. 3 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-02-timeline-1-opt.jpg
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-02-timeline-1-opt.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-03-timeline-2-opt.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-03-timeline-2-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-04-timeline-3-opt.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/05/p1-04-timeline-3-opt.jpg

The post Creating Advanced Animations In Photoshop appeared first on Smashing Magazine.

View original post here – 

Creating Advanced Animations In Photoshop


How To Get Started With Sketchnotes

Have you ever seen someone make creative notes at a conference and wished that your own notebook was more presentable? It’s probably much easier to do than you think. You don’t have to be an aspiring lettering artist, and you don’t need to develop top-notch drawing skills.

Making your notes more interesting doesn’t have to be a huge undertaking. It’s not like learning to play the piano or taking up diving. If you think sketchnoting looks fun, I have some tips to get you started.

Creative Note-Taking For Anyone

People make all sorts of visual notes. An army of sketchnoters1 is out there, and everyone has their own style. Some do amazing sketches and lavish letters. Some translate complicated concepts into easy-to-grasp diagrams. But for the sake of this article, let’s keep it simple.

The laser show at the Smashing Conference52 in Oxford earlier this year.

It doesn’t matter whether you call it sketchnoting or doodling or scribbling or simply “adding some joy” to your notes. Just aim for something visual that takes your notes to the next level. Combine this with an effort to slow down when forming letters, and I’ll bet you will surprise yourself at the difference it makes. The goal is to create something that you would want to take out again and look at — and, hey, perhaps even show others.

Me at the Smashing Conference in Oxford. (Image credit3)

You Are Your Own Target Audience

Sketchnotes done live over 45 minutes can’t capture everything. They won’t be a perfect structured summary. My notes are not intended to stand on their own feet. They have value for me and perhaps other attendees at the conference.

Make the notes for yourself first. Share them if you want — other attendees will probably love to take a look. Sketchnotes can spread the word to the outside world about an interesting talk or about the conference itself. But people who have not heard the talk can’t expect the sketchnotes to carry much meaning on their own. I mention this because people sometimes misunderstand their purpose.

Keeping this in mind will help you get started on your own sketchnotes. You don’t have to try to “instantly” explain everything or worry that you’ll miss one of the speaker’s key points. It’s OK — they’re just your personal notes.

Your notes might not make much sense to people who haven’t heard the talk. And that’s fine!

A Bit More Useful And A Lot More Fun

So, why bother with any of this? Because the act of writing stuff down helps you to remember. This is a basic study technique. The sound bites you capture from a talk will jog your memory when you flip through the notes later. By drawing something to create connections, you will increase your ability to remember. Notes that combine words with sketches are more useful than text alone. Chances are you don’t even hang onto boring old regular notes anyway.

Making something you will look at later might be the most helpful benefit. But all in all, you could do worse than to have “fun” be your main reason for taking sketchnotes. When the primary purpose is fun, you’ll let yourself play around. Write something silly, draw objects that talk, and in general don’t be so serious. I reckon fun is reason enough.

Oh, all those WYSIWYG horrors!

Stationary Geeking

We all know that it’s not about the tools, but so many wonderful pens are out there, waiting for you to try them. You can find a lot of motivation in a set of shiny new pens that have perfect nibs and a long way to go before drying out. I hereby grant you permission to go nuts in the pen aisle.

You have had plenty of ballpoint and rollerball pens, but have you tried a fineliner? Its tip is made of fiber or plastic, like on a marker, and it comes in a variety of widths and colors. Any brand is fine. My handwriting looks a lot more neat with a fineliner than with any type of ball tip. This might not be the case for your style and scale of letters. Try!

Start off with two black fineliners and a light-gray marker for shading.

You can start by getting two different widths of black fineliners to create contrasting lines. (I’ve been using 0.4 together with 1.0 a lot lately.) You will also want to get tools for coloring and shading. You can add shadow with a light-gray marker, which does wonders for elevating your doodles.

A handful of different hues are enough to add a splash of color. The daring may want to venture outside the primaries and secondaries of the basic color wheel. Look for color names like salmon, asparagus and raspberry for a more elegant touch than your basic red and blue.

Paper Can Inspire, Or Scare, You

Choose the paper that will inspire you the most or — if more relevant — scare you the least. Do you like the idea of starting a new notebook and filling it with sketchnotes? Then go find a nice big expensive one to start your collection.

My favorite at the moment is a spiral-bound notebook with a format somewhere around landscape A4. These sketchbooks are a pain to haul around, but I like the large pages of thick paper and how it folds to lie flat on my lap.

A spiral-bound notebook gives you one large clean page to work on.

Does a softer start with training wheels sound more appealing? Blank canvases are known to distress, so we need to outwit ourselves. Some alternatives for less daunting paper:

  • a clipboard with single sheets of paper,
  • a cheap notebook with a million thin pages,
  • any scraps of lined or squared paper,
  • a very small sketchbook (use several pages instead of just one!),
  • the back of something you found in your swag bag.

Cheating With The Content

Remembering something that was said while continuing to listen as you’re spelling and sketching is impossible. My trick is to draft notes in another notebook and to snap photos of certain slides. It sounds like extra work, but this is the only thing that works for me. My brain can’t perform all of those tasks at the same time; I have to “switch” between them.

It might look like multitasking, but I am shifting my focus back and forth from draft notebook to sketchnote. (Image credit4)

By jotting some words on the side, I can zip back to sketching what I was working on. Lettering something already written down elsewhere makes it easier to keep listening because I’m just drawing one letter at the time. When I get stuck for content, I refresh my memory by checking Twitter to see what other attendees have commented on. You can always count on finding the funniest quote of a talk via the conference’s hashtag.

Solving The Layout Puzzle

People often ask me how I plan a layout without knowing the structure of the talk. The truth is that I almost always either run out of space too soon or have trouble filling the page. Some speakers list the topics they’ll cover. Pay close attention if they do: This is a sketchnoter’s gold. A lot of times, though, you can’t plan much of anything — you just have to wing it.

The layout can be a puzzle, but you decide how big the various pieces will be.

If you’re sketchnoting live, you really only have the scheduled duration of the talk to go by. Has the speaker reached about the halfway point at the same time that you have? Also, save space for any excellent closing points. If you end up with too much empty space, go ahead and put something huge in the bottom-right, or draw a sun. I tend to cram too much onto the page and should remember that white space is not the enemy either.

Preparations For The Conference Pro

I noticed once that I was stressing a lot to avoid certain mistakes. Speaker names, Twitter handles and talk titles: You want to get those correct. To make this easier, I prepare a cheat sheet with this stuff — one talk per page, all ready for my draft notes on the side. I write down the title, too, because that first slide might disappear before you’re ready to start. (And watch out for changed titles!)

Want to publish your notes as soon as they’re done? Prepare a list on your phone with the speaker’s Twitter handle and talk title. Rather than searching for the correct spellings for your tweet, you could spend this saved time on your notes or taking a coffee break.

You absolutely want to get certain details correct. A cheat sheet could save precious time during a busy conference schedule.

Another problem for me was wasting precious time pondering which colors to use. The finished product often ended up looking less than harmonious, too. So, before the Smashing Conference52 in Freiburg, I planned a color scheme. I picked a series of nine matching colors, one key color for each talk, with touches of the previous and next colors as accents. Just going through the colors in order during the two days made things easier.

Bootcamp For Perfectionists

Sketchnoting is excellent training to combat those pesky perfectionist tendencies. I know you’ve got plenty of them, and I know how detrimental they can be. I used to suffer from illusions that I could go home and “finish the notes later.” This never happened. Ever. Now I photograph my notebook right there on the floor of the venue, and that’s it. No completing tomorrow, no fixing spelling mistakes, no retouching when I get home. Tweeting your notes right away is very much optional but highly recommended! For me, deciding that the page was done there and then made all the difference.

There is no right or wrong way to take sketchnotes at a conference, and you should absolutely make your own rules. Some people like to get a head start with an elaborate title or a caricature of the speaker. Some people scan their notes later and color them digitally. You don’t have to cover the entire talk either. Snippets are excellent and give you much more freedom. Figure out what works for you, change the rules as you go, and give yourself some sort of a deadline.

Anyone can draw a community!

“Sounds Great, But I Can’t Draw!”

Sure you can. You can draw arrows, smileys, stick people, browser windows, mobile phones, boxes, stars and clouds. Practice at your desk with an online talk first, and I’ll bet the result will be a lot better than you expect. Now, go get yourself some new pens!

Other people are technically better than us in a whole range of things. Don’t let that get in your way. We could look at a master writing calligraphy and feel we are not worthy of even holding a pen. Sketchnoting should be like running, cooking and photography. It’s for anyone and everyone who wants to try, have fun and improve as they go along.

(il, al)


  1. 1 http://sketchnotearmy.com
  2. 2 http://smashingconf.com/
  3. 3 https://www.flickr.com/photos/marcthiele/13268869064/
  4. 4 https://www.flickr.com/photos/marcthiele/15068886599/
  5. 5 http://smashingconf.com/

The post How To Get Started With Sketchnotes appeared first on Smashing Magazine.

Link to article: 

How To Get Started With Sketchnotes

Design Responsive Websites In The Browser With Webflow

This article is the first part of a series of articles on emerging responsive design tools. Today, Richard Knight explores the advantages of Webflow and how you can use it today to build responsive websites — perhaps a bit faster than you would build them otherwise. – Ed.
New tools have emerged to address the challenges of responsive web design — tools such as Adobe Reflow and the recently released Macaw.

View article – 

Design Responsive Websites In The Browser With Webflow

Moving A Git Repository To A New Server

Suppose your company decides to change its code-hosting provider or you wish to move your own Git repository to a different host. It doesn’t happen often, but it happens. When I had to move a number of Git projects to a new host, it took me quite some time to find an accurate method.
Having made many attempts, and a couple of fails, and carefully reading Git’s documentation, I found a solid and effective way.

Read more:

Moving A Git Repository To A New Server