Tuesday, January 18, 2011

You The Designer

You The Designer


30+ Awesome Artworks of The Flash

Posted: 17 Jan 2011 11:56 PM PST

The Flash. He’s the comicbook superhero who has gained popularity in the early 1990′s. He has defied the laws of physics with his superhuman ability for speed. Though he has not surpassed the popularity of his allies in Justice League like Superman and Batman, the Flash has definitely created his own mark in comic book history.

In this regard, we have collected a series of cool digital artworks inspired by our fast-paced superhero. Get your dose of various artists’ interpretations of the Flash as illustrated in their own personal way. Check out these amazing images and be inspired!

Thinking Flash

thinking flash
View Source

Red Yellow Flash

red yellow flash
View Source

Lightning Flash

lightning flash
View Source

Skinny Flash

skinny flash
View Source

Running Flash

running flash
View Source

Flash Cover

flash cover
View Source

Running Red Flash

running red flash
View Source

The Flash

the flash
View Source

Flash

flash
View Source

Angry Flash

angry flash
View Source

Flash Progression

flash progression
View Source

Thin Flash

thin flash
View Source

Long Face Flash

long face flash
View Source

Red Flash

red flash
View Source

Sketch 06 : Flash

sketch 06 flash
View Source

Sketch Flash

sketch flash
View Source

Wonder Woman and Flash

wonder woman flash
View Source

Fighting Flash

fighting flash
View Source

Manga Flash

manga flash
View Source

Black and White Flash

black and white flash
View Source

Digital Flash

digital flash
View Source

Flash Color

flash color
View Source

Comics Flash

comics flash
View Source

The Flash: Secret Files

flash secret files
View Source

Old Flash

old flash
View Source

Pose Flash

pose flash
View Source

Flash Before and After

flash before after
View Source

Flash Redesign

flash redesign
View Source

Funny Flash

funny flash
View Source

Flashy Flash

flashy flash
View Source

Hero Flash

hero flash
View Source

How to Vectorize a Pair of Sneakers in Photoshop

Posted: 17 Jan 2011 03:53 PM PST

Vectoring is easily done in Adobe Illustrator but there's no need to fret if you don't have one installed. Photoshop can also be handy for creating vector art. In this tutorial, we are going to learn how to vectorize a pair of sneakers. Now, crack your knuckles and get ready to create some kick-ass vector art!

vector-photoshop-tutorial-01

STEP 1: Prepare Your File

The first step is to download a good quality photo. Good quality means high resolution and good contrast; these attributes make tracing less difficult and more accurate.
Download the image here.

vector-photoshop-tutorial-02

On the Layers tab, right-click Background and select Duplicate Layer.

vector-photoshop-tutorial-03

STEP 2: Create a Rough Outline

It is usually easier to trace when the entire photo is visible, so create the shape under the duplicate. Start by selecting the original Background Layer. Then, click on the image to mark a point; this new point is called an anchor point. A line will automatically be generated to connect one anchor point to the next.

vector-photoshop-tutorial-05

Click on several points around the image to create a rough outline. Close the shape by connecting the last point to the first.

vector-photoshop-tutorial-06

Before we continue, we need to change the color of the shape. It is always better to choose a shade closer to the image’s dominant color. I opted for #068536.

vector-photoshop-tutorial-07

STEP 3: Adjust Curves

Select the Convert Point Tool and click on an anchor point. A pair of new lines called the Bezier handles will appear. Use these handles to control a point’s curvature.

vector-photoshop-tutorial-08

When you complete this step, you should now have a proper outline.

vector-photoshop-tutorial-09

When you complete this step, you should now have a proper outline.

Step 4: Add Details

So far, our design hardly resembles a real pair of sneakers. The next step is to identify the details. These are: toe caps, heels, insoles, eyelets, tongues, stitches, and laces. Googling a bit about shoe anatomy should help.

Since creating a vector image usually requires several layers, you may want to create groups for each part. Groups are like folders that can help organize your layers. Click the Create a New Group icon at the bottom of the Layers Tab. You don’t have to create the groups right away, you may opt to do this as you trace each part.

The heels, edgings, and toe caps are the next most basic parts, it’s only practical to trace them next. These parts are all white (#FFFFFF). Create black (#000000) strips over them for the rubber linings.

vector-photoshop-tutorial-10

vector-photoshop-tutorial-11

The insoles are the insides. I used #B9AF8C, which is a pale shade of brown. Include tracing the thin lines that creates the silhouettes of the tongues.

vector-photoshop-tutorial-12

Use the Ellipse Tool and foreground color #696C73 to create the eyelets. Duplicate this gray circle, then press CTRL + T. Adjust it to the size of the inside circle on the photo and change its color to #000000 or black.

vector-photoshop-tutorial-13

The Ellipse Tool allows you to create circles that are similar to shapes created by the Pen Tool. Therefore, these circles also contain movable anchor points. Click on the outline of a circle to enable its anchor points. Adjust the points according to the shape of actual eyelet on the photo. Do the same procedure for the rest of the eyelets.

On the photo, the sneakers’ tongues are the same color as the upper soles, but we’d want to distinguish them. Use the Pen Tool to trace all the visible parts of the tongue on each shoe and use #005A22, a darker shade of green.

vector-photoshop-tutorial-14

Next, trace the shoelace by forming a solid outline.

vector-photoshop-tutorial-15

Here comes the tricky part: select the Pen Tool and click the Paths icon on the options bar. Create a path around the parts you want to remove. While on the laces layer, click the Add Layer Mask icon at the bottom of the Layers Tab.

vector-photoshop-tutorial-16

A new layer mask thumbnail will appear beside the vector mask thumbnail. Press CTRL + ALT + Enter to convert the path into a marquee, then press Delete. This action eliminates the mask inside the marquee.

vector-photoshop-tutorial-17

Our initial trace is still showing bits of the green mask through the laces. Delete or hide the appropriate anchor points. Trace the aglets and set the color to #F2F1F1 or dirty white; these are the two sheaths at the ends of a lace. Perform the same procedure for other parts of the laces.

Next, create a new layer. Set the foreground color to #FFFFFF or white, and set the brush size to 2px. Using the Paths option of the Brush Tool, trace the stitches. Right-click on the path, then select Stroke Path.

vector-photoshop-tutorial-18

Turn the lines into dashes by using the Eraser Tool. Select a 4px Square Brush, then manually delete portions of the lines. Trace a rough zigzag on right shoe’s tongue. Finally, adjust the stitches group’s or layers’ opacity to 19%.

Final Image

vector-photoshop-tutorial-19

Here is our final artwork! We hope you have enjoyed this tutorial as much as we did. Check us out regularly for more awesome design articles and tutorials.

No comments:

Post a Comment