How to Draw a Fox Step by Step

Final product image
What You’ll Be Creating

In this tutorial I will show you how to draw a realistic fox step by step, without any reference. You’ll learn how to sketch the pose to avoid proportion mistakes, how to add proper anatomy, and how to make it look real with details. You can also use this workflow to learn how to draw other similar animals.

This is a tutorial for beginners with a single, simple pose. If you want to learn more about foxes, their species and their anatomy, try this tutorial instead:

1. How to Prepare the Basic Sketch

Step 1

How often have you noticed that your drawing went wrong only when you were finishing it? To avoid such a situation, it’s good to start with a very general sketch first, and add the details to it later. The general sketch is easy to fix and quick to draw, so you don’t waste so much time on it if something goes wrong.

Start with a rectangle for an elongated fox body.

draw rectangle for fox body

Step 2

Measure the distance to the ground. Foxes are long-legged, so make it one body width long + some space for the paws.

fox body height drawing

Step 3

Sketch a very general rhythm of the legs on both ends of the rectangle.

simple fox legs drawing

Step 4

Add a thick neck. It should be slightly shorter than half of the body.

fox neck length drawing

Step 5

Attach the head to the neck.

simple fox head drawing

Step 6

Draw the long, tapered muzzle in front of the head.

fox muzzle drawing

Step 7

Sketch a bushy tail on the back.

fox bushy tail drawing

2. How to Sketch the Legs of a Fox

Step 1

Take a good look at your basic body plan now and try to see if anything’s off. Fix it, if necessary.

Add a “6” in the shoulder area. It’s a very easy way to create a form of the shoulder for many animals.

fox shoulder drawing

Step 2

Draw a line across the back side of the rectangle. This is a symbolic femur (the thigh bone).

fox thigh length drawing

Step 3

Add a perpendicular line to it. Its length will create the width of the thigh.

fox thigh width drawing

Step 4

Outline the thigh using these two guide lines. Don’t worry if the thigh looks too fat—it should be fluffy!

fox thigh shape drawing

Step 5

Add some details to both the shoulder blade and the hips.

fox shoulder blade hip drawing

Step 6

Time for the lower parts of the limbs. Sketch the length of the paws.

fox paws length drawing

Step 7

Add the wrist and the heel.

fox wrist heel drawing

Step 8

Draw the forms of the wrist and the ankle.

fox wrist ankle shape drawing

Step 9

Outline the paws.

fox paws shape drawing

Step 10

Connect the paws to the wrist and ankle.

fox hands feet drawing

Step 11

The forearm and the calf both need some muscle masses. Add them in the form of an oval along the “bone” lines.

fox limb muscle masses drawing

Step 12

Add more details to each leg: the elbow, the knee, and the bony landmarks of the ankle.

fox body landmarks drawing

Step 13

Gently outline the forms to create the whole form of the limb.

fox legs outline drawing

Step 14

Let’s make the paws complete, too. Add the other visible toe.

fox toes drawing

Step 15

Draw the tips of the toes.

fox toe tips drawing

Step 16

Add short, blunt claws.

fox claws drawing

3. How to Draw the Head of a Fox

Step 1

The head is a very important step, because we pay more attention to the proportions of the face than to the other parts of the body. Even if you sketched the body nicely, a tiny mistake in the face may destroy the whole impact of the drawing. So be very careful here!

Draw a high forehead for the fox, smoothing the step between the head and the muzzle.

fox high forehead drawing

Step 2

Draw a curve across the face—this will help us find the location of the eyes and define the sides of the face.

fox eye line drawing

Step 3

Draw an oval in the front of the head. This will be a symbolic eye socket. By drawing the eye socket first, you get a nice reference point to properly place the actual eye (thus solving the biggest problem in drawing a face!).

fox how to draw eyes properly

Step 4

Draw the round eye in the middle of the eye socket (or somewhere near, if you’ve noticed the eye socket has been placed wrong).

fox eye drawing

Step 5

Draw the nose bridge along the muzzle.

fox nose bridge drawing

Step 6

Draw the nose at the tip of the muzzle.

fox nose drawing

Step 7

Lead a line from the forehead to the chin.

fox muzzle shape drawing

Step 8

Draw an oval here.

fox muzzle mouth drawing

Step 9

Draw the lips along these guide lines.

fox lips drawing

Step 10

Draw a line across the head, halfway up the forehead.

fox how to draw ears

Step 11

Sketch the height of the ear. Foxes have them very big!

fox ear height drawing

Step 12

Draw the outline of the ear with gentle curves.

fox ear shape drawing
how to draw fox ear

Step 13

Draw the base of the ear.

fox ear details drawing

Step 14

Draw the cheek-mane on the side of the head.

fox cheek mane drawing

4. How to Draw the Body of a Fox

Step 1

Draw the lower side of the fluffy neck, creating a step between it and the head.

fox neck drawing

Step 2

Draw the rest of the “mane” on the neck.

fox neck mane drawing

Step 3

Draw the line of the belly.

fox belly drawing

Step 4

Draw the line of the back, curving towards the hips.

fox vack drawing

Step 5

Add some furry landmarks.

fox shoudler cape drawing
fox rib cape drawing
fox breast drawing
fox tail cover drawing

Step 6

If you want to make the drawing more interesting, you can add the second pair of legs.

fox second pair if legs drawing

5. How to Finish the Drawing of a Fox

Step 1

The sketch is finished, and now it’s time to add the final lines. If you have been drawing with a pencil, you can now take a darker tool (like an ink liner) to make the final lines more striking. If your sketch is too dark for this, you can put another sheet of paper over it and draw the final lines on it.

Create the final shape of the eye by adding the eyelids.

draw fox eyelids

Step 2

Add the pupil and the eye corner.

draw fox pupil

Step 3

Outline the nose.

draw fox nose

Step 4

Outline the general shape of the head and the lips.

draw fox face

Step 5

Add the whisker holes.

draw fox whisker holes

Step 6

Add special features over the eye to make it more expressive.

draw fox facial expression

Step 7

Add the details to the ear. It should be very fluffy!

draw detailed fox ear

Step 8

Draw the cheek mane and the outline of the bone under the skin (along the nose bridge and on the cheek bone).

draw fur on fox face

Step 9

Add more details to make the face really fox-like: the marking between the eye and the mouth, the whiskers, dark nose, and dark ear.

draw fox face markings

Step 10

Outline the paws.

draw fox paws

Step 11

Outline the legs, paying attention to their anatomy.

draw fox front legs
draw fox hind legs

Step 12

Cover the whole body with fur. Whatever method you use to draw it, remember to keep the style consistent over the whole body.

draw fox fur

Step 13

Finally, you can add some basic “coloring” and shading.

shade fox simple way

Beautiful!

That’s a beautiful fox! If you want to try other fox-related tutorials, check out this list:

You can also try other tutorials about drawing animals in a simple way:

how to draw fox step by step

How to Create a Scribble Sketch Effect Action in Adobe Photoshop

Final product image
What You’ll Be Creating

In this tutorial you will learn how to create an amazing, scribble sketch effect. I will try to explain everything in so much detail that everyone can create it, even those who have just opened Photoshop for the first time.

The effect shown above is the one I will show you how to create in this tutorial. If you would like to create the even more advanced scribble sketch effects shown below, or a typography sketch, then check out my Typography Sketch Photoshop Action.

Action final results

What You’ll Need

To recreate the design above, you will need the following photo:

1. Let’s Get Started

Step 1

First, open the photo that you want to work with. To open your photo, go to File > Open, choose your photo, and click Open. Now, before we get started, just check a couple of things:

  1. Your photo should be in RGB Color mode, 8 Bits/Channel. To check this, go to Image > Mode.
  2. For best results, your photo size should be 1500–4000 px wide/high. To check this, go to Image > Image Size.
  3. Your photo should be the Background layer. If it is not, go to Layer > New > Background from Layer.
Checking image size and mode

Step 2

Now we need to expand the canvas a little bit on the top so we have more space around the subject on this side. Go to Image > Canvas Size and use the settings below:

Expanding canvas

Step 3

We are going to do the same thing for the left and right sides of the canvas. Go to Image > Canvas Size and use the settings below:

Expanding canvas

2. How to Create Brushes

Step 1

In this section, we are going to create a few sketch brushes we’ll need.
Take a pencil and paper and draw three scribbles. Then scan the scribbles that you drew. 

If you have drawn each
scribble on a separate sheet of paper then you should have three scanned scribble
files now. If not, then using some of the selection tools in Photoshop,
select each scribble, and move it to a separate file so you have three
files. Here are the scribbles that I drew.

Creating scribbles

Step 2

You don’t have to replicate my scribbles, of course—draw them uniquely. But scribbles should be drawn sharply and have similar
density to the scribbles I drew. As you’ll draw unique scribbles, there
will be a density difference, but if you draw them so they are noticeably
drawn much thicker or more sparsely, your sketch effect may appear too thick
or the reverse. 

Now open the first scribble scan, go to Edit > Define Brush to define this scribble as a brush, and name it Temp Brush 1.

Defining the brush

Step 3

Open the second scribble scan, go to Edit > Define Brush to define this scribble as a brush, and name it Temp Brush 2.

Defining the brush

Step 4

Now open the latest scribble scan, go to Edit > Define Brush to define this scribble as a brush, and name it Temp Brush 3.

Defining the brush

Step 5

Now that we have defined our brushes, we need to adjust their settings and then define them again as new brushes. Press B on your keyboard, Right-click anywhere inside the canvas, select the Temp Brush 1 brush, and hit Enter. Then go to Window > Brush and in the Brush window use the settings below:

Changing brush settings

Step 6

To define this brush with new settings as a new brush, click on the top right icon in the bottom right corner of the Brush panel, and name it Scribble_Brush_1.

Defining new brush

Step 7

Now press B on your keyboard, Right-click anywhere inside the canvas, select the Temp Brush 2 brush, and hit Enter. Then go to Window > Brush and in the Brush window use the settings below:

Changing brush settings

Step 8

To define this brush with new settings as a new brush, click on the top right icon in the bottom right corner of the Brush panel, and name it Sketch_Brush_2.

Defining new brush

Step 9

Now press B on your keyboard, Right-click anywhere inside the canvas, select the Temp Brush 3 brush, and hit Enter. Then go to Window > Brush and in the Brush window use the settings below:

Changing brush settings

Step 10

To define this brush with new settings as a new brush, click on the top right icon in the bottom right corner of the Brush panel, and name it Sketch_Brush_3.

Defining new brush

Step 11

Now we have our brushes ready. If you want, you can delete all temporary brushes we defined by Alt-Clicking on each of them.

Deleting temporary brushes

3. How to Create the Base

Step 1

In this section we are going to create the base that
determines the subject in our photo, and we will also create the background. Go to Layer > New > Layer to create a new layer and name it Base.

Creating a new layer

Step 2

While the Base layer is selected, fill your subject with a color. You can do it in
various ways. For example, you can create a selection of your subject
using the Pen Tool (P), Magic Wand Tool (W), Lasso Tool (L) or some other tool, and then just fill the selection with a color. Or you can choose the Brush Tool (B) and brush over your photo using a hard or soft brush. It doesn’t matter what color you use.

Filling subject with a color

Step 3

Select the Background layer and go to Layer > New Fill Layer > Solid Color to create a new solid color fill layer. Name it Background Color, and set the color to #000000 as shown below:

Creating new color fill layer

4. How to Create a Subject Sketch

Step 1

In this section we are going to create a sketch from our subject using the scribble brushes that we made at the beginning of the tutorial. Select the Base layer, go to Layer > New > Layer to create a new layer and name it Scribble_Sketch_1.

Creating a new layer

Step 2

Now set the foreground color to #000000 and choose the Brush Tool (B). Then, pick the Scribble_Brush_1, and brush over the color fill area of the Base layer as well as over the edges of the color fill. Feel free to use different brush sizes.

Brushing into layer

Step 3

Select the Base layer, go to Layer > New > Layer to create a new layer, and name it Scribble_Sketch_2.

Creating a new layer

Step 4

Now set the foreground color to #000000 and choose the Brush Tool (B). Then, pick the Scribble_Brush_2, and brush over the area where you want to have more details. Feel free to use different brush sizes again.

Brushing into layer

Step 5

Select the Base layer, go to Layer > New > Layer to create a new layer, and name it Scribble_Sketch_3.

Creating a new layer

Step 6

Now set the foreground color to #000000 and choose the Brush Tool (B). Then, pick the Scribble_Brush_3, and brush over the area where you want to have more details. Feel free to use different brush sizes again.

Brushing into layer

Step 7

Set the Opacity of this layer to 78%.

Changing the opacity

Step 8

Now select the Base layer, hide it, and drag it to the top of the layers in the Layers panel.

Arranging layers

5. How to Reveal Subject Details

Step 1

In this section we are going to reveal subject details. Control-click on the Base layer thumbnail to make a selection of this layer. Then, select the Background layer and go to Layer > New > Layer Via Copy to create a new layer via copy.

Creating a new layer

Step 2

Now drag this layer just above the Scribble_Sketch_1 layer in the Layers panel and name it Subject_Details_1.

Arranging layers

Step 3

Press Control-Shift-U on your keyboard to desaturate this layer. Then change its Blending Mode to Soft Light and set the Opacity to 59%.

Changing blending mode and opacity

Step 4

Now press Control-J on your keyboard to duplicate this layer, and name this new layer Subject_Details_2.

Duplicating layer

Step 5

Drag this layer just below the Subject_Details_2 layer. Then, change the Blending Mode of this layer to Normal and set the Opacity to 25%.

Changing blending mode and opacity

6. How to Add Texture

Step 1

In this section we are going to place a texture over the sketch. Go to File > Place Embedded and choose the texture from the link. Then set Width and Height of the texture to 29.48% as shown below and name this layer Texture.

Placing texture

Step 2

Change the Blending Mode of this layer to Soft Light.

Changing blending mode

7. How to Make a Final Adjustments

Step 1

In this section we are going to make some final adjustments to the design. Select the Subject_Details_1 layer, go to Layer > New Adjustment Layer > Curves to create a new curves adjustment layer and name it Overall Brightness.

Creating new curves adjustment layer

Step 2

Now Double-click on this layer thumbnail, and in the Properties panel use the settings below:

Adjusting curves

Step 3

Double-click on the Background Color layer thumbnail and set the color to #767676 as shown below:

Changing background color

Step 4

Now select the Overall Brightness layer and hide the Texture layer. Then, press Control-Alt-Shift-E on your keyboard to make a screenshot.

Making a screenshot

Step 5

Go to Filter > Other > High Pass and set the Radius to 2 px as shown below:

Adding high pass filter

Step 6

Now show the Texture layer again. Then, change the Blending Mode of this layer to Overlay and name it Overall Sharpening.

Changing blending mode

You Made It!

Congratulations, you have succeeded! Here is our final result:

Final result

If you would like to create the even more advanced scribble
sketch effects shown below, or a typography sketch, then check out my Typography Sketch Photoshop Action.

The action works so you just brush over your photo and play the action. It’s really that simple! The action will do everything for you, giving you fully
layered and customizable results. You can choose from three different scribble sketch styles, and you can also create a typography sketch.

The action comes with a detailed video tutorial that demonstrates how to use and customize the results to get the most out of the effect.

Action final results

New Course: Gravit Designer Quick Start

Introducing Gravit Designer—a completely free vector design application launched earlier this year. It’s available in the browser as well as on Linux, Mac, ChromeOS and Windows, making it arguably the most accessible application of its type in the world.

If you want to get to know all the ins and outs of this exciting new design app, try our new course, Gravit Designer Quick Start.

What You’ll Learn

Gravit is packed with professional-level features that position it as the next big up-and-coming graphics app. Whether you’re a UI designer, an illustrator, or any other kind of digital artist, Gravit could quickly find a regular place in your design workflows.

In this course, instructor Kezz Bracey takes you through all of Gravit’s key features and major strengths, showing you how to get productive fast.

Gravit Designer screenshot

Here are some free lessons from this course, as a preview of what you can expect:

Interface Overview

In this video, you’ll get an overview of the most important elements of the Gravit interface. Discover each main section and some of the key settings you’ll work with in Gravit.

Path Creation

Gravit brings its own collection of path creation tools, offering some functionality uncommon in other applications. In this video you’ll discover the options you have available to you and how to use each one.

Shape Tools Overview

Gravit includes some very powerful shape creation functionality that lets you make all kinds of interesting and complex forms. In this video, you’ll learn about the shape drawing tools included, and how you can work with the modifiers of each one.

Take the Course

You can take our new course straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to this course, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+. 

Plus you now get unlimited downloads from the huge Envato Elements library of 400,000+ creative assets. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.

Typography: The Anatomy of a Letter

Learn the basics of typography in this quick video!

Typography: The Anatomy of a Letter

The more we communicate, the closer we become. Typography inspires us by reminding the world of a simpler time without connection. As designers and artists, we can carry that fascination into our work by studying the makeup of letters.

Start with the basics with this quick video below. Learn the anatomy of a letter.


Common Typography Terms

Familiarize yourself with these terms to get a better handle on typography.

Baseline

The invisible line letters rest on.

Baseline - Anatomy of a Letter

Stem

A single vertical stroke upwards to create letters like L or F. Connect one stem to another using a crossbar detail, like the letter H.

Stem and Crossbar - Anatomy of a Letter

Ascender/Descender

Letters with downward strokes that extend past the baseline have Descender strokes. Alternatively, if the stroke moves upward and away from the main body of the letter, we call that the Ascender stroke.

Ascender and Descender - Anatomy of a Letter

Upper/Lowercase Letters

Uppercase letters are capital letters. Lowercase letters are smaller ones. Use uppercase letters for names and places, and lowercase letters for casual settings and more readability.

Upper and Lowercase Letters

X-Height

For lowercase letters, the X-height is the main body of the letter.

X-height - Anatomy of a letter

Counters and Spine

Fully or partially closed spaces found in letters like O, A, and B. If the letter isn’t fully closed, then it’s an Open Counter.

Counter and Ear - Anatomy of a letter

Ear and Shoulder

An Ear is a decorative detail that pokes out from letters like g. A Shoulder is a bumped curve seen in letters like m and n.

Ear and Shoulder - Anatomy of a Letter

Serif vs. Sans Serif

Serif types feature extended stroke details also known as feet. These details are missing in Sans Serif styles.

Serif Vs Sans Serif Typefaces

Learn More About Typography

Typography is an art form every designer can admire. Continue exploring your interest in typography to build your skills over time.

Get Amazing Design Resources

Want to create videos like this? Download the resources used in this video:

Check out these tutorials to learn more from our experts:

How to Create a Set of Snowflake Icons in Adobe Illustrator

Final product image
What You’ll Be Creating

Since winter is just around the corner, I thought it would be nice to welcome it by creating a small set of snowflake icons, using some of Illustrator’s most basic geometric shapes and tools.

Now, you can always expand the pack by heading over to GraphicRiver, where you’ll find a great selection of winter-themed icons just waiting to be picked.

That being said, make sure you grab a hot cup of that almond choco-latte, and let’s jump straight into it.

1. How to Set Up a New Project File

Assuming you already have Illustrator up and running in the background, bring it up and let’s set up a New Document (File > New or Control-N) using the following settings:

  • Number of Artboards: 1
  • Width: 800 px
  • Height: 600 px
  • Units: Pixels

And from the Advanced tab:

  • Color Mode: RGB
  • Raster Effects: Screen (72ppi)
  • Preview Mode: Default
setting up a new document

2. How to Set Up a Custom Grid

Since we’re going to be creating the icons using a pixel-perfect workflow, we’ll want to set up a nice little grid so that we can have full control over our shapes.

Step 1

Go to the Edit > Preferences > Guides & Grid submenu, and adjust the following settings:

  • Gridline every: 1 px
  • Subdivisions: 1
setting up a custom grid

Quick tip: you can learn more about grids by reading this in-depth piece on How Illustrator’s Grid System Works.

Step 2

Once we’ve set up our custom grid, all we need to do in order to make sure our shapes look crisp is enable the Snap to Grid and Snap to Pixel options found under the View menu, which will transform into Snap to Pixel each time you enter Pixel Preview mode (if you’re using an older version of the software).

Now, if you’re new to the whole “pixel-perfect workflow”, I strongly recommend you go through my How to Create Pixel-Perfect Artwork tutorial, which will help you widen your technical skills in no time.

3. How to Set Up the Layers

Once we’ve set up our document, it would be a good idea to structure our project using several layers, since this way we can maintain a steady workflow by focusing on one icon at a time.

That being said, bring up the Layers panel, and create a total of five layers, which we will rename as follows:

  • layer 1: reference grids
  • layer 2: first snowflake
  • layer 3: second snowflake
  • layer 4: third snowflake
  • layer 5: fourth snowflake
setting up the layers

4. How to Create the Reference Grids

The reference grids (or base grids) are a set of precisely delimited reference surfaces, which allow us to build our icons by focusing on size and consistency.

Usually, the size of the grids determines the size of the actual icons, and they should always be the first decision you make once you start a new project, since you’ll always want to start from the smallest possible size and build on that.

Now, in our case, we’re going to be creating the icon pack using just one size, more exactly 64 x 64 px, which is a fairly large one.

Step 1

Start by locking all but the “reference grids” layer, and then grab the Rectangle Tool (M) and create a 64 x 64 px orange (#F15A24) square, which will help define the overall size of our icons.

creating the shape for the reference grid

Step 2

Add a smaller 56 x 56 px one (#FFFFFF) which we will position on top of the previous shape, since it will act as our active drawing area, thus giving us an all-around 4 px padding to work with.

creating the shape for the active drawing area

Step 3

Select and group the two squares together using the Control-G keyboard shortcut, and then create the remaining grids using three copies (Control-C > Control-F three times) spaced 28 px horizontally from the original. Once you have all the reference grids, group (Control-G) and then center align them to the underlying Artboard, making sure to lock the current layer before moving on to the next one.

adding the remaining reference grids

5. How to Create the First Snowflake Icon

Assuming you’ve successfully managed to create the little reference grids, move on to the next layer (that would be the second one), and let’s kick off the project by creating the first flake.

Step 1

Create the vertical section of the snowflake using a 52 px tall 4 px thick Stroke line with a Round Cap, which we will color using #7FD7E5 and then center align to the empty active drawing area.

creating the shape for the vertical section for the first snowflake

Step 2

Switch over to Pixel Preview mode (Alt-Control-Y), and then draw the v-shaped crystal formation using a 4 px thick Stroke (#7FD7E5) with a Round Cap, which we will position as seen in the reference image.

adding the upper segment to the first snowflake

Step 3





Create the bottom
detail using a copy (Control-C >
Control-F
) of the one that we’ve just finished working on, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal
) and then position on the opposite side of the
active drawing area. Once you’re done, select and group all three shapes
together using the Control-G
keyboard shortcut.

adding the bottom segment to the first snowflake

Step 4





Create the flake’s
vertical section using a copy (Control-C
> Control-F
) of the one that we’ve just grouped, which we will rotate at
a 90º angle using the Rotate tool (right click > Transform > Rotate > 90º).

adding the horizontal section to the first snowflake

Step 5





Add the left diagonal
section using another copy (Control-C
> Control-F
) of the vertical one, which we will rotate at a 45º angle (right click > Transform > Rotate > 45º), as seen in the
reference image.

adding the left diagonal section to the first snowflake

Step 6





Make sure that the
rotated shapes are perfectly snapped to the Pixel Grid by switching over to Pixel Preview mode (Alt-Control-Y)
and then individually selecting and positioning them back onto the grid with
the help of the Direct Selection Tool
(A)
.

snapping the anchor points back to the pixel grid

Step 7





Finish off the current
snowflake by creating the right diagonal section using a copy (Control-C > Control-F) of the one
that we’ve just finished
working on, which we will vertically reflect (right click > Transform > Reflect > Vertical). Once you’re
done, select and group (Control-G)
all of the strokes together before moving on to the next one.

finishing off the first snowflake

6. How to Create the Second Snowflake Icon

Assuming you’ve finished working on the
first icon, move on to the next layer (that would be the third one), and let’s start
working on our second snowflake.

Step 1













Create the vertical
section using a 36 px tall 4 px thick Stroke line with a Round Cap,
which we will color using #7FD7E5 and then center align to the underlying
active drawing area.

creating the vertical section of the second snowflake

Step 2





Add the top and bottom end sections using two 8 x 8 px circles with a 4 px
thick Stroke (#7FD7E5), which we
will position as seen in the reference image.

adding the circular segments to the second snowflake

Step 3





Draw the two detail segments using a 4 px thick Stroke (#7FD7E5)
with a Round Cap, using the
reference image as your main guide. Take your time, and once you’re done, select
and group (Control-G) all of the
current shapes before moving on to the next step.

adding the v-shaped segments to the second snowflake

Step 4





Create the flake’s horizontal section using a copy (Control-C > Control-F) of the shapes
that we’ve just grouped, and then rotate them using a 90º angle (right click >
Transform > Rotate > 90º
).

adding the horizontal section to the second snowflake

Step 5





Finish off the current icon by adding its diagonal sections using a copy
(Control-C) of the ones from the previous
snowflake, which we will paste (Control-F)
onto the current layer, making sure to align them as seen in the reference
image. Once you’re done, select and group (Control-G)
all of its composing shapes, before moving on to the next one.

finishing off the second snowflake

7. How to Create the Third Snowflake Icon

By now you know the drill, so make sure
you’ve positioned yourself onto the next layer (that would be the fourth one),
and let’s jump straight into it.

Step 1













Start by creating the
center section of the snowflake using a 12
x 12 px
circle with a 4 px thick
Stroke (#7FD7E5), which we will
position in the center of the third reference grid.

creating the center shape for third snowflake

Step 2





Start working on the vertical section, by creating a 16 px tall 4 px thick Stroke
segment (#7FD7E5) with a Round Cap,
which we will position onto the circle’s top anchor point as seen in the
reference image.

adding the top segment to the third snowflake

Step 3





Turn on Pixel
Preview
mode (Alt-Control-Y),
and then draw the top v-shaped segment, using a 4 px thick Stroke (#7FD7E5) with a Round Cap,
making sure to start from the vertical segment’s top anchor point and go all
the way up to the active drawing area’s top edge.

adding the v-shaped segment to the top of the third snowflake

Step 4





Take a couple of moments and draw the remaining
segments, making sure to maintain a 4 px gap between their end anchor points, and 8 px between their center ones. Once you’re done, select and group
(Control-G) all four shapes together
using the Control-G keyboard
shortcut.

adding the top segments to the third snowflake

Step 5





Create the vertical section’s bottom segment using a copy of the shapes that we’ve just grouped, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal
) and then position on the opposite edge of the
active drawing area.

adding the bottom segments to the third snowflake

Step 6





Finish off the snowflake by adding its
horizontal section using a copy (Control-C
> Control-F
) of the vertical segments that we’ve just created, which we
will rotate at a 90º angle (right click > Transform > Rotate >
90º
).  Once you’re done, select and
group (Control-G) all the shapes
together, before moving on to the next icon.

finishing off the third snowflake

8. How to Create the Fourth Snowflake Icon

We are now down to our fourth and last
icon, so make sure you position yourself onto the fifth layer, and let’s wrap
things up!

Step 1













Start by making a
copy (Control-C) of the snowflake
that we’ve just finished working on, which we will paste onto the current
layer and then ungroup (right click
> Ungroup
), removing some of its details as seen in the reference image.

creating the upper segments for the fourth snowflake

Step 2





Adjust the length of the vertical segment by
selecting its top anchor point with the help of the Direct Selection Tool (A) and then dragging it upwards until its
top end touches the active drawing area’s outer edge.

adjusting the length of the upper segment

Step 3





Create a copy (Control-C > Control-F) of the v-shaped segment, and position them 4 px from one another, at a distance of 4 px
from the vertical segment’s top anchor point. Once you’re done, select and
group (Control-G) all three shapes
together, before moving on to the next step.

adding the second upper segment to the fourth snowflake

Step 4





Create the snowflake’s bottom segment using a
copy of the one that we’ve just finished working on, which we will horizontally
reflect (right click > Transform >
Reflect > Horizontal
) and then position on the opposite edge of the
active drawing area.

adding the bottom segments to the fourth snowflake

Step 5





Add the horizontal section using a copy (Control-C > Control-F) of the two
vertical segments, which we will rotate by 90º (right click >
Transform > Rotate > 90º
).

adding the horizontal section to the fourth snowflake

Step 6





Take a couple of moments, and draw the top-left
diamond shape using a 4 px thick Stroke (#7FD7E5) with a Round Join, which we will position 10 px from the active
drawing area’s top-left corner.

adding the diamond shape to the fourth snowflake

Step 7





Finish off the snowflake, and with it the
project itself, by adding the remaining diamonds using three copies (Control-C > Control-F three times)
which we will horizontally and/or vertically reflect (right click > Transform > Reflect > Vertical and/or Horizontal) and then position as seen
in the reference image. 

Take your time, and once you’re done, select and group
(Control-G) all of the icon’s
composing shapes together before hitting the save button.

finishing off the fourth snowflake

Great Work!

There you have it, fellow snowflake lovers, a nice and easy tutorial on how
to create your very own icon set, using nothing more than a few strokes
and geometric shapes.







As always, I hope you had fun and managed to
learn something new and useful during the process.

finished project preview

Start Saving With These Early Cyber Monday Deals

At Envato this year, Cyber Monday lasts a whole week. You can get 50% off selected items on Envato Market, or save a whopping $120 on an annual Envato Elements subscription, any time between now and next Wednesday, 29 November. 

So if you’re looking for Photoshop actions, WordPress themes, stock photos, video footage, music or a wide array of other creative digital products, you can snag some impressive savings. Just visit the Cyber Monday Sale page to get the full details and start saving.

Cyber Monday sale details

50% Off 500 Envato Market Items

For the Cyber Monday sale on Envato Market, 500 popular items have been marked with special 50% reductions. 

So you can build a new site with top themes, add functionality with code, design with stunning add-ons and templates, or bring your projects to life with audio and video files. All at half the normal price.

You can browse all the discounted items on the sale page

Envato Market sale items

Save $120 on an Envato Elements Annual Subscription

If you just want one or two specific items, the Envato Market sale above is the one for you. But if you regularly use fonts, graphic templates, WordPress themes and other creative assets, an Envato Elements subscription is the best deal in town.

For $228 (the equivalent of $19 a month), you get a whole year of unlimited downloads from the huge library of 400,000+ stock photos, WordPress themes and plugins, icons, fonts, presentation templates, and much more.

Envato Elements homepage

And on top of that, you also get free access to unlimited Tuts+ courses and eBooks. So it’s the perfect way to improve your skills while having access to all the digital assets you’ll need for your creative projects throughout the year. It’s an investment that will pay off many times over.

Don’t Miss Out!

Remember, all of these deals end on 29 November, at 2 pm AEDT (Australian Eastern Daylight Time). Yes, that’s Australian time, so if you’re in Europe, America or other points east, you should make sure you’ve done all your shopping by Tuesday, 28 November at the latest. After that, the prices go back to normal.

You can find more details on all of these deals and links to the discounted items on the Envato Cyber Monday Sale page. So head over there to stock up on all the digital assets you’ll need for the coming year, at unbeatable prices.

How to Create a Starry Night Photo Manipulation With Photoshop and Filter Forge

Final product image
What You’ll Be Creating

The Starry Night by Vincent van Gogh is easily one of the most recognizable pieces in art history.

And I’ll show you how to make it in this tutorial! Build the famous composition from scratch, using free stocks, Photoshop, and amazing filters from Filter Forge.

Tutorial Assets

The following assets were used in the production of this tutorial.

How to Download Filter Forge

To use Filter Forge, you’ll need to download it first. After you run the installation, it’ll automatically update in Photoshop CC under the Filter menu.

Download Filter Forge

To launch the program and peek around, go to Filter > Filter Forge > Filter Forge 7.

Browse their massive collection of over 12,000 filters for smart photo effects, 3D textures and more. Search their selection online or use the Download More Filters option within the program to get started.

Here are all the filters you’ll need for this tutorial:

1. How to Create the Starry Night Scene

The first step is always the research. And it’s pretty crucial in this scenario. We’re challenging ourselves to emulate a very famous painting, so we want to pay homage and our respects by paying close attention to details.

Here’s a little backstory on the Starry Night from my Art History article on Impressionism:

Vincent painted The Starry Night as a patient at the Saint Rémy de Provence asylum in southern France. Like many of his works, it features cypress trees and a small town under a glowing night sky.

Starry Night by Vincent van Gogh

With this in mind, here are a few notes to remember:

  • Oddly enough, none of the scenery in The Starry Night matches the actual location. It’s not a plein air painting, but one from imagination.
  • However, you can find stocks that still match the original layout. Look for items like cypress trees, old historical towns, and general landscape photography.
  • Also, Impressionism is a very loose style of painting, so the filters we’re using should match that too.

Let’s begin!

Step 1

To build the Starry Night scene, we’ll need these images:

Starry Night references

Create a New Document in Photoshop at 1250 x 950 pixels. Then Copy and Paste this Field reference onto its own layer.

Paste the field image

If you have trouble with perspective, references like this can help you learn how to ground the landscape and figure out the layout. For the most part, we’ll be placing images on top of this field, so it’s just a placeholder for now.

Step 2

To show you exactly what I mean, let’s add the main focal points—the trees and sky. Extract the tree from the Cypress image using the Magnetic Lasso Tool (L).

Extract the tree

Delete the white background layer.

Then Copy and Paste the tree onto its own layer above the field. Control-J to Duplicate the layer twice. Use the Free Transform Tool (Control-T) to resize the other two trees to match the painting.

Resize the trees

Step 3

Now that we have the trees ready, we need to change their shape to look more fluid, like the Impressionist style. We’ll do this by using the Liquify Tool.

Bring the first tree into Liquify. Select the Tree layer and go to Filter > Liquify.

Liquify the tree

Use the Forward Warp Tool (W) to push the branches and leaves inward. Create curvy, S-like shapes like the ones Vincent loved. And make the base of the trees more round.

Do this for all three trees. Keep checking back with the original Starry Night to see which shapes work best. Here is my result.

Liquify trees result

Step 4

The next part of this puzzle is the sky.

Both the sky and trees make up the biggest pieces to this puzzle. And this Sky and Mountains stock is pretty awesome because the high mountain shapes on the right side look just like the painting.

So let’s add it in, shall we?

Copy and Paste the sky and mountain reference onto its own New Layer above the field. Use the Move Tool (M) to position the image higher on the canvas, allowing the mountains to hit their mark in Van Gogh’s scene.

sky and mountains

Next, add a Layer Mask to the sky and mountains layer. Now we must reshape the mountain image. Select the Brush Tool (B) and use a Hard Round Brush to paint black onto the mask. Mask out the areas seen below.

This step should help guide your eyes to understand where things intersect within the painting. One image alone will help create the perfect background elements!

Mask the mountains

If you’re picky about the details, let’s adjust this mountain before we move on. Go to Filter > Liquify and push the mountain higher using the Forward Warp Tool (W).

Liquify the mountain

Step 5

Now for a little surgery!

To create a sky more like the painting, we have to redistribute the clouds we see.

Cut and paste the sky
  1. Use the Polygonal Lasso Tool (L) to create a large selection on the left side in order to cut out that section. Hold Control-J after your selection to Paste it onto a New Layer.
  2. Flip the sky piece. Go to Edit > Transform > Flip Horizontal.
  3. Place it above the right mountains. Use a Layer Mask to diffuse the edges with a Soft Round Brush.

Now repeat these steps to add more clouds to the scene. Select the clouds first, and then Flip and Mask them. Use a Soft Round Brush to help blend the clouds into the mountains and sky.

Here is the result.

Add more clouds to the sky

Step 6

Time for some more trees!

Copy and Paste this Landscape stock onto a New Layer above the clouds. Add a Layer Mask to mask out the sky. Then use a Soft Round Brush to feather out the trees near the top of the landscape.

Here is the result. The extra benefit of this stock is that it’ll help fill in the gaps of our painting.

Add the trees and town

Before we move on, let’s fix the color. Add a New Adjustment Layer of Curves and set it as a Clipping Mask to the landscape layer. Adjust the curves for the RGB, Blue, and Red Channels to make the landscape more blue.

Fix the landscape color

Step 7

Repeat these steps with the Old Town image.

This image will represent the middle ground area. This is where the town in the painting should be.

Paste, Mask, and then recolor, remember? Copy and Paste the image, or just an extraction onto a New Layer. Add a quick Layer Mask to clean up the edges around the buildings. Then add a New Adjustment Layer of Curves, this time lowering the RGB Channel for more contrast.

Add a curves adjustment layer

Feel free to use bits and pieces from the other stocks to fill in parts of the scene.

Before we move on, add a New Adjustment Layer of Color Lookup. We’ll use this to finish the photo composite portion of this Starry Night effect.

Set the 3D LUT File to FoggyNight.3DL and lower the Opacity to 60%.

Here is the result.

Starry Night photo composite

2. How to Apply the Starry Night Filters

Time for filters!

The Starry Night is well known for its beautiful, painterly style. We’ll achieve this by using several filters from Filter Forge.

Let’s start with the trees.

Step 1

Control-Click on the first tree layer. Then go to Filter > Filter Forge > Filter Forge 7.

Choose the Van Gogh Flow filter under the Effects > Creative category.

Choose the default preset, and then add the following settings.

Apply the van gogh flow filter

Apply this filter to the rest of the trees. Use the same settings as above.

Apply van gogh filter again

Step 2

Apply the Layer Masks to the town and landscape layers, and then Merge them together.

Using the same process as before, we’ll apply the Van Gogh Flow filter to this merged result.

But first, Control-J to create a Duplicate of the merged layer. Use the copied layer for this effect. This time, choose the third preset on the list, and add the following settings.

Apply van gogh flow to town

Here’s the end result.

Van gogh flow result

Next, let’s do the field layer. Using the same filter again, we’ll make some minimal changes to the settings to make the brush strokes more short and fat.

Apply van gogh flow to the field

Step 3

For the sky and mountains, we’ll be using the Brush Engine Van Gogh filter instead. Merge the sky and mountain layers together. Then, using the default preset and settings, apply this brush engine filter.

Apply brush engine van gogh filter

Here is the result after all the filters have been applied.

Starry night filter result

3. How to Paint Impressionist Details

The filtered results look great, but now they need to blend well together. Vincent often had a habit of outlining his work, so we’ll have to do the same before painting more color.

But first, let’s add a moon!

Step 1

Create a yellow #c6b16f ellipse with the Ellipse Tool (U). Place it in the top right corner and set the Blend Mode to Vivid Light.

Add a bright moon

Step 2

Now let’s outline each section. Create a New Layer and select the Brush Tool (B). Use a Hard Round Brush (50-80% Opacity) to paint black lines outlining the landscape and town.

Build the line weight and texture by going along with the Impressionist style.

Outline the painting

Start to incorporate some more color. Choose ones Vincent loved himself!

Use the Eyedropper Tool (E) to pick up colors from the scene and use them as your Foreground Colors.

Here I used colors like yellow #bca736 and red #693d38 to make the painting pop with colorful outlines and stars. Then I drew in a simple moon shape for a fun addition.

Paint more color

Step 3

Set a New Layer to Overlay. Use a Soft Round Brush to give the stars and moon a bright yellow glow.

Add yellow glow

To finish this Starry Night effect, you’ll need to add a few more layers of painterly brush strokes, specifically white highlights. Study the original painting and experiment with different brush textures for more fun.

Here’s the Starry Night painting so far.

Starry Night Painting Effect

4. How to Add a Frame

Step 1

If you want to take this another step, add a frame! Merge all the layers together.

Copy and Paste the Starry Night painting onto the canvas. Control-click the layer and go to Filter > Filter Forge > Filter Forge 7.

Select this Painting Frame and use the default preset with the following settings:

Add a frame

Here is the framed result against a nice #ababab tan background.

framed result

Step 2

If you’d like to add even more texture to this piece, consider an old, cracked painting effect. Select the Starry Night with the Rectangular Marquee Tool (M). Control-J to make two layers of copies, and then use just one of the copies for this filter.

Control-click one copy and go to Filter > Filter Forge > Filter Forge 7.

Select this Cracked Old Painting filter, use the default preset, and apply the following settings:

Add a cracked painting filter

The result may appear a little dull. So set the second copy to Lighter Color to bring out the painting again.

Looks great! Feel free to add a Drop Shadow for a realistic finish.

Starry Night Photo Manipulation

5. How to Apply the Effect to a New Painting

But wait…there’s more!

You can take this effect to the next level with a little painting inception. That’s right. A painting, within a painting… movie style.

To do this, we’ll need another piece to work from. Bedroom in Arles is another popular painting of his: a still life of his bedroom in France.

To recreate this scene in his famous Impressionist style, we should definitely try a shorter route! As it turns out, there’s this super awesome picture of a sculpture of his room that we can use instead.

Step 1

Open the image in Photoshop. Hold Control-J to create a copy of the background, set it to Linear Light, and lower the Opacity to 22%.

Control-click the copy and Run Filter Forge to apply the Starry, Starry Night filter. Use the default preset with the following settings:

Apply the starry starry night filter

Step 2

Next, add two New Adjustment Layers.

The first is Levels. Adjust the settings for the RGB Channel for more brightness.

Add a levels layer

Then add a Color Balance Adjustment Layer.

Add a color balance adjustment

Step 3

Almost there! Let’s rebuild the color scheme in these next few steps.

Recolor the painting
  1. Fill a New Layer with brown #392b24. Set the Blend Mode to Hue and lower the Opacity to 54%.
  2. Create another New Layer and use the Brush Tool to paint orange #f7a300 onto the wall. Set the Blend Mode to Subtract (it turns the wall blue) and lower the Opacity to 52%. Clean up the edges with a Layer Mask.
  3. Create another New Layer for the flower. Paint brown #8f786b onto the floor, and then set the layer to Hue.

Step 4

Fill a New Layer with blue #3f00cd and set it to Difference. Lower the Opacity to 20%.

Now insert the Starry Night painting! Hang it on the wall in the back.

Add the starry night painting

Step 5

Make the Starry Night blend into the new painting by applying a filter. Use the same Starry Night filter from before.

Add a filter to the starry night

Step 6

Add a New Layer and dedicate it to adding some texture to the walls. Paint soft white strokes reminiscent of the style we created earlier.

Use this same layer to play with the line weight of the other items. When you’re through, Merge all the layers together.

Paint more texture

Step 7

Let’s add the final filters to complete this second painting. Duplicate the merged layer.

Run Filter Forge and apply the Van Gogh Flow filter to the copy. Use the default preset, with the following settings.

Apply the van gogh flow filter

Set this layer to Multiply and lower the Opacity to 35%. Now the painting should have a great Impressionist feel.

For more texture, Duplicate the copy.

Run Filter Forge on this layer, using the Impressionist Channels filter this time. Use the default preset and settings, and then set the layer to Saturation. Adjust the Opacity to 100%.

Add the Impressionist Channels filter

Here is the alternative inception effect!

Starry Night alternate effect

Congratulations, You’re Done!

Impressionism is a cool art style you can achieve digitally. And painting like the masters is possible with Filter Forge. Develop the right eye for stocks and compositing, and you’ll master photo manipulations with time.

Place your results in a cool gallery scene for more fun. I used this Frame Mockup from Envato Elements. Just duplicate the folder of the frame to add another.

I hope you’ve enjoyed following along. Feel free to leave your comments and result below.

Create more incredible effects with Filter Forge—check out these tutorials:

Starry Night Photo Manipulation Photoshop Tutorial by Melody Nieves

How to Create a Retro Long Shadow Text Effect in Adobe Illustrator

Final product image
What You’ll Be Creating

In the following steps, you will learn how to create a retro long shadow text effect in Adobe Illustrator. 

For starters, you will learn how to create some text. Taking full advantage of the Appearance panel and using a neat Transform effect, you will learn how to add the long shadow effect without expanding your text. Some basic blending techniques and a simple Gaussian Blur effect will be the final touches for your text effect.

For more inspiration on how to adjust or improve your final text effect, you can find plenty of resources at GraphicRiver.

1. How to Create the Text

Step 1

Hit Control-N to create a new document. Select Pixels from the Units drop-down menu, enter 850 in the width box and 610 in the height box, and then click that More Settings button. Select RGB for the Color Mode, set the Raster Effects to Screen (72 ppi), and then click that Create Document button. Don’t forget to set the unit of measurement to pixels from Edit > Preferences > Units.

setup grid

Step 2

Pick the Type Tool (T) and open the Character panel (Window > Type > Character). Select the Insaniburger font and set the size to 200 px.

Move to your artboard, click on it, and add your piece of text about as shown below. Make it black.

type tool

Step 3

Use the same tool and character attributes to create the last letter of your text. Make it blue and place it right above the black one.

Keep adding separate blue letters until you cover all your black text. Once you’re done, go to the Layers panel (Window > Layers) and remove your black text.

letter

2. How to Add the Long Shadow Effect

Step 1

Select one of your letters, focus on the Swatches panel (Window > Swatches), and click that [None] swatch to remove the blue text color.

Move to the Appearance panel (Window > Appearance) and add a new fill using the Add New Fill button. Select that new fill and set the color to R=255 G=245 B=225.

fill none

Step 2

Make sure that your “S” is still selected and focus on the Appearance panel. Add a second fill and select it. Drag it to the bottom of the panel, set the color to R=0 G=146 B=69, and then go to Effect > Distort & Transform > Transform. Drag both Move sliders to 0.5 px, enter 700 in that Copies box, and then click OK.

long shadow

Step 3

Make sure that your “S” is still selected and keep focusing on the Appearance panel. Add a third fill and select it.

Drag it between the existing two fills and set the color to black. Lower its Opacity to 10% and then go to Effect > Path > Offset Path. Enter a -10 px Offset, click OK, and then go to Effect > Distort & Transform > Transform. Drag both Move sliders to 15 px, click OK, and then go to Effect > Blur > Gaussian Blur. Enter a 5 px Radius and then click OK.

add new fill

Step 4

Focus on the Layers panel, open your layer, and use those target icons to easily apply the Appearance attributes used for your first letter to the rest of your letters. Target icons are the little round icons displayed at the far right of each individual layer or shape.

Hold the Alt button from your keyboard, click the target icon that stands for your “S“, and then drag it onto the target icon that stands for your “T“. Select your “T“, focus on the Appearance panel, and replace the green used for that bottom fill with R=255 G=154 B=9.

target icon

Step 5

Move to the “O” and apply the same Appearance attributes, but replace the green with R=244 G=54 B=44.

Select that “P” and apply the same Appearance attributes, but replace the green with R=7 G=132 B=170.

red blue

3. How to Create a Background and Add More Text

Step 1

Pick the Rectangle Tool (M) and create a shape that covers your entire artboard. Fill it with R=42 G=27 B=67 and send it to back (Shift-Control-[).

background

Step 2

Pick the Type Tool (T) and focus on the Character panel. Make sure that the Insaniburger font is still selected and set the size to 50 px.

Add the “DON’T” piece of text and place it as shown in the following image. Again, remove the text color and focus on the Appearance panel. Add a fill using that Add New Fill button, select it, and set the color to R=255 G=245 B=225.

type tool

Step 3

Make sure that your “DON’T” piece of text stays selected, focus on the Appearance panel, and add a second fill. Select the bottom fill, set its color to R=255 G=80 B=145, and then go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click that OK button.

add new fill

Step 4

Make sure that your “DON’T” piece of text is still selected and keep focusing on the Appearance panel. Add a third fill and select it.

Drag it between the existing two fills and set the color to black. Lower its Opacity to 10% and then go to Effect > Path > Offset Path. Enter a -2 px Offset, click that OK button, and then go to Effect > Distort & Transform > Transform. Drag both Move sliders to 5 px, click that OK button, and then go to Effect > Blur > Gaussian Blur. Enter a 3 px Radius and then click that OK button.

gaussian blur

Step 5

Pick the Type Tool (T) and add the “BELIEVING” piece of text. Set the text color to R=255 G=245 B=225 and place it as shown in the following image. Make sure that this new piece of text is selected and go to Effect > Stylize > Drop Shadow. Enter the attributes shown below and then click that OK button.

drop shadow

Congratulations! You’re Done!

Here is how it should look. I hope you’ve enjoyed this tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final design and make it your own. You can find some great sources of inspiration at GraphicRiver, with interesting solutions to improve your design.

final product

Online Portfolio: 10 Designers Who Got It Right

Written by Taira Sabo, Wix Design Community Expert.

Out of all of the creative people in the world, designers have a very clear vision of what their online portfolio should look like. Their line of work demands a site that lives up to their standard, showcases the diversity of their creations, while capturing the essence of their signature. In other words: they are likely to think of their website as a piece of art in itself. As they should.

Whether you’re building your own online presence, or somebody else’s one, you need a platform that can fulfill even your wildest design fantasies. To create a website, you want to benefit from the most advanced features, intuitive to use and a platform that provides beautiful results. This way, you’re in control from design to live.

Speaking of lively results, there’s no better way to prove a point than with some stunning evidence. So without further ado, here are 10 designers who used the unlimited creative possibilities of Wix to imagine and realize portfolios that are not only functional, but serve as a true testament to their work.

1. Mike Almanza

2018 will see the confirmation of a now well-established trend: long-scrolling websites. The visual impact is great, and it fits perfectly the new mobile habits. You just need to make sure that the different strips will ‘feel’ clearly separated, while speaking the same language. This portfolio solves the perilous equation with a splash of red color that repeats on every single strip. A perfect example of how playing with only few chromas can create a memorable experience.


2. Michael Burk Studio

Like it or not, the 80’s are back – and web design is no exception, as shown by this eye-catching designer’s portfolio. The combination of a vintage computer layout and bright colors immediately gives that ultimate pop feel. The “Work” and “Info” buttons anchored on either side of the page complete the bold approach. The result? Another piece of evidence that when a website looks like candy, everyone wants a taste.

3. Hannah Jacobs 

Grid-based layouts will probably be one of the most widespread trends in 2018. Adding strips and columns helps your site to breathe, and organize the content in a more elegant way. This illustrator clearly mastered the art of composition, with her projects allocated in small boxes. For the animation, have a look at the bottom, with the film displayed in a full strip thanks to the genius tool that is Wix Video. Of course, the sketch wouldn’t be complete without the author’s signature. You’ll find it in the header, smartly transformed into the cutest and most authentic logos.


4. Dennis Krawec

Sometimes less is more. Obviously not here. This site proves that you can go crazy with colors, animations and a busy design language, and still create a fantastic-looking opus! If you happen to need a multilingual site, take some inspiration at how effortlessly this portfolio switches from English to Japanese.


5. Mild Design

Some pieces of art are so strikingly beautiful that they need very little introduction. This website went for a long-scrolling page that allows the visitors to discover the galleries gently and quietly – like in a museum. Don’t discard all textual content just yet. If you go for the same inspiration, the footer is the perfect place to stuff all your crucial information – such as your contacts and social media.


6. Candyfornia

GIF, GIF, GIF is all we can say! While the animations (and colors) may be busy, the perfectly boxed layout calms down the craze. The very prominent logo is balanced out with clean and simple “Services” and “About” pages. Another smart move: the rolling Instagram feed directly displayed on the homepage, and which looks like the most appetizing candy necklace.

7. Bruna Cristina   

A powerful portrait as the header of your website is a classic, yet efficient way to lure users in and tempt them to continue to scroll. Another great find: check out how this design challenged the standard photography portfolio structure, by showcasing the gallery in a striking two-column grid.


8. Thai Pham

You learned it in your first year of (web) design school: white space is a crucial element to draw your users’ eyes onto what’s really important. This portfolio put the theory into practice in a masterly fashion, with white borders and a vast amount of space between the images. As a result, the website looks like it ‘breathes’ – even though a lot of pictures are displayed. We also love the sharp and ‘broken’ letters of the logo, which give off an edgier feel to an overall elegant design.

9. Max Halley   

If your work involves a sense of humor and color, why not place it front and center to catch your visitors’ attention? This über-talented designer does exactly that. His fun, bright, and neon-colored animations are the most inviting. Note the clean background that helps balance out all the adventurous hues, and ease the navigation.

10. Adieu Film

Giving your website a character, if not a personality, is crucial. Somewhere between Wes Anderson’s movies and the sophisticated designs of the 60’s, this site clearly found its own language. We could elaborate for hours on this homepage that is supremely enticing, thanks to the lovely pink overlay and the slow motion video background. ‘Adieu’ film maybe, but ‘bienvenue’ to stunning web design!

Filled up with good inspiration? It’s your turn to experience creativity without limits. Start designing your website with Wix now!

Save Now With These 9 Superb Black Friday Deals

Black Friday is coming, and web designers and developers haven’t been left out. We’ve put together eight deals, one or more of which you’re bound to find useful. Each one is offered at a discount! So, make sure you check these products out before Black Friday slips away for another year.

These are money-saving deals to be sure. But more importantly, these products were designed with productivity in mind. At the very least, they’ll make your workday easier. At the same time, they can help to improve the value of your products or services.

If you could use some help creating a website or a table, or managing a project, there’s something here for you!

  1. wpDataTables

Attempts to create well-organized and easy to understand tables and charts can be slow-going; especially when you have huge amounts of data to contend with or the makeup of the data is quite complex. wpDataTables not only makes the process quick and easy, but your charts and tables will be responsive, editable, and interactive as well.

wpDataTables is a highly popular WordPress plugin, well-known for its speed and efficiency.It has over 13.000 paying users, with an average customer rating of 4.6. It doesn’t require any coding on your part to use, and it can organize millions of rows of data in minutes – not days or weeks. In other words, using this product can save you oodles of time.

Because of its front-end editing capabilities, you can easily make changes to a chart or table on the fly, or do whatever editing is necessary to bring an already published table up to date. In addition, you can use its conditional formatting features to highlight selective content to help your chart or table tell its story. Get it at 50% off from Tuesday, 21st until Wednesday, 29th November 2017 (2 pm AEDT).

  1. Webflow Templates

To help celebrate Black Friday, you can purchase one of Webflow’s HTML5/CSS3 responsive templates at a 75% discount. A discount of this size is impressive; but what is even more impressive, is the product itself. This selection of templates, which includes templates for portfolios and blogs, is so popular, that some designers and developers have even made the switch over to WordPress as their CMS platform to be able to take advantage of them!

An estimated 380,000+ designers and developers are already using Webflow, which is all the more reason to celebrate Black Friday by taking up this generous offer.

If you make the switch, you’ll be able to significantly cut down on design and development time. The 100+ templates provide you with all the design options you’re likely to need. If not, you can always start from a blank canvas.

  1. Nutcache

Project management doesn’t have to be fun, but it doesn’t have to be a drag or a constant cause of stress either. Nutcache is a nice little web application that will help you manage a project from the time you’re putting your initial cost estimates together, up until the time you’re ready to submit final billing – i.e., throughout the life cycle of the project.

Since Nutcache was designed to support Agile methodologies, teams that adhere to Agile/Scrum processes and principles will find this web app particularly helpful. This is especially true since, because of its flexibility, Nutcache can easily adjust to a given team’s workflow.

Several financial tools have also been incorporated; something you don’t usually find in a project management app. The creators of Nutcache are offering a 40% Black Friday discount for the new customers on a yearly subscription to their Enterprise edition.

  1. Listing Pro Directory WordPress Theme

The ListingPro Directory WordPress theme is the only end-to-end, all-in-one solution theme of its type on the market today. It’s also the #1 best-selling ThemeForest Directory and Listing product. What its users like about it most is that there’s no need to pay for additional plugins. Everything you’ll need is included.

The Black Friday Special? How about a 50% discount?

  1. TheGem – Creative Multi-Purpose High-Performance WordPress Theme

 

The words “TheGem” and “ultimate” are for all practical purposes synonymous. This Swiss Army Knife of WordPress themes has everything you need to create websites in a few short hours, or even in a few minutes. TheGem is the top selling theme on ThemeForest with over 12.500 sales in just one year and 5 star rating. It offers 150 demo pages and more than 70 multi-page design concepts; plus, no coding is required.

For Black Friday, TheGem Creative Multi-purpose WordPress theme, including all the concepts and pages, as well as premium plugins like Visual Composer, Revolution Slider and LayerSlider, is yours at a 50% discount. In fact, you will get the whole package for only $29!

  1. 50% Off & $150 Amazon Card Giveaways at Themify

Web designers and developers are always on the lookout for sources of themes, plugins, or addons that can make their workdays a little easier. Themify’s Black Friday special (promo code BLACKFRIDAY) is your opportunity to purchase these items, and club memberships at a 50% discount.

You can also sign up for a Lifetime membership for $199; a $150 savings, by using promo code BFLIFE150. Both offers are good through Cyber Monday.  Happy shopping!

  1. Stockfresh

If you find yourself in a hard position where you urgently need to get a high-quality image or graphics for your project – Stockfresh has got your back! Millions of hand-picked stock photos and vectors are available at highly competitive prices at this user-friendly website.

Also, for the special occasion of Black Friday, you can get a 20% discount at a checkout with the code BLKFRD17!

  1. KALLYAS – WordPress Theme

When you choose to build a theme around the Bootstrap framework, your efforts will most likely result in a superfast product; which is precisely what you get with Kallyas WordPress theme. A high-performance WordPress theme like this makes creating SEO friendly, responsive, and superfast websites an easy task. Top-notch support accompanies this Black Friday package, with a discount of 50%.

  1. Simbla

      Simbla gives you several useful tools in a single package. It’s a website builder, an app builder, and a database builder; something that would normally require purchasing two or three different products. With Simbla, you can edit all aspects of the user interface to create your own unique database-driven apps. The Black Friday Special? A 50% discount.

Summing It Up

How did you find these eight excellent products? Each of them is offered at a bargain Black Friday price. This certainly should be a good reason to not let this special time of the year pass by unnoticed. Discounts of up to 50% on quality products, and in one case, even more, isn’t something that happens all that often.

Take a few minutes to visit the websites and check out the details.  Let one or more of these offerings help to make your day!