Eye-Popping Sports Car Illustrations

Posted by on Mar 16, 2012 in Blog | 10 comments

In this article we will feature a collection of eye-popping sports car illustrations. These illustrations include everything from concept cars to recreations of classics. Let’s take a look!

Velocity

We start off with a stunning painting of a racecar. The overall piece is painted realistically and the extra colors added from the speed of the car work well with the overall tone.

Neglected Beatle

This painting features an old and not so glamorous car but the artist really does a wonderful job with the overall environment and color selection.

NSX

This digital painting features the artist’s interpretation of the Honda NSX

Notio Velocitas-R

The artist who created this concept feature did a great job making it look as realistic as possible and also giving it that shiny glare off its hot fiery paint job. .

Mustang

The classic Ford Mustang gets featured here and once again the artist does a good job with creating a realistic representation of the car.

Garage

Not only is the car painted to perfection here but the whole environment and backdrop to the illustration looks extremely realistic.

Challenger

The Dodge Challenger is featured here with an awesome paint job and classic racing stripes for this powerful car.

Mitsubishi Xtase

This Mitsubishi race car has a great design and the artist did a good job of adding a sense of realism to the illustration.

BMW Concept

Our last featured car is another concept. This one looks sleek and very fast. The overall illustration looks great with the rainy environment.



View full post on Psdtuts+

Vancouver graphic design, Vancouver web design, Vancouver seo, Vancouver internet marketing, Vancouver social media, web design Vancouver

Incoming search terms:

10 Comments

  1. Emil Agarunov | March 16, 2012

    In this article we will feature a collection of eye-popping sports car illustrations. These illustrations include everything from concept cars to recreations of classics. Let’s take a look!

    Velocity

    We start off with a stunning painting of a racecar. The overall piece is painted realistically and the extra colors added from the speed of the car work well with the overall tone.

    Neglected Beatle

    This painting features an old and not so glamorous car but the artist really does a wonderful job with the overall environment and color selection.

NSX

This digital painting features the artist’s interpretation of the Honda NSX

Notio Velocitas-R

The artist who created this concept feature did a great job making it look as realistic as possible and also giving it that shiny glare off its hot fiery paint job. .

Mustang

The classic Ford Mustang gets featured here and once again the artist does a good job with creating a realistic representation of the car.

Garage

Not only is the car painted to perfection here but the whole environment and backdrop to the illustration looks extremely realistic.

Challenger

The Dodge Challenger is featured here with an awesome paint job and classic racing stripes for this powerful car.

Mitsubishi Xtase

This Mitsubishi race car has a great design and the artist did a good job of adding a sense of realism to the illustration.

BMW Concept

Our last featured car is another concept. This one looks sleek and very fast. The overall illustration looks great with the rainy environment.


  • Jan Stverak | March 16, 2012

    In this quick tutorial we will show you how to create a royal gold text effect using layer styles in Photoshop. Let’s get started!

    Tutorial Assets

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

    Step 1

    First create a new .PSD document, 600 x 400 pixels in RGB mode, 72 DPI with any background color. Now prepare your assets. Install the Xenippa font onto your computer and open both .PAT files. If you do not know how to install a PAT file onto your computer, take a look at this tutorial explaining the preset manager.

    Step 2

    Go to Menu > Layer > Layer Style > Blending Options and use the settings below. You can also access Blending Options by double clicking on the layer in your layers menu. The other way is to right click on the layer in your layers menu and choose Blending Options. When you are done with all the settings below, don’t forget to hit "OK" in the Blending Options window.

    Step 3

    Now we can start applying our text effect. First choose the type tool and change font to Xenippa, size 250 pt and anti-aliasing, Sharp. Now type your text somewhere in the center of the image. You can write any word, but in this tutorial I’ll use "Lord."

    Step 4

    Finally, we are ready to start with our text style. Go to Menu > Layer > Layer Style > Blending Options and use the settings below on your text. You can also use the quicker methods to access Blending Options from "Step 2" of this tutorial. When you are done with all the settings below, don’t forget to hit "OK" in the Blending Options window.

    Step 4

    We are almost there. Now we need to duplicate our text layer. Select the text layer in layer menu and go to Menu > Layer > Duplicate layer and name it as you wish. Now go to Menu > Layer > Layer Style > Clear Layer Style as we will make different style for this layer. Finally, go to Menu > Layer > Layer Style > Blending Options and use the settings below on our text. Again, you can use the quicker methods to access Blending Options from "Step 2" of this tutorial. When you are done with all the settings below, don’t forget to hit "OK" in the Blending Options window.

    Conclusion

    You have now completed this tutorial. Your text should now look similar to the image below.


  • Trisme | March 16, 2012

    Photoshop is a fantastic application for combining average photos to create something entirely new. In this tutorial we will combine several stock photos to create a scenic landscape panorama. Let’s get started!

    Tutorial Assets

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

    Step 1

    The first step is to create a rough composition of the image. Take the stock images from the tutorial assets section of the tutorial and drop them onto your canvas. Use the Move and Free Transform tools to place the images into position and be sure to keep them on independent layers.

    Step 2

    Select the Girl Stock layer and hit Command/Ctrl + B to adjust the color balance. Use settings for "Midtones" tab and for "Highlights" use the settings as shown below.

    Step 3

    Now make a mask on the Girl Stock layer by clicking the mask icon in the layers palette. Erase all the unnecessary space around her using a black round brush. Now apply a brightness/contrast adjustment and use the settings shown below.

    Step 4

    Now apply a Hue/Saturation adjustment using (Command/Ctrl + U) and lower Saturation a bit (-21) – to lower some values of colors on this stock.

    Step 5

    Now hit the Command/Ctrl + L for “Levels” window and put sliders like these – it will do the job similar to “Brightness/Contrast” in step 3 but it also adds higher highlights on our stock so it creates illusion of light on girl.

    Step 6

    Then again, go to “Color balance” (Command/Ctrl + B) and select following settings but this time, on our layer “trees” behind girl. For “Midtones” select: 0, + 8, 0.

    Step 7

    Then go to “Cliff” layer and change the brightness and contrast in “Brightness/Contrast.” After that hit Command/Ctrl + B and change settings like you see here.

    Step 8

    Drop a fragment of big tree (“laying trees stock”) on your canvas, hit (Command/Ctrl + T) to "Free Transform" this fragment, resize and warp it a bit (right click on this image > "Warp" while being in "Free transform" mode) and change it’s brightness and contrast and saturation to -23.

    Also duplicate (Command/Ctrl + J) "Trees" layer behind our model and move it to left side, we will take care of it later. Name it "Left trees".(Red arrow below)

    Step 9

    Create mask on our "Left trees" layer (Here it’s "Layer 0 copy") and paint stroke with black brush on our mask, to make these layers fade into each other.

    Step 10

    Select and move this fragment of layer with cliff to fill some space on right side

    Step 11

    Go back to left side of image and paste "small trees" stock here, resize it (Command/Ctrl + T) and go for Color balance (Command/Ctrl + B) and select settings: and brightness + 73 in "Brightness/Contrast" window. Then do some erasing job around tree so finally it looks like this:

    Step 12

    Use "Crop Tool" and resize our document, then hit Command/Ctrl + T and resize cliff layer to hide empty space on the top of document. Simply stretch it upwards to make it higher.

    Step 13

    Erase some unnecessary parts on layer with trees.

    Step 14

    Paste our "ocean" stock on right side and use following settings for Brightness/Contrast to roughly blend it with our image. Hit Command/Ctrl + B and select values for "Midtones" and for "Highlights".

    Step 15

    Open up "Liquify filter" (Shift + Ctrl + X) on girl layer and warp her lips upwards, also move her ear upwards to make it look like an Elven ear.

    Step 16

    Add a mask on layer with cliff and basically erase it in half, then lighten up edges of it by drawing strokes of brown color ("3e1d0a") on new layer with “Linear Dodge (Add)” blending setting, so It will look like this:

    Step 17

    On layer with girl – select some branches and again hit Command/Ctrl + B (Color Balance) to change color of these. I used values for "Shadows", for "Midtones" and for "Highlights" Then hit Command/Ctrl + U (Hue/Saturation) and select these settings:

    Step 18

    Another thing here is shadow behind girl – Do it by painting "17120a" color strokes on new layer (“shadow girl”), and then set this layer to "hard light" blending

    Step 19

    Create new layer and set it’s blending to "Linear Dodge (Add)" and paint some strokes of dark-brown color like "3e1d0a". It will create glowing effect on trees and branches, also you can use "Dodge Tool" on setting "Highlight" to lighten up some areas where light should be visible, like trees edges, cliff edges and some areas on our girl-model stock. Check out image below.

    Step 20

    Create new layer and draw some strokes on ocean with soft brush, use light color like "d6e4c1" and then, lower the opacity at this layer (about 30%) to create fog effect, create another layer and do the same on trees, then create mask on this layer and erase parts like closer trees or leaves. You can blur this mask (Gaussian Blur) to give it smooth look.

    Step 21

    Because of blending problems on the top of cliff (overlapping layers and dark areas between the trees) duplicate (Command/Ctrl + J) fragment of trees layer and hit Command/Ctrl + T and flip it horizontally (right click > "Flip horizontal") then move this layer higher than "trees" layer (image 1) so it covers "broken" area (image 2) then start erasing some fragments so finally it turned out like in image 3.

    Step 22

    Create new layer (blending mode "Linear Dodge (Add)" )and draw some spots of "1b6f71" color, then lower the opacity to about 30%.

    Step 23

    Use "Clone tool" to cover the tree on left side (on duplicated trees layer) so it won’t look like 100% copy of right side.

    Step 24

    Also select (using "Lasso tool") and duplicate leaf from trees layer, flip it horizontally and move to right side. Erase some hard highlighted edges. It’s another step in making side left different from side right.

    Step 25

    Now copy some thin tree fragment from "laying trees stock" and put it like this, on layer "fake tree", then hit Command/Ctrl + B and set values like in image below.

    Step 26

    Some changes after Brightness/Contrast and Burn tool treatment (Midtones setting).

    Step 27

    Then erase some edges of this "fake tree" by making mask on its layer and painting some strokes with 80% hard round brush (black). After that lighten up right edge of this tree (since light is coming from right side) and then do some Hue/Saturation changes (Command/Ctrl + U) as below:

    Step 28

    Duplicate "fake tree" layer, scale it down a bit and rotate like below, then (still in Free Transform mode) right-click on this (well, it’s a branch now) branch and select "Warp" then go to menu on top of Photoshop UI and select "Arch" .

    Step 29

    Now simply push it to right-down side and bend it like in this image, if you can’t bend it as shown in the image, change the warping orientation by clicking icon on top of Photoshop UI (image below).

    Step 30

    Light up this branch by going to "Levels" window (Command/Ctrl + L).

    Step 31

    Duplicate this branch onto new layer and scale it down (Command/Ctrl + T), move it a bit from original position and lower opacity of its layer.

    Step 32

    Duplicate branch from girl stock and flip it horizontally. Put it on this tree, then erase some parts of this branch to make it look like it’s behind the tree.

    Step 33

    Then brighten up these branches a bit using “Brightness/Contrast” window, to make them fit background.

    Step 34

    Use "Lasso Tool" to select one of branches that was standing out a bit, move it to the left.

    Step 35

    Now smooth jeans material to make it look like normal pants. Do it by painting some strokes with "Smudge Tool" with 4% strength, using soft round brush while stroking. Also cover some parts with "Clone tool" (circled areas).

    Step 36

    Then open "butterflies stock" and copy some of them to our image, Use "Magic wand tool" to cut out blue areas (roughly), then erase some blue pixels with "Eraser tool". After that, select one of butterflies, rotate and place it (again, Command/Ctrl + T) near shoulder of our girl.

    Step 37

    Here is how it looks after rotating and placing butterflies. Also cut out each butterfly (select one and hit Command/Ctrl + X) then paste them on separate layers (more comfortable to edit later on) and set each layer to “Linear Dodge (Add)”. Then on layer with butterfly behind her shoulder hit Command/Ctrl + U and select these values to change color of butterfly to more yellow. Do the same for other butterflies or experiment with some values.

    Step 38

    Then create a new layer and set it to blending mode "Linear Dodge (Add)" and paint some brown ("3e1d0a ") strokes on neck (using soft brush), shoulder and some on butterflies wings, use "Eraser tool" to soften the edges like below.

    Step 39

    Change brush to hard round, make it smaller (5px) and make some dots with the same color ("3e1d0a") like before, also on new layer (with blending mode "Linear Dodge (Add)"). Do the same around other butterflies.

    Step 40

    Now copy "birds stock" paste some birds (delete blue areas with "Eraser tool" and "Magic wand tool") hit Command/Ctrl + T, scale them down and place them like below. Also make mask on this layer and with use of black soft big round brush, delete some birds around the center, then lower the opacity of this layer to about 60%.

    Step 41

    Select and duplicate two birds and scale them up. Put them like below to make it look like they are flying towards screen. Also create mask on this layer and erase some hard edges to make them fade into background.

    Step 42

    Then paint some strokes of "f1f3ce" color on new layer, on the right side of our image to cover this tree. Again, make mask on this layer and use low opacity big round soft brush (black) to erase this strokes a bit and create something like fog. You can also simply lower the opacity of this layer but I’m used to do masking-thing so I did that in psd file.

    Step 43

    Here is short process of copying tree from right side and pasting it to left side (on the top of cliff). After that, paste it on tree on the top, to make it look more natural by adding some leaves. Check out images for "Brightness/Contrast" and "Color balance" values.

    Step 44

    Create new layer with "Color" blending mode and paint some blue strokes to cover light-yellow areas. Sky on right side Is fading to blue so we have to make sky behind trees blue too. Then lower the opacity of this layer (image 2).

    Step 45

    Go back to girl layer and use "Sponge tool" to lower the value of highlighted areas, like on image 2. Use 50% flow setting on that one. Try to do the same on branches near her legs and on other parts of this stock where light is too orange.

    Step 46

    Now select "Brush tool" and hit "Q" – you will switch to quick masking mode – your brush will become red, paint some strokes on trees layer like in image 1. Then hit "Q" again and your strokes will convert to selection, hit Shift + Ctrl + I to invert selection. Now hit Command/Ctrl+B and choose values like on image 2 (-21, 0, +34 for "Highlights"). Faraway jungle will become bluer, like the sky behind it.

    Step 47

    Go to left trees layer and select branches like on image, then hit Command/Ctrl + J to duplicate them onto new layer (“Layer 17″), hit Commad/Ctrl + T and right-click, select "Flip horizontally" then rotate it a bit. It should look like this:

    Step 48

    After some erasing job it looks like this:

    Step 49

    Go back to left trees layer and use "Clone stamp tool" to cover branch on the left – like here.

    Step 50

    Some steps while using "Clone stamp tool".

    Step 51

    As final step, do add some slight blur treatment to butterflies and "fake tree" to fit them into whole composition, use 0.3 pixels Gaussian blur:

    Final Image


  • Marcelo Schultz | March 16, 2012

    In this Tuts+ Premium tutorial, author Marcelo Schultz will explain how to create "awesome" 3D-style typography using illustrative techniques in Photoshop. This tutorial does not utilize any 3D apps or tools and relies heavily on a good sketch, as well as your ability to apply proper light and shadow. This tutorial is available exclusively to Tuts+ Premium Members. If you are looking to take your typography skills to the next level then Log in or Join Now to get started!

    View the Tutorial

    Tuts+ Premium Members can login now for instant access to this tutorial. Membership to Tuts+ Premium gets you access to hundreds of exclusive premium tutorials, top selling ebooks, in-depth courses, member forums, and much more. To learn more about Tuts+ Premium, Take the Tour or Join Today.


  • Grant Friedman | March 16, 2012

    Asile is a photo retouching and 3D/CGI studio based in Paris, France founded by Photoshop Artist, Christophe Huet. Their CGI and creative photo retouching work is some of the best that you will ever see. In this article, we will feature some of our favorite pieces from their portfolio. Let’s take a look!


  • Alan Klim | March 16, 2012

    In this quick tip tutorial we will explain how to create realistic shoelaces from scratch in Photoshop. Let’s get started!

    Tutorial Assets

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

    Step 1

    Start by creating a new document in Photoshop; I used 1100x600px, 300dpi, RGB (8bit). You can use any proportions you like but keep in mind that’ll you have to tweak the layer style parameters later on.

    Step 2

    Draw some guides like the ones in the image below; I find them helpful, but it’s up to you. Create a new layer and using the Pen Tool (P) and create the blue shape (#34526d); it’s easy. Duplicate the layer (right click on the layer > Duplicate layer), select Edit > Transform > Flip Vertical and place it on the other edge of your canvas.

    Step 3

    Create a new layer and place it under your previously created blue shapes. Pick a color you like; I used #534741 and paint the whole surface. Next go to the Layer Style window (double click on the layer) and set the parameters you see above.

    Note: To set the pattern open the cloth pattern file as a new document. Select all, then go to edit > define pattern. It will now appear in your pattern list in the Layer Style Box.

    Step 4

    Duplicate the “blue shape” layers and using the Hue/Saturation panel (Image > Adjustments > Hue/Saturation or simply Ctrl/Command + U) set the lightness to -100 making them black. Next go Filter > Blur > Gaussian Blur and choose 5-8 px (whatever works good for you) and simply place them under your “parent” blue shapes so that it creates the feeling of a shadow. After that right click on the layer created in Step 3 and choose Copy Layer Style and simply apply the style on your original “blue shape” layers (right click on each layer > Paste Layer Style).

    Step 5

    The next step is to duplicate your blue shapes once again and change their color (optional) by using the Hue/Saturation panel again. I chose to make it orange but you can pick any color you like. Next, move each layer diagonally in the opposite direction of your “blue shapes”; for the bottom blue shape you have to move your new orange shape a bit up and right, and for the upper blue shape down and right. Then select your blue shapes by pressing Ctrl/Command-click on the layer’s thumbnail in the layers list, and delete those parts in your new orange shapes. The idea is to create a stroke effect. After that apply the effects as shown below (remember to change the shadow’s angle; if you use eg. 120 degrees for the upper layer, you have to change it to -120 for the lower one).

    Note: The pattern used is Canvas; don’t mind the gap created on the left side, just crop the image so that it fits perfectly.

    Step 6

    Now we’re going to create the let’s say “laces’ holes” (sorry I don’t know how you call these). Create a new layer (you can group the previous layers by selecting them in the Layers Panel and pressing Ctrl + G) and using the Ellipse Tool (U) create a perfect circle (remember to hold Shift). Turn down Fill to 0% and apply the following styles. Note: The color I used for the circle’s stroke is #e1e1e1.

    Duplicate the layer as many times as you want and place the holes anywhere you want.

    Step 7

    Go back to your original “blue shape” layers and press on the Add layer Mask icon on the bottom of the Layers Panel. Now we’re going to select all the holes; hold Ctrl and click on the thumbnail of your first “hole” (should be a grey square). Repeat it for all the holes but REMEMBER: for any additional hole you want to select you MUST hold Shift + Ctrl and then click. Now go back to your blue shape layers and click on the blank thumbnail (Mask’s thumbnail) and simply paint black the previously selected circles.

    Step 8

    The next step is to create the “stitches” to make our shoe look realistic. You’ll have to download a “Stitches Brushes” pack. Once you have installed the brushes, create a new layer and use the Pen Tool (P) to make guides similar to those used when creating the “blue shape” in the beginning (see pic 10 1). Create them only on one part of the shoe, eg. the upper “blue shape”, as you can always duplicate and invert it which will save you a lot of time. Select the Brush Tool (B), find the desired stitches brush and tweak its size (you can always use the Window > Brush panel to adjust further your brushes). Now select the Pen Tool (P) once again and press right click on the created line, choose Stroke Path from the list and uncheck the Simulate Pressure box. To make it look a bit better, apply these styles.

    Step 9

    Next stop: the laces. Create a new layer, select the Hard Round brush from the Brush Presets panel and set the size to 40px. Pick the Pen Tool (P) and draw a simple line using as anchor points the centers of two holes. Note that I’ve moved the lower holes a bit backwards. Then, right click and choose Stroke Path; remind to keep the Simulate Pressure box unchecked. Duplicate the layer as many times as you need. After doing that apply the following styles on a laces layer and then simply Copy the Layer Style and Paste it on the rest layers. Note: The pattern used is called Burlap.

    Step 10

    Now comes the tricky part. You have to make the laces look like they’re tied. For this you have to add a mask. Keep the hard round brush but downsize it to 6-10px and start “erasing” the unwanted parts. If you have a tablet, you won’t have any problems achieving the effect. Use the image below as a guideline. Apply the same technique to all the laces layers or duplicate the original and delete the ones created in Step 9.

    Step 11

    Create more laces and place them diagonally (as shown in the final image).
    Remember to place those layers right above your first layer (the one created in Step 3) and use the Mask to “cover” some unwanted parts.

    Step 12

    In the last step we’re going to create the rubber thing on the right edge. So, create a new layer, and using the Pen Tool (P) or the Ellipse Tool (U) draw a wide oval shape on the right edge of your canvas. Paint it white and apply the following styles.

    Step 13

    That’s it! Your shoe is ready. You can now group all the layers and flatten the image.

    Conclusion

    Now we move to the post-production. Place the Texture 5559 by dianascreation and Desaturate it (Shift + Ctrl/Command + U). Choose the Color Burn in the Blend Mode list and let the Opacity at 100%. Create a new layer and paint it using the Bucket with #f4d28f. Choose Overlay and reduce Opacity to 50%.

    On a new layer place the crazykira03 texture by crazykira and se the Blend Mode to Divide and the Opacity to 70%. Create a new layer and paint the canvas with #343434. Set the Blend Mode to Hue and the Opacity to 20%.

    Finally place the 02 texture by buzillo-stock on a new layer and duplicate it. Desaturate the first copy and set the Blend Mode to Multiply and Opacity to 80%. For the second copy use Multiply at 70%.


  • Emil Agarunov | March 16, 2012

    A caricature is a painting or drawing that exaggerates the features of the subject. The results are often humorous. In this article we have included 20 impressive caricatures of famous musicians, superheroes, actors, and individuals for your inspiration and entertainment. Let’s take a look!

    Weak

    A sad superman is featured in this cool caricature floating above the earth.

    Stephen King

    This caricature is of author Stephen King, the artist does a great job of making a scary caricature to match Kings novels.

    Sheldon Cooper

    Dr. Sheldon Cooper from the popular show The Big Bang Theory gets the caricature treatment here.

    Shaun of the Dead

    Shaun and Ed from Shaun of the Dead are painted here probably staring at a horde of zombies.

    Steven Spielberg Caricature

    Steven Spielberg is featured in this caricature with some of his most popular friends.

    Marilyn Monroe

    This black and white caricature features famous starlet Marilyn Monroe.

    Lady Gaga

    Lady Gaga is shown in this long faced caricature.

    Kevin Garnett

    Basketball player Kevin Garnett is shown in this impressive caricature. The artist does a great job using his unique style of sharp contours on the body as well as the lighting and coloring.

    Johnny Depp Caricature

    Its hard to call a caricature realistic but this painting of Johnny Depp is extremely well done, view in full to see all the impressive detail.

    Jimi Hendrix

    Arguably the best guitarist of all time Jimi Hendrix is featured here in this black and white caricature.

    Johnny Depp

    One of Johnny Depps more popular characters Jack Sparrow is featured here in an over exaggerated caricature of the pirate.

    James Franco

    Actor James Franco is shown here in this funny looking caricature.

    Ghost Buster

    Ghost Buster Bill Murray is painted here in one of the more impressive caricatures out of this group.

    Dwyane Wade

    This is another great caricature from the same artist who created the Kevin Garnett one above, this time it feature Miami Heat guard Dwyane Wade.

    Dwight Schrute Caricature

    Popular The Office character Dwight Schrute is shown here in another comical big headed caricature.

    Mad Logan

    Here is one of the more comical caricatures featuring Wolveriene with his signature claws and his favorite cigar..

    Dr. Jones

    Every ones favorite archeologist Indian Jones is featured here in a very well done caricature with some great texturing and coloring.

    Charles Darwin

    People rarely ever want to draw a caricature of a scientist but its great to see this artist create one of the father of the evolution theory.

    Batman

    The caped crusader is featured in this caricature in a very amusing puckered expression.


  • Martin Perhiniak | March 16, 2012

    Photoshop is an excellent tool for manipulating photographs but it can also be used as a means to create stunning digital art. This tutorial is part of a 25-part video tutorial series demonstrating everything you will need to know to start producing digital art in Photoshop. Digital Art for Beginners, by Adobe Certified Expert and Instructor, Martin Perhiniak will begin by teaching you how to draw in Photoshop. At the conclusion of this series you will know all you need to produce your own concept art and matte paintings in Photoshop.

    Tutorial Assets

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

    Today’s tutorial Part 18: How to Prepare for a Digital Art Project will explain how you can prepare for a digital art project. We will learn ways to look for good references and inspiration, create boards and learn from other artists’ tutorials and examples. Let’s get started!


  • Mohammad Jeprie | March 16, 2012

    In this tutorial we will create a clean Twitter app interface in Photoshop using layer styles and basic vector shapes. Let’s get started!

    This tutorial was a collaboration with Syarip Yunus

    Step 1: Make New File

    Start by making a new file with canvas size 1,050 x 700 pixel. You can simply set its resolution to 72 ppi.

    Step 2: Preparing The Canvas

    Click View > Ruler or hit Ctrl + R to reveal ruler. Right click the ruler and select Pixels to change active unit to pixels.

    Step 3

    Drag from ruler to canvas area to make a vertical or horizontal guide. We need an area that is 362 px wide by 589 px tall. On its inner left and right side add margin 7 px.

    Step 4

    Our design needs to be pixel perfect. To do this, we need to activate Snap to Pixels feature on rounded rectangle and rectangle tool. Activate the tool and select this option on the Option Bar.

    Step 5

    Draw a rounded rectangle with radius 5 px and color #e2e4e7.

    Step 6

    Add Drop Shadow and Stroke with following settings.

    Step 7: Title Bar

    Activate rounded rectangle tool with radius 5 px. Draw a black rounded rectangle with same width on top of the interface. Add rectangle path and set its mode to Intersect.

    Step 8

    Double click its layer and add Layer Style Inner Glow, Gradient Overlay, and Stroke with following settings.

    Step 9

    Draw a small circle shape with color #e43c22. We are going to use it for close button.

    Step 10

    Add Inner Glow, Gradient Overlay, and Stroke.

    Step 11

    Activate Move tool and then Alt-drag to duplicate the button. Change their colors to yellow and green. Make sure to change the color on Stroke to match the button’s color.

    Step 12

    We need to add contrast to close button. We want to make sure that the user understands that this button can do dangerous action, closing the whole interface. To do this, draw small circle on top the close button with darker color.

    Step 13

    Draw rounded rectangle with same width and radius. Place it under the title bar. Set its color to #d2d8df.

    Step 14

    Add a rectangle path on top and set its mode to Intersect.

    Step 15

    Add Layer Style Inner Glow and Gradient Overlay.

    Step 17

    Activate line tool and from Option Bar set its width to 1 px. Draw a line with color #808f9e right on bottom of the shape.

    Step 18

    Add Letterpress effect by giving it a Drop Shadow with 1 px white shadow.

    Step 19: User Profile

    Let’s add user’s profile picture container. Draw a white rounded rectangle with radius 5 px. Make to sure to snap it to the guides we have created earlier.

    Step 20

    Double click the layer and add Gradient Overlay and Stroke.

    Step 21

    Draw smaller rounded rectangle with radius 3 px right on center of the previous shape. You can use any color.

    Step 22

    Add Inner Shadow and Stroke with following settings.

    Step 23

    Paste your profile picture on top of the small rounded rectangle shape. Hit Ctrl + Alt + G to convert the layer into Clipping Mask. This way, the picture will goes inside the shape. You can transform the size using Ctrl + T and modify its position using Move tool.

    Step 24

    Add Twitter user name. Add letterpress effect by giving it a Drop Shadow with 1 px size and white color.

    Step 25

    Add user’s short bio. Give it same letterpress effect.

    Step 26

    Draw 1 px line with color #afbac4 right under the bio. Add Layer Style Drop Shadow to give it letterpress effect.

    Step 27

    Add tweets counts using Armata font. Add letterpress effect onto the texts.

    Step 28: Update Button

    Draw a small rounded rectangle with radius 2 px and color #eef1f4. Place it on top right corner right nest to the guide. Add following Layer Styles.

    Step 29

    Draw a black rectangle shape on center of the previous shape. Next, draw smaller rectangle path and set its mode to Subtract from Shape.

    Step 30

    Draw a simple pencil icon made from simple rectangle shape. First, draw a big rectangle with mode Subtract from path. Second, draw a tall rectangle for pencil main body. Third, draw a rectangle and rotate it 45°. Finally, draw a rectangle with mode Subtract from Shape to cut the pencil body.

    Step 31

    Rotate pencil icon we have just created and place it above previous rectangle shape.

    Step 32

    Draw another rectangle under the profile area with color #e2e4e7.

    Step 33

    Add Inner Glow and Gradient Overlay with following settings.

    Step 34

    Draw 1 px line on bottom of the shape with color: #a8b1ba. Add 1 px white Drop Shadow.

    Step 35: Icons

    Use Pen tool to manually draw a bubble icon. Set its color to #adb9c4. Add Layer Style Inner Shadow, Outer Glow, and Gradient Overlay.

    Step 37

    We also need to differentiate the button for hover condition. Duplicate the bubble shape and then change its color to #3c8cf8.

    Step 38

    Add Drop Shadow, Outer Glow, Inner Glow, and Gradient Overlay.

    Step 39

    Draw a black rectangle behind the bubble speech icon. Add Gradient Overlay.

    Step 40

    Reduce Fill to 27%.

    Step 41

    Add layer mask and paint its upper shape with black.

    Step 42

    Repeat the steps to make more icons.

    Step 43

    Add 1 px vertical line with color #aab6c2 between first and second icon. Add Drop Shadow to give it letterpress effect. Add layer mask and then paint its upper and lower to fade the line to its background.

    Step 44

    Alt-drag to duplicate the line. Place them between each icon.

    Step 45: Search Box

    Activate rounded rectangle with very big radius. Draw a search next to the last icon. Add Drop Shadow, Inner Shadow, Outer Glow, and Stroke.

    Step 46

    Inside the search area, combine circles and rounded rectangle to draw a magnifier icon with color #8696a8.

    Step 47: Tweets List

    Draw a rectangle shape with color #e2e4e7. Add Inner Glow and Gradient Overlay.

    Step 48

    Draw 1 px line on bottom of the shape with color #a8b1ba and then add letterpress effect

    Step 49

    Draw a white rounded rectangle with radius 3 px. Add Gradient Overlay and Stroke.

    Step 50

    Inside the shape draw smaller rounded rectangle with radius 1 px and color #202020. Add Drop Shadow and Stroke.

    Step 51

    Paste profil picture on top of the rounded rectangle shape. Hit Ctrl + Alt + G to convert it to Clipping Mask. The picture will goes inside the shape.

    Step 52

    Use Type tool to add user name, tweet content and time information. Make sure to add contrast to link and mentioned Twitter account.

    Step 53

    On right lower right corner of the tweet area, draw a circle shape with color #aab7c3. Then, draw a star using Polygon tool and set its mode to Subtract. We will use this as a favorite button.

    Step 54

    Use same techniques to draw reply button.

    Step 55

    Place all tweets inside a group layer by selecting them and then hit Ctrl + G. The, duplicate it by Alt-dragging the group layer. Edit the picture profile and its text to change them.

    Step 56

    Duplicate the application basic shape and then change its color to black. Add a rectangle on top of it and set its mode to Intersect. Add Inner Glow, Gradient Overlay, and Stroke.

    Step 57

    Add API information on the bottom bar. Add letterpress effect using Drop Shadow.

    Step 58

    Draw 12 rounded rectangles shapes in different sizes. Manually, arrange their position and then rotate them. Add letterpress effect.

    Step 59: Scroll Bar

    Draw a tall white rounded rectangle with radius 1 px. Place it next to the guide. Add Stroke.

    Step 60

    Draw shorter rounded with same radius on the slider bar. Set its color to #8b9eb3 and add Layer Style Inner Glow and Stroke.

    Step 61: Add More Guides

    We have done with the main interface. Next step is making update status and upload photo window interface. First we need more guides to help us designing. See picture below to see the required position.

    Step 62: Update Status Window

    Start by drawing a rounded rectangle with radius size 5 px and color #e2e4e7.

    Step 63

    Add rectangle path on left side of the window. Hit Ctrl + T and then rotate it 45°. Make sure the path is set to Add to Shape. Add Layer Style Drop Shadow and Stroke.

    Step 64

    Duplicate basic shape and change its color to black. Add rectangle on top and set its mode to Intersect. Add Inner Glow, Gradient Overlay, and Stroke.

    Step 65

    Draw a small circle shape on top right corner of the title bar. Set its color to #707070. Add two rounded rectangles on its center and set their mode to Subtract. Rotate both rounded rectangles 45°. This close button is used for normal condition.

    Step 66

    Duplicate the button and then change its color to #a4a4a4. This one is used for hover condition.

    Step 67

    Duplicate basic shape and change its color to black. Add rectangle path on lower area and set its mode to Intersect. Add Inner Glow, Gradient Overlay, and Stroke.

    Step 68

    Draw a blue rounded rectangle with radius 3 px on right corner of the interface. Add Inner Glow, Gradient Overlay, and Stroke.

    Step 69

    Add text Post on the button. Add letterpress by giving it 1 px dark Drop Shadow.

    Step 70

    Duplicate the button and its text. We will make new one for hover condition. All we need is increase the opacity of its Gradient Overlay to 40%.

    Step 71

    I suggest you to put each button in a separate group layer. This way, the layer structure is organized better.

    Step 72

    Draw a | character to be used type indicator. Add remaining character on bottom left corner.

    Step 73: Image Upload Window

    Repeat previous step to draw image upload interface.

    Step 74

    In center of the window, draw a rounded with radius 3 px and color #d9dde1. Next, add smaller rounded rectangle path inside previous shape. Set its mode to Subtract.

    Step 75

    Add some horizontal rectangles and set its mode to Subtract. Select all the rectangles and then click Distribute Vertical Center and Distribute Horizontal Center icons.

    Step 76

    Repeat same steps to add vertical rectangles.

    Step 77

    Add letterpress effect.

    Step 78

    Draw a rounded rectangle on center of the window with radius 3 px and color #cdd2d8. Add a rectangle inside it and set its mode to Subtract.

    Step 79

    Add circle path and draw a polygon using pen tool. Set both mode to Add to Path.

    Step 80

    Add Drop Shadow.

    Step 81

    Add short instruction and give it letterpress effect.

    Final Image


  • Grant Friedman | March 16, 2012

    Let’s be honest, most of Photoshop’s default filters and effects don’t give you much flexibility and don’t always look very realistic. Filter Forge is a powerful third-party plugin for Photoshop that allows you to do some pretty amazing things with filters, and even create your own. Today, our friends at Filter Forge are celebrating their 5th Anniversary by giving away a copy of Filter Forge 3.0 to 5 lucky Psdtuts+ readers.

    Update: this giveaway has concluded and the winners have been selected. Thanks to everyone who participated.

    Version 3.0 features support for multiple source images, improved preview interactivity, new amazing filters, and much more. To see Filter Forge in action, take a look at our recent tutorial explaining how to get started with Filter Forge.

    See More Examples

    On the surface, Filter Forge is just a Photoshop plugin, a pack of filters that create visual effects, enhance photos, generate textures, and process images. However, there are some things that make Filter Forge unique:

    1. All users get free access to thousands of filters. Anyone can contribute their textures and effects to the online filter collection so it grows with every submitted filter.

    2. You can create your own filters. If you cannot find an appropriate filter in the library you’ll love the Filter Editor – a visual node-based tool for creating custom-tailored textures and effects. All filters are constructed by connecting components that represent basic operations such as blurs, gradients, color adjustments, noises, distortions, or blends – without writing a single line of code.

    To win a free copy of Filter Forge, all you need to do is enter using the form below.

    Submit Your Entry

    Up For Grabs

    • 1 copy of Filter Forge Basic to 5 readers

    Rules

    • To enter, submit your entry using the form above.
    • You may only enter once.
    • Make sure to enter a valid email address so that we can contact you.
    • Entries will be accepted until Friday, March 9, 2012 at 11:59 PM, EST.

    To learn more about Filter Forge, visit their website, download the demo version of the software, and check out their gallery.

    Download Demo

    Editor’s note: This post was sponsored by Filter Forge.