How to Create VHS Glitch Art in Adobe Photoshop

Final product image
What You’ll Be Creating

Do you like that grunge, glitched look on old VHS

tapes? There are different ways to add such effects to your images and even create an animation from a static photo using an Animated VHS Creation Kit.

This tutorial will show you how to convert your image to a VHS frame in simple steps using only standard Photoshop tools.

Tutorial Assets

1. Prepare the Document

Step 1

Use Control-N to create a new document and use the following settings: 1500 x 1000 px; 300 dpi.

Creation of document

Step 2

Go to File > Place and put your

image inside the document.

Adding your image

Step 3

Resize your image to the borders of the document and click Enter.

Resizing of image

Step 4

Click T and create a new text layer in the top right corner.

Creation of text layer

Step 5

Click U and select Polygon Tool, and create a triangle shape. Then place it as shown in the image below:

Creation of play icon

Step 6

Select your layers by holding Shift and then Right Click > Merge Layers.

Merging all layer to one

Step 7

Now Right Click on the layer and then Convert to Smart Object.

Creation of Smart Object

Step 8

Create four duplicates of your smart object using Right Click > Duplicate.

Creation of duplicates of layers

2. Create the Effects

Step 1

Make all layers except the first two

invisible, and then Double Click on the second layer and Uncheck the Green and Blue

channels.

Step 2

Click V and Move your second layer, holding Shift, 30 px to the right.

Creation of first color shift effect

Step 3

Make the third layer visible and Uncheck the

Red and Green channels the same way as listed above. Then move it, holding Shift20 px to the left.

Creation of second color shift effect

Step 4

Make the fourth layer visible, and go to Layer > New Adjustments Layer > Hue/Saturation.

Creation of color distortion effect

Step 5

Double Click on the adjustments

layer and change the Saturation setting to +100.

Creation of color distortion effect

As you can see, the saturation effect is applied on the entire image, but we need to crop it to only a few areas.

Step 6

Right Click on the “Hue/Saturation” layer and select Clipping Mask, so this effect will be applied only on the

necessary layer.

Applying color distortion to only one layer

Step 7

Now Add Mask to the fourth layer.

Applying color distortion to only one layer

Step 8

Alt-Left Click to

open the mask layer. Fill it with black.

Applying color distortion to only one layer

Step 9

Click M and select the areas on the mask where you want to reveal the effect, and Fill it with white.

Creation of mask for color distortion effect

Now the saturation effect is applied only on a few areas:

Step 10

Add a Mask to the fifth layer and Fill it with black. Then create a big white area a little above the center.

Creation of mask for mirror effect

Step 11

Move this layer 600 px down, while holding Shift.

Creation of mirror effect

Step 12

Go to Filter > Blur > Motion Blur and use the following settings: Angle: 15°; Distance: 15.

Creation of mirror effect

Step 13

Let’s add some more distortion to the image. Go to Filter > Distortion > Twirl and use the following settings: Angle: 50°.

Creation of mirror effect

Step 14

Right Click on the Hue/Saturation layer and select Duplicate. Then put it above the fifth layer and Create A Clipping Mask.

Creation of mirror effect

This is how our image will look after all the manipulations listed above:

3. Create the VHS Textures

Step 1

Create a new layer using Shift-Control-N, and Fill it with white.

Creation of First TV texture

Step 2

Go to Filter > Filter Gallery > Sketch and select Halftone Pattern. Use the following settings: Size: 2; Contrast: 2.

Creation of First TV texture

Step 3

Double Сlick on the layer and set the following settings: Blending Mode: Overlay; Opacity: 25%Uncheck the Red and Blue channels.

Creation of First TV texture

Step 4

Duplicate the texture layer and then use Control-T while holding Shift to rotate it 90° and resize to the borders.

Creation of second TV texture

Step 5

Double Click on the layer and set the following settings: Blending Mode: Normal; Opacity: 15%Uncheck the Green and Blue color channels.

Creation of second TV texture

Step 6

Click U and select Rectangle Tool. Then create a shape with the following settings: Width: 1800 px; Height: 120.

Creation of noise stripe

Step 7

Right Click on the rectangle layer and select Rasterize Layer.

Creation of noise stripe

Step 8

Go to Filter > Noise > Add Noise and use the following settings: Amount: 400%; Distribution: Uniform; Monochromatic.

Creation of noise stripe

Step 9

Go to Filter > Blur > Motion Blur and use the following settings: Angle: 0°; Distance: 20 px.

Creation of noise stripe

Step 10

Go to Image > Adjustments > Brightness/Contrast and use the following settings: Brightness: 150; Contrast: 100.

Creation of noise stripe

Step 11

Use Control-I on the rectangle layer to invert the colors of the noise texture, and then change the Blending Mode to Color Dodge.

Creation of noise stripe

Step 12

Duplicate your noise

stripe layer a few times and move it, holding Shift, to different places. 

Adding more noise stripes

Step 13

Create a new layer using Shift-Control-N, and Fill it with black.

Creation of confetti texture

Step 14

Go to Filter > Noise > Add Noise and use the following settings: Amount: 400%; Distribution: Uniform; Monochromatic.

Creation of confetti texture

Step 15

Now add the Patchwork effect using Filter > Filter Gallery > Patchwork and use the following settings: Square Size: 0; Relief: 0.

Creation of confetti texture

Step 16

Go to Image > Adjustments, select Threshold, and set it to 240.

Creation of confetti texture

Step 17

Double Click on the layer and use the following settings: Blending Mode: Screen; Opacity: 100%Uncheck the Red and Blue channels.

Creation of confetti texture

Step 18

Now you will need to Duplicate the layer, Check the Red and Blue channels, and Uncheck the Green channel.

Creation of confetti texture

Step 19

Move this new layer, holding Shift60 px to the right.

Creation of confetti texture

Step 20

Create a new layer using Shift-Control-N and Fill it with black. Change the Fill option to 0%.

Step 21

Double Click on the layer and select the Stroke parameter. Use the following settings: Size: 25 px; Position: Inside; Color: Black.

Creation of tv frame

Step 22

Now you need to rasterize the layer style: Right Click > Rasterize Layer Style.

Creation of tv frame

Step 23

Go to Filter > Blur > Gaussian Blur

and use the following settings: Radius: 4px.

Creation of tv frame

Step 24

Resize your frame to

fill the canvas using Control-T and holding Shift.

Creation of tv frame

4. Color Corrections

Step 1

Now you will need to create color correction layers to make our image look more “VHS”. Go to Layer > New Adjustment Layer > Curves.

Creation of curves for VHS color correction

Step 2

 Duplicate your curves layer and put it above the first layer.

Creation of curves for VHS color correction

Step 3

Double click on the first curves layer

icon and use the following settings:

Creation of curves for VHS color correction

Step 4

Now Double Click on the curves layer and change the Opacity of the curves to 35%.

Creation of curves for VHS color correction

Step 5 

Double click on the second curves layer and select the standard Photoshop preset “Strong Contrast”.

Creation of curves for VHS color correction

Awesome Work, You’re Now Done!

In this simple way, we can create VHS-style glitch artworks from any photo using only standard Photoshop tools.

Final product image

You can also check the animation created with the Animated VHS Creation Kit from the same picture.

How to Kill Competition Through a Great Web Design

Organizations today are rife with politics. Smaller the issue, greater is the hubbub around it. When it comes to dealing with a human being, you need to take into consideration perceptions, ego, and inherent insecurities. The instant you create a situation where there is a winning side and a losing side, you create politics. Office Read More …

The post How to Kill Competition Through a Great Web Design appeared first on Webgranth.

2,000 Translations Later: Your Favorites From Tuts+ Design & Illustration

Almost exactly two years ago we published our first translation; a step into the unknown, a risk perhaps, but something we felt sure our community would be enthusiastic about. Fast forward to today and we’ve published over 2,000 translations, ranging across 41 different languages, submitted by almost 600 dedicated volunteers. These posts see around a quarter of a million monthly pageviews and are helping us build upon our strong global community.

Thank You!

2,000 is a very significant milestone–thank you, community members. You rock! I should also thank translation platform Native, without which we’d still be wrestling with text files and email.

So which translations and which languages have fared best on Envato Tuts+ Design & Illustration over the last two years?

Most Active Language: Chinese (Traditional)

The top ten most visited Design & Illustration translations reveal a broad range of languages, including French, Russian, Indonesian, Spanish, Arabic, and Chinese (both simplified and traditional). This diversity isn’t found on any other topic at Envato Tuts+.

Most significantly, the number one slot is filled by 10個阻擋你進步的繪圖迷思. This Chinese translation sky rocketed across social media, making it the most visited single post of any language (including English) across the whole network in 2015! Its success gave us reason to seriously consider how we’re approaching our Chinese audience–I’ll let you know what we’re doing about that in a moment.

For now, here are the top three visited translations for this topic:

Most Widely Translated Tutorial: Create a Pride Rainbow Gradient Overlay in Adobe Illustrator

Perfectly reflecting D&I’s diversity, this tutorial by Sharon drew in 9 translations.

The most visited of these translations is (wait for it) the Japanese Adobeイラストレーターでレインボープライドカラーのグラデーションオーバーレイを作る. Love it!

Most Productive Translator: Maja Petek

Croatian is one of our less prominent languages, but thanks exclusively to Maja’s dedication (and love of Design & Illustration) we now have 37 Croatian translations which bring in growing numbers of visitors every week.

Here are the top three most productive translators for this topic:

Where Next?

We’ve built a great foundation for a truly global educational platform. Thanks to this solid start we’re reaching more people than ever, helping them learn and understand creative subjects.

We’d like to continue this growth, especially in less prominent languages. If you can help, please volunteer by clicking the Translate this post button in the sidebar of a tutorial which interests you! Read more about what this entails by going to Translate for Envato Tuts+.

Help us spread the word by sharing translations on social media, and sign up to our newsletter to stay up to date.

If you’d specifically like to hear about our progress in China, talk to Kendra; our feet on the ground in Beijing. Kendra is working to build our community in China, talking with translators and instructors, and managing Chinese social media. Get in touch via Twitter @kendraschaefer, or through WeChat at kendrakai

Check out How do you say Envato in Chinese? to get a taste of what Kendra’s doing.

नबिर्सनुहोस्! (“Don’t Forget”, in Nepali)

Don’t forget: the translation project belongs to you! Let us know if you have any ideas, criticism, or suggestions to improve what we’re doing!

Coffee Break Course: Using Curves in Adobe Photoshop

Curves are one of the best utilities in Photoshop for making lighting adjustments to an image. This feature may seem complex at first, but once you understand its power, it will become your ‘go to’ feature! 

In our ten-minute Coffee Break Course, Using Curves in Adobe Photoshop, Envato Tuts+ instructor Kirk Nelson will teach you how to understand the histogram, make targeted adjustments to increase the contrast of an image, and even how to remove a color cast from a photo.

Watch the 30-second introduction video to find out more.

//fast.wistia.net/embed/iframe/yi3c582amd

You can take our new Coffee Break Course straight away with a free 10-day trial of our monthly subscription. If you decide to continue, it costs just $15 a month, and you’ll get access to hundreds of courses, with new ones added every week.

If you want more help with adjusting your images, you can find thousands of useful Photoshop actions on Envato Market, such as the Digital photographer action pack, which gives you 18 useful actions for your photos, from smoothing skin to adding vintage or cross-processing effects.

How to Use Image Trace to Create a Surreal Portrait in Adobe Illustrator

Final product image
What You’ll Be Creating

I have no shame… I love a good vector illustration which uses simple silhouettes. They’re great for beginners and are simple, quick exercises to ease you into Adobe Illustrator. 

In this tutorial, I’m going to show you how to use Illustrator’s Image Trace (in legacy versions it’s known as Live Trace) to create a quick and surreal portrait scene as well as a fun way to create clouds. 

What You Will Need

In order to complete this tutorial, you’ll require the following stock images from Envato Market:

I’ve specifically picked a selection of stock images with the background removed. This will make it easier for me to use Image Trace. If you’re using different images and want the background removed, there are services on Envato Studio which can help you with this. Otherwise, let’s jump straight into the tutorial.

1. Use Image Trace on the Stock Images

Step 1

Before I put together our composition, let’s get straight into using Image Trace on our stock images.

Create a New Document and use File > Place to insert your first stock image into your document. Use the Free Transform Tool (E) to reduce the size of your stock image. I’m then going to hide the artboard boundary by going to View > Hide Artboards.

I often hide my artboards when I’m creating fun little illustrations so I don’t feel I’m limited to the boundary of the artboard. 

Place your stock image

Step 2

Duplicate the image by Copy and Pasting in Front (Control-F). This is so we can apply two different Image Trace settings to our image.

Select the top stock image and you’ll notice a button along the top of Illustrator saying Image Trace. When you click on this, default settings are applied to the photo.

To the left-hand side of the button, there is an Image Trace panel button. Click on this and you’ll open the settings, where you can modify to change what is traced and what isn’t.

Each one of these images I’ll be tracing in Black and White with Ignore White ticked. However I’ll be playing with different Threshold and Advanced settings, and I’ll tell you why. If you want to know about each specific setting with Image Trace, consider checking out our tutorial on How to Use Image Trace.

For this trace, I want to pick up on as much detail as possible around the edges of my shape, so I’ve put the maximum values on Paths, Corners and Noise. However, I only want to trace some of the face which is in shadow, so the Threshold is just past halfway. 

When I’m finished with each Image Trace, I click on the Expand button to release the trace to editable paths. Select each group of shapes and create a Compound Path (Control-8).

Trace the face in shadow

Step 3

For the bottom stock image, I want the overall silhouette. I’ve opted for one less than the full Threshold amount of 255. This is because if I use 255 I’ll get an entirely black image. With one less than the maximum, it doesn’t trace the white background.

I’ve modified the Advanced settings to create smooth curves around the portrait. This means reducing the Corners, Paths and Noise values, which creates rougher outlines on the overall shape.

Create the sihouette

Step 4

Next I’m going to Image Trace the trees. As I want to show the detailing in the leaves and branches, I’m going to reduce the Noise to a minimum. Noise will only add texture to the edges and not create the look we want.

Image trace the trees

Step 5

Select the Image Trace of the trees and as with previous traces, click the Expand button. This time, while the group is selected, go to Object > Ungroup.

With the Direct Selection Tool (A), draw a shape around a tree and create a Compound Path (Control-8). Do that to each of the trees so you have eight shapes in total when complete.

Compound path each tree

Step 6

The final image to trace is the castle. This time I’ve reduced the Corners and Noise to create sharper points for the towers and smoother curves all over.

I adjusted the Threshold so I can see the smaller details in the trellis. 

Trace the castle

2. Create a Tapered Art Brush

There will be some additional details added to the portrait which Image Trace hasn’t picked up on.

Draw a black filled circle using the Ellipse Tool (L). Using the Free Transform Tool (E), squash the circle. Then with the Direct Selection Tool (A), select each of the side points and use the Convert point to corner option in the Control panel. 

Once done, I select the shape and in the Brushes panel, select Add New Brush, select Art Brush and then keep the options as default apart from Colorization Method: Tints. Click on OK once done.

Create an Art Brush

3. Bring Together Your Composition

Step 1

Time to begin arranging the traced images. First I’m going to use a basic colour scheme of dark and light green for the face.

Adding colours

Step 2

I wanted to add a castle for a crown or tiara in the composition. It may sound strange but I thought about building a scene around her hair with trees and foliage and the castle idea seems right… even though it looks bizarre!

You may need to resize images while you’re placing them. If that’s the case, use the Free Transform Tool (E) and hold down Shift-Alt to ensure an even resize.

Add the castle crown

Step 3

I’m going to use duplicates of the trees and position them around the portrait. The majority of them will be a dark green fill, with the exception of the one on the shoulder.

Adding the trees

The trees help add texture around the edges of the hair and help the castle blend into the head.

The trees and castle

4. Refine the Face

Using the tapered brush and the Paintbrush Tool (B) to refine the details for the eyes, eyebrows and lips. 

Add details to the face

It doesn’t have to be precise, just enough detailing to create more definition for the face.

Add details to the face

5. Create the Sky

Step 1

I first create a Rectangle (M) behind the composition and fill it with a gradient going from light to medium blue, both desaturated tones. 

Then with the Ellipse Tool (L) I create a circle with the same fill, this time set to Blending Mode Screen. This helps create a sun. I’ve lined the sun up with her eyes as it appears it’s in a position where the light is coming from.

Add the sun

Step 2

I’m going to show you how to create some quick and easy clouds. It all starts with the Blob Brush Tool (Shift-B).

Double-click on the Blob Brush Tool to get the options. Change the settings so the Size is influenced by Pressure—this will give it a variable size when pressure is applied with a graphics tablet.

Access the Blob Brush Tool Options

Step 3

With the gradient as a fill and set to Blending Mode Screen, Opacity 50%, just doodle some looped lines where you’d like the clouds using the Blob Brush Tool.

Add loops for the clouds

Step 4

With the paths still selected, go to Effects > Blur > Gaussian Blur. I’ve used a value of around 45 pixels to blur it enough that it softens the edges but is still visible on top of the background.

Blur the paths

Step 5

Add strokes on top of the portrait to create clouds overlapping in the foreground.

Add clouds to the foreground

6. The Finishing Details

Step 1

I think we need a bit more detailing in the background. What I’m going to do is add some further duplicates of trees in a layer behind the current ones and give them a lighter fill colour. This will give the impression of the trees being further away in the distance. 

Adding further trees

Step 2

Using the Blob Brush Tool (Shift-B) and the different shades of green, create little curved “V” shapes to give the impression of birds flying in the distance.

Add birds to the background

Step 3

Group together all of the shapes for the illustration. Then, using a duplicate of the sky rectangle, create a Clipping Mask (Control-7).

Add all of the shapes to a Clipping Mask

Step 4

Time to change the colours around. I select all of the shapes apart from the ones for the background and the sun. Then along the top of the Control panel, select Recolor Artwork, and then the Edit section.

I’m going to change the colours of the portrait and trees to a reddish/brown hue to complement the blue, desaturated sky… a warm colour against a cool colour. 

Using Recolor Artwork

Awesome Work, You’re Now Done!

A lot of people may get down on the use of Image Trace, but I think when it’s used for creative compositions and to add texture to an illustration, it can add that extra level of panache.

Try this one out, and show me in the comments what you’ve come up with. 

Final result

How to Create a Bird’s-Eye View of Retro Cars in Adobe Illustrator

Final product image
What You’ll Be Creating

Everyone feels a certain passion for retro

style! Those extraordinary clothes, those fancy hairdos, the music and, of

course, the cars! In this tutorial we’ll combine our love for the 50s,

cinematography and games, creating a crazy mix. We’ll make an aerial view of a stylized Greased Lightning retro car, using basic

shapes, various types of gradients and blending modes, working with the

Pathfinder panel and other functions of Adobe Illustrator.

Grease is the word. It is a movie that represents the pure essence of the 1950s—a story of love, joy, beautiful things

and marvelous cars. Those retro cabriolets with smooth rounded shapes and

folding roofs. They definitely remain stylish and unforgettable.

Inspired by this

movie, we’ll be making a top view of a retro car with lightning-shaped patterns. You can

actually use these techniques to create any kind of a car—be sure to check the

cars top view section of Envato Market to make it easier to imagine the vehicles from such an aerial

angle of view. Browsing through retro cars at Envato Market may also be quite

useful in order to get a nice detailed reference of a vehicle.

Ready to start drawing? Let’s begin!

1. Create the Basic Outlines

Step 1

We’ll start by making the main parts of

our car. Take the Ellipse Tool (L)

and let’s shape the top view of the chassis. Make a 130 x 300 px ellipse, switch to the Direct

Selection Tool (A) and drag both side anchor points down, making the bottom

part flat and wide.

start forming chassis from ellipse

Step 2

Continue by making a smaller 55 x 155

px ellipse and placing it at the left side of the chassis. This will be the

base for the headlights. Drag the side anchor points up, making the bottom part

of the shape more pointed.

add a smaller ellipse for the headlights

Step 3

Now let’s shape the bottom part, which is

for the back of the car. Make a 130 x 125

px rectangle with the Rectangle Tool

(M). Select both bottom anchor points with the Direct Selection Tool (A) and use the Live Corners feature to make the bottom corners rounded, by pulling

the Live Corners circle markers up.

If you’re using earlier versions of Adobe

Illustrator, feel free to apply Effect

> Stylize > Round Corners. However, it affects all the

corners of the shape. You can then use the Eraser

Tool (Shift-E) and hold down Alt

to delete the upper part of the shape, making the upper corners sharp again.

form the back of the car with rectangle

Step 4

Now add a narrow shape with the Rounded Rectangle Tool, forming the

top-view of the wing. And let’s add the same elements to the right half of the chassis.

Select both the oval and the wing and double-click the Reflect Tool (O) to open the options

window. Select the Vertical Axis and

hit the Copy button. Place the

copies on the opposite side of the car, making them fit the chassis.

use the reflect tool

Step 5

Now let’s make a windscreen for our car.

Make a small rectangle of about 110 x 18

px size, placing it inside the chassis. Go to Effect > Warp > Arc Upper and set the Horizontal Bend value to 20%,

making the shape arched at the top. Object

> Expand Appearance to apply the effect.

Then go to Object > Path > Offset Path and set the Offset value to -5 px,

creating a smaller shape inside. Click OK.

form a windscreen from rectangle with arc upper effect

Step 6

Finally, let’s add the interior parts of

the car. Use the Rectangle Tool (M) to make two small

rectangles, fitting the inner space of the car. Those will be for the seats. Make the

outer corners of the shapes rounded, using the Live Corners feature.

Finally, form a simple steering wheel, made

of three ellipses, one inside the other.

Great! Now all the main parts are ready and

we can move on to coloring!

make the seats and the steering wheel inside the car

2. Apply Colors and Add Details

Step 1

First of all, let’s select the largest element, the base of our car, and apply a bright radial gradient from vivid red

in the center to darker red at the edges. Use the Gradient Tool (G) to shrink the shape of the gradient, making it

more oval, this way adding subtle shadows to the edges of our car.

apply a red radial gradient to the base of the car

Step 2

Select the headlights ellipses and use the Eyedropper Tool (I) to pick the red

gradient color from the car base. Switch the Type of the gradient to Linear

and place the gradients vertically from lighter red on top to darker red at the bottom.

Add a small rounded rectangle beneath the

chassis (press Shift-Control-[ to Send it to Back) and fill it with similar red colors, filling the gaps on

the front side of the car.

apply colors to the headlights

Step 3

Apply the same red linear gradient to the

wings of the car as well, positioning it at 90 degrees angle in the Gradient panel.

Apply the same red linear gradient to the wings

Step 4

As for the bottom element (the back

of the car), let’s apply an oval-shaped radial gradient as well and Send this part to Back (Shift-Control-[), placing it beneath the base of the car.

apply a red radial gradient to the back of the car

Step 5

Now let’s apply the colors to the

windscreen. Make the outer shape light red, slightly lighter than the base of

the car, making it pop out. As for the inner shape, apply a light-blue vertical

linear gradient, depicting the glass surface.

apply colors to the windscreen

Step 6

Let’s add some glossy highlights to the

windscreen. Use the Rectangle Tool (M)

to make two narrow vertical stripes of any color (just to make them visible

above the white background). Set the Blending

Mode to Screen in the Transparency panel.

Hold down Shift and rotate the shapes 45 degrees, placing the stripes above

the windscreen. Now select the stripes together with the blue glass shape and

take the Shape Builder Tool (Shift-M).

Hold Alt and click the unneeded

pieces outside the glass to delete them.

Finally, set the Fill color to white in the Color

panel and here you have it!

add highlights to the windscreen

Step 7

Now we’ll make the striped pattern for the

seats in order to make them look more realistic and textured.

Make a 13 x 60

px rectangle and fill it with horizontal linear gradient from white to

light grey.

Hold down Alt-Shift and drag the shape to the right, making a copy. Press Control-D several times to make seven

more copies. Group (Control-G) the

shapes.

make the seats texture from rectangles

Step 8

Now let’s head back to our car, select the

seats, Copy (Control-C) them and Paste in Front (Control-F). Place our

texture beneath the seats (press Control-[

a few times to move the object several positions down). Hold Alt-Shift and drag the texture up,

creating a copy for the second half of the seats.

Now select the bottom piece of texture and the

seat-shape above it, click the right mouse button and Make Clipping Mask.

As you can see, now the texture is hidden

inside the seat-shape, creating a nice puffy texture.

place texture inside of a clipping mask

Repeat the same for the second half of the

seat, placing the texture inside the Clipping

Mask.

place texture inside of a clipping mask 2

Step 9

Now let’s create some additional shadow in

order to make the seats more three-dimensional. We still have two more outlines of

our seats (the copies that we created a few steps before).

Select the upper half and fill it with the

same white-grey linear gradient as we had for the seat’s texture (you can use

the Eyedropper Tool (I) to pick the

color), but this time place the gradient vertically. Switch the Blending Mode to Multiply, making a darker semi-transparent shape.

And repeat the same for the second half of

the seats.

apply shadows to the seats in Multiply mode

Step 10

The two halves of the seats look equal now,

but let’s add a bit more variety here. To do so, select the elements

of the lower half and shrink them, making the seat narrower. As for the second

half, let’s do the opposite: extend the shapes, making the seat much wider,

creating contrast between the shapes.

adjust the shape of the seats

Step 11

Now let’s move on to the steering wheel. Select

the two circles (which are for the wheel), right click and Make Compound Path (or simply press Control-8). Fill the created donut

shape with a squashed radial gradient, consisting of three colors: dark grey,

white, light grey. Fill the center of the steering wheel with a simple radial

gradient from light grey to darker grey.

apply colors to the steering wheel

Step 12

Now let’s modify the back of our car, adding a folding roof. Copy the bottom shape and Bring it to Front (Control-C > Control-F

> Shift-Control-]). Fill the shape with vertical linear gradient from

white to light grey.

Make the shape much smaller and place it as

shown in the screenshot below: the light-grey shape should fit nicely inside

the back of the chassis, so that the dark-red bottom of the chassis

creates a thin outline around the shape, making both shapes match

perfectly.

Finally, duplicate (Control-C > Control-F) the light-grey shape that we’ve

created, make the copy smaller and reverse the colors of the gradient, creating

the inner part of the folding textile roof of the cabriolet.

add the folding roof

Step 13

Now let’s form the inner part of the car,

making it much darker. Select the base of the car and go to Object > Path > Offset Path. Set

the Offset value to -5 px, creating a smaller shape inside

the base.

Now select the new shape together with the

outer part of the windscreen (the red one), take the Shape Builder Tool (Shift-M), hold down Alt and click on the top piece to delete it. This way we

have formed the interior of the car.

make the inner part of the car

Step 14

We already have the base for the

headlights, but we haven’t yet made the headlights themselves. Let’s shape them

out!

Make a 35 x 8

px oval shape using the Ellipse Tool

(L). Fill the shape with vertical linear gradient from light grey to white.

Copy it and Paste in Back (Control-C > Control-B).

Select the bottom anchor point of the back

shape with the Direct Selection Tool (A)

and drag it down, holding Shift.

Finally, fill the extruded shape with

bright-red radial gradient by picking the color from the chassis, using the Eyedropper Tool (I).

Voila! Now we can attach the headlights to

the car.

shape the headlights from the ellipse

Place the headlights on the top part of the

car. They should look like this.

Place the headlights at the top part of the car

Step 15

Now let’s add a shiny chrome element to

the front part of the car. Take the Rounded

Rectangle Tool and form a narrow vertical stripe at the top of the car.

Apply a linear gradient with the following

colors: light grey, white, dark grey, light grey. Place it horizontally, as

shown below, giving the shape a true-to-life metal look.

make a chrome stripe with linear gradient

3. Add the Lightning Pattern to the Car

Step 1

Now it’s time to make our retro car look

unique and associate it with the Grease movie! Get ready to grab the Pencil Tool (N) and draw those

flowing lines, creating a fancy lightning pattern for our car. Try to keep it simple.

You

can double-click the Pencil Tool (N)

to play with its Fidelity settings,

making it smooth. I’m drawing these shapes with just a mouse and, as you can

see, Adobe Illustrator copes perfectly well with making the lines smooth.

draw lightning with the pencil tool

Step 2

Make three more different shapes of

lightning.

Make three more different shapes of lightning

Step 3

Start applying the lightning shapes to the

left half of the car. Rotate them and move them around, making them fit the

elements of the car perfectly. Remember to use the Shape Builder Tool (Shift-M) to delete the unwanted pieces of lightning outside the car.

As soon as you’re happy with the

position of the elements, select them and use the Reflect Tool (O) to flip the shapes over the Vertical axis, making

mirrored copies and attaching them to the opposite side of the car.

add patterns to the car

Step 4

Now let’s add a bit more dimension here.

Select the two mirrored lightning shapes on the front part of the car and Make a Compound Path (Control-8). Apply

a bright radial gradient from white to greyish-pink, making the pattern silver

and glowing. Apply the same color to all the other lightning shapes.

apply silver gradients to the patterns

Step 5

Now let’s add some highlights to the car, making

its surface look glossy and polished. Select the biggest element of the chassis and apply Object > Path > Offset Path with -7px Offset value. Fill the new shape with vertical linear gradient

from pink to black and set the Blending

Mode to Screen. You will see the

black part becomes transparent, creating a nice glossy effect.

Do the same for the oval shapes beneath the

headlights.

add highlights to the car in Screen Blending mode

Step 6

Add a similar highlight to the back of the

car. Be sure to place the lightning patterns beneath the highlights.

add highlights to the car in Screen Blending mode 2

Step 7

Now let’s add another important element of

any car: the exhaust or the tailpipe. We’ll actually make two of them to make

our car look cool.

Make an 8 x 35

px rectangle for the tailpipe and fill it with the same chrome linear

gradient as the decorative stripe at the nose of the car (use the Eyedropper Tool (I) to pick the

gradient).

Hold Alt-Shift

and drag the shape to the right, making a copy. Select both tailpipes and Send them to Back (Shift-Control-[).

make a chrome tailpipe from rectangle

Step 8

Now we’ll depict flames being thrown from

the exhaust.

Start by making a 7 x 30 px ellipse of black color and attach it to the tip of the

tailpipe. Create a smaller oval on top, filling it with bright-orange color.

make flames from the exhaust using Blend

Step 9

Select both ovals and go to Object > Blend > Make. This way

we make a smooth transition between the colors, creating a flame effect.

We can still edit the elements inside the Blend group in the Layers panel. For example, you can add a smaller yellow ellipse on

top and drag it inside the Blend

group to make the flame even brighter.

Drag the side and bottom anchor points of

the shapes down, using the Direct

Selection Tool (A) to extend the flame.

make flames from the exhaust using Blend 2

Step 10

To get the semi-transparent flame effect, firstly we need to create any kind of background beneath our car. For this purpose,

create a grey rectangle of 800 x 600 px

size and place it beneath the car (Shift-Command-[).

Select the flames and switch the Blending Mode to Screen.

 switch the Blending Mode of flames to Screen

4. Form the Background and Add Finishing

Touches

Step 1

Now that we’ve already started making the

background, let’s proceed with that, making our composition look complete and

balanced.

We already have an 800 x 600 px rectangle beneath our car. Apply a radial gradient from

grey to dark grey, depicting the asphalt surface.

make an asphalt background

Step 2

Now let’s return to our car and tweak

it a bit, adding a gentle flat-style shadow. Select all parts of the car, duplicate them (Control-С > Control-F) and Unite

in Pathfinder, creating a single

silhouette.

Use the Line Segment Tool (\) to draw a red vertical line across the car.

create a silhouette with Unite function of Pathfinder

Step 3

Let’s align the objects. Select both the

red line and the car silhouette, hold Alt

and click the silhouette to make it a Key

Object. You will see a thick selection stroke, indicating that all the

selected elements will be aligned to this object. Head to the Align panel and click Horizontal Align Center.

While both objects are still selected, go

to the Pathfinder panel and click Divide in order to split the silhouette

into two equal halves. Delete the right half and apply Multiply Blending Mode to the left half, making it semi-transparent

and thus darkening the left side of the car.

make a shadow in Multiply mode

Step 4

Let’s make the ground beneath the car

textured for more realism. Duplicate

(Control-C > Control-F) the

background rectangle and head to the Swatches

panel. From here, click the Swatch

Libraries menu icon and find Patterns

> Basic Graphics > Basic Graphics_Textures. Apply the USGS 22 Gravel Beach texture to our

rectangle.

apply a swatch pattern to the ground

Step 5

Now let’s add a shadow cast by our car.

Use the Ellipse Tool (L) to make an

oval of a slightly larger size than the car. Place it beneath the vehicle and

apply a squashed radial gradient from greyish-pink in the center to white at

the edges. Switch it to Multiply Blending

Mode, forming a blurred shadow on the ground.

add a shadow ellipse beneath the car

And here is what we have!

top view retro car

Greased Lightning, Go, Greased Lightning!

Great job guys! We’ve successfully crossed

the finishing line of our race and created an aerial view of a retro car,

inspired by the Grease movie. These techniques can be used to create any other

top-view vehicle or symmetrical object, which is perfect for simple racing

games and easy to animate.

Feel free to go further and adjust our

result image even more. For example, here I’ve duplicated the car that we created and played around with the colors, creating alternative palettes, which

can also be found in the original Grease movie. You can get these top-view retro cars in AI, EPS and PNG in order to see how they were made or to edit them your liking.

Keep creating fancy things and share your

results! Good luck!

grease movie aerial view of retro cars with lightning pattern

How to Turn a Landscape Photograph Into an Isometric Icon in Adobe Photoshop

Final product image
What You’ll Be Creating

In this tutorial we are going to create a 3D isometric map made from combinations of a few landscape photos. No 3D software is used in this project—we are going to use only Adobe Photoshop. The end result can be used as an icon or as part of an infographic.

Tutorial Assets

To complete the tutorial you will need the following assets:

1. Prepare the Canvas

Step 1

First of all, we need to add an isometric grid to our canvas. You can find instructions for this in the isometric tutorial we published earlier.

Isometric grid

Step 2

Based on the grid, draw a rectangle vector shape on the isometric surface. You can use any color, because this is just a guide for our next photo manipulation process.

Draw basic map shape in isometric perspective

Step 3

Duplicate the vector shape by clicking Control-J, and move it upward.

Draw basic map shape in isometric perspective

Step 4

From now on, you can turn off the grid, because we won’t be needing it anymore.

Turning off the isometric grid

2. Build the Soil

Step 1

Draw the left side of the 3D map using the Pen Tool. Double-click its layer shape and then add a Gradient Overlay.

Drawing left side of the shape

Layer style for Gradient Overlay

Left side with gradient overlay

Step 2

Set its Fill to 0%.

Set Fill to 0

Step 3

Repeat the same step on the other side.

Right side
Right side

Step 4

Draw a new shape using the Pen Tool, covering the whole map. Add a Gradient Overlay to the shape and then set its Fill to 0%.

Another Gradient Overlay
Layer style for Gradient Overlay

Step 5

Grab the soil texture and place it on top of the map.

Adding soil texture

Step 6

Control-click the left side of the map to make a new selection based on its shape. Click the Add layer mask icon in the lower part of the Layers panel to cut off the rock texture outside the shape.

Adding layer mask

Step 7

Repeat the same process on the other side of the map.

Add soil to the edge

3. Build the Hill

Step 1

Grab the hill landscape and overlay it on the map with low Opacity. Position it until you get a nice perspective.

Adding hill landscape

Step 2

Add a layer mask to the landscape photo and then paint with black to hide unwanted areas. In this case, I want to retain the street, the hill next to it, and the tree in the corner. Try to get a natural shape using your brush stroke. We don’t want this to be a flat, box-like shape.

Masking the landscape

Step 3

Let’s go back to the soil. We need to make it darker and more believable. Start by painting shadow on its corner. Add a new layer and simply paint black using the Brush Tool with low Opacity.

Painting shadow on maps corner
Painting shadow on maps corner

Step 4

The result is already much better. Keep on adding black shadow to the soil to make it a lot darker.

Adding black shadow to the soil
Adding black shadow to the soil

Step 5

Next, grab another dirt or soil texture. Paste it on top of the previous soil and set its mode to Overlay. Take your time, add a layer mask, and carefully insert any dirt, rocks, and roots into the soil to make it as realistic as possible.

Add another soil texture

Step 6

Let’s add another landscape image into the map. Place the landscape behind the current hill landscape. Add a layer mask to the landscape image and then paint black to remove most of its content while leaving part of its valley.

Add another landscape
Unneeded areas are now hidden

Step 7

Add a new layer and then paint shadow on areas of the new landscape as indicated below.

Add shadow

4. Add the Sea

Step 1

Now, add the sea image behind the map. Position it where you like it most.

Adding sea image

Step 2

Control-click the base of the map to create a new selection based on its shape. Click the Add layer mask icon to hide unselected pixels.

Adding layer mask to the sea
Adding layer mask to the sea

Step 3

Manually fix broken elements in the landscape, if there are any, by painting them with white using a soft brush. In this case, do this with the rock.

Fixing broken rock

Step 4

To add more waves to the sea, we can simply duplicate the sea image and move it to a different position. Apply the same layer mask as the first one and then hide some of the areas until it blends with the first image.

Adding another part of the sea
Adding another layer mask

Step 5

Select the ocean by Control-clicking on its layer shape. Add a Photo Filter Adjustment Layer with Cooling Filter to increase the contrast of its blue sea surface.

Increase sea contrast
Adding Photo Filter

5. Add Details

Step 1

Let’s add more contrast into the scene manually. Start by selecting the main hill. Make a new layer on top of it and then click Edit > Stroke to add a stroke line.

Add contrast to the landscape edges
Adding black stroke
Adding black stroke

Step 2

Apply a Gaussian Blur filter to soften the line, and then reduce its Opacity setting in the Layers panel. If necessary, you can also delete a segment of the blurred line using the Eraser Tool.

Soften the stroke line

Step 3

Repeat this process, and add another shadow by painting with black on a new layer.

Add another shadow

Step 4

Let’s make the road more realistic by adding an unfinished street at the end. Activate the hill landscape layer and then paint with white to reveal a chunk of street hanging outside the map. Right underneath the street, paint black to add thickness to the street and then paint a big soft shadow on the soil.

Add broken street

Step 5

To make it appear more realistic, add a new layer and scribble some short black lines using the Pencil Tool with 1 px brush size on the street. Duplicate the layer, and invert its color to white by pressing Control-I. Move the white scribbles down 1 pixel. Reduce their Opacity setting in the Layers panel.

Make the street more realistic
Adding scribbles to the street

The result after adding scribbles to the street

Step 6

Add another shadow and highlight onto the scene by painting with black and white using a soft big brush with low Opacity.

Adding shadow and highlight

Step 7

Here’s the fun part. The map will not be complete until we have a small car on the empty street. You might notice that in our main landscape there’s a parked car. Select and then copy it to a new layer (Control-J). Place it on the street, add a layer mask, and then hide unneeded pixels by painting them with black.

Adding car
Adding car
Car added

6. Add the Background

Step 1

We will use a simple background for this map. Activate the Gradient Tool with a standard white to black gradient. Drag from top to bottom until we have this background.

Add white to black gradient for background

Step 2

Let’s add a shadow underneath the map. Control-click the base to make a new selection. Fill it with black, deselect (Control-D), and then apply a Gaussian Blur filter (Filter > Blur > Gaussian Blur) to soften it. Repeat this process a few times with different Radius settings and layer Opacity until we have a realistic floor.

Adding map shadow
Adding map shadow

Step 3

We may need to draw shadow manually by painting black on the canvas using a big soft Brush Tool with low Opacity.

Adding map shadow

Step 4

This grey background is just too dull. Let’s make it more interesting by changing its color to blue. Add a Photo Filter Adjustment Layer above the background and select Cooling Filter.

Adding photo filter adjustment

Conclusion

Now, we have reached the final result. As you can see, there are no complicated tricks in this tutorial. We only used a simple layer mask and a bit of manual drawing.

I believe that it is important to select the best landscape photos—by doing this, we save ourselves from time-consuming photo editing and can focus on working with the map shape. I hope you understand this tutorial and can follow it easily. If you do follow along, let me know your result. I’d love to see it. Thanks.

Final result

Top 10 PSD to HTML Service Provider 2016

With the help of this conversion, developers/designers can exercise creative control over the designing of websites. Not only visual enhancement, various web optimized features like SEO, semantic coding, cross browser compatibility, responsiveness, W3C validation, pixel perfection, etc are added during the process. A PSD file is a simple set of images and designs that needs Read More …

The post Top 10 PSD to HTML Service Provider 2016 appeared first on Webgranth.