lendozheng
lendozheng插画画廊
uid: 26047
级别: 论坛元老
精华: 96
发帖: 21757
威望: 12844 点
积分: 22703 分
推广值: 227 点
注册时间:2005-05-24
最后登陆:2012-04-10
|
 用ps制作超精致的交通路障
用ps制作超精致的交通路障（转载）
Illustrate a Traffic Cone Icon in Photoshop
Previously I showed you how to illustrate a
construction helmet icon
. Today we'll be drawing a traffic cone, another handy icon for "under construction" elements. Our cone icon is inspired by one I saw on the
VLC Player
site recently.
Author:
Václav KrejÄÃ
Hello, I´m Vaclav, graphics designer from Czech Republic, mainly focused on GUI design (application skins, icons, backgrounds, themes, etc.). I do graphics design for more than 6 years, last year (2007) I´ve written the book Adobe Photoshop: GUI design (
[url]http://www.photoshopguidesign.com/
[/url]
), and now I´m writing Photoshop tutorials.
Editor's Note: This tutorial was originally published in the Czech language at
Grafika Online
.
Grafika
have kindly given permission for Vaclav to republish here on PSDTUTS for those of us who haven't quite mastered Czech.Step 1Start Photoshop, open a new document, and fill the background with light orange/sand color (#EABE94). Select the Rounded Rectangle Tool and draw the base of the icon—color #CC622E (for now).
Step 2Rotate this shape (Ctrl + T) 45 degrees...
Step 3...and make its height smaller approximately by half, again with the transform tool (Ctrl + T ).
Step 4Copy this layer (Ctrl + J), change the color to a darker shade (#8A3300), and move it under the last layer. This will be the base of the cone. Unfortunately, on the left and also on the right (as the arrows show) there is a free space.
Step 5That is why we have to fill in these places. One way to do this is to add two rectangles to the shape (see the outlines below).
Step 6And we can get down to the main part. First, we click out a triangle-like shape similar to this one with the Pen Tool (P).
Step 7After that, add points with the same tool in the middle of both the top and bottom axis.
Step 8Using the Direct Selection Tool (A), move the upper point up and the bottom point down. Note that when drawing the points, I dragged out the ends as indicated in the image below.
Step 9Now for the white reflective stripes, we will create extra shapes. First, we draw an ellipse over the whole width of the previous shape, place a rectangle over it (drawn with Shift key down), and then one more elllipse, which we substract from the shape (drawn with Alt key). For now, use colors like #E6E6E6. You should wind up with the result shown.
Step 10Copy this shape once more (Ctrl + J), move down and resize it to make it bigger to match the cone shape (Ctrl + T). Create a Clipping Mask from the last layer to both layers, with the Ctrl + Alt + G shortcut. After this, the layers will be displayed only on the previous layer (orange).
Step 11To keep our icon coloured properly, we can draw colors sideways into a new layer, which we are going to use for shading. It is a dark orange for shades (#6B3719), orange shades for the base (#D25200, #F07E00), and the light one for reflections (#E6E6E6). It will be OK if you use white color with lowered opacity for reflections.
So let's begin shading. Hide all layers except the first one (lower layer of the base), create a new layer, and then create a Clipping Mask on the previous layer (Ctrl + Alt + G).
Select a dark color and on the left-middle scribble with a big brush, then select the right part of the shape with the Polygonal Lasso Tool , and scribble with the big brush again. As you can see on the picture, you should have two darkened patches.
Step 12Unhide the next layer, recolor it to orange (#D45809), and create shades using coloring from the back. Light the shape as if the lighting is coming from the front.
Step 13We also create shades above the main part of the cone, and from the left and from the right as well. We use again the same color (#6C3819), only this time experiment with opacity and interaction (try setting the shading layer to Multiply for a good effect).
Step 14Now we want to light up the white stripes. If you look at reflecting glass or a reflex vest closely, you can see a clear structure, which we are going to try to immitate. Since the icon is very small, the structure also must be small and simple.
We draw this pattern into a new layer with the Pencil Tool, then select the section and define it as a new pattern—Edit > Define pattern.
Step 15Now load the selection of both white layers (Ctrl-Shift-click on the layer), create a new layer (Ctrl + Alt + Shift + N) and set this selection as a Layer Mask.
Step 16Switch to the Mask (Alt + click on the Mask) and fill the white spaces with our prepared pattern. We will use the fact that the black color does not change by setting the Multiply interaction. Open the Fill dialog from the Edit menu, set our pattern, interaction, and confirm.
Step 17What has happened? Now the layer content will be seen only on the point of white layers, but only as a pattern. You can try it out immediately, by drawing with any tool on the layer as in the picture.
Step 18But we want to have a nice light, so we set a big, white, soft brush and draw in the middle of the cone. Our pattern starts to project nicely.
Step 19That is why we can have big reflections over the whole cone. First we load a selection of the main part of the cone and Contract this selection by 2px.
Step 20With the Polygonal Lasso Tool, we subtract the right half (holding down the Alt key) and after it with the Elliptical Marquee Tool, we subtract the upper part (which would not be lit as well—but only for now).
Step 21With the selection still set, draw a gradient from white to transparent into a new layer with the Gradient Tool.
Step 22Create a reflection on the base in the same way making sure to show it angling off to match the object.
Step 23Make sure you also add the highlight to the side of the base. Here you can use Rectangular Marquee Tool.
Step 24But the cone without the reflection on the top looks a little bit strange, so we need to add it here as well. Because we wish to edit this reflection eventually, we can use a Shape Layer, created with Pen Tool.
Step 25Highlight the edges of reflections more. We use the Pen Tool to do this, and you can see detailed shots below.
Step 26Because we're creating an extra glossy cone, the base should have a slight reflection as well.
When the cone is glossy enough, the cone part should reflect on the base. That is we we copy this layer (orange one) and put it above the base. Flip the layer, move it down, we can also add a mask for a layer to vanish down. You can see on the picture below that the reflection is mostly seen on the right part of the icon (where the arrow shows).
Step 27The last step will be adding a background light. It's nice if the icon is not all the same color, so instead we can choose another shade for the light. I selected a violet color. Load the selection of all layers and make it one pixel smaller by choosing Select > Modify > Contract...
Step 28Then draw with a big, soft, violet (#D2B8F6) brush and brush the light into the new layer,
Step 29And that's it! Good luck in your work!
|
lendozheng插画画廊 http://chahua.com/u/26047
http://cg.chahua.org 中国插画画廊-插画师作品展示中心
[b][color=#42ffbc]~没有能不能 只有敢不敢,可以不要牛奶.面包,但不可以不要尊严,可以没有金钱.地位,但不可以没有人格,富有人人向往,但必须用智慧和勤劳去创造,才能获得物质和精神的双重富有.........[/color][/b]
|
|
[楼 主]
|
Posted:2009-02-04 11:06| |
| |
插画中国 -> Painter教程、Photoshop教程与电脑绘画软件技术 -> 用ps制作超精致的交通路障
