Photoshop Tutorial: How to Design a Detailed Circuit Chip Icon in Photoshop

Design a Detailed Circuit Chip Icon in Photoshop

Hi friends, today in this Photoshop tutorial we will see how to design a beautiful, detailed and realistic circuit chip icon. Here mostly i have used layer styles to bring about this beautiful icon. You can just feel the power of layer style, that will give you the desired effect. One must master it. Keep on practising. As you know, it takes lots of dedication and time to design a beautiful icon. A lot of research goes into it, sometimes it takes almost a month to design a simple icon. Fine now, let’s move on to the tutorial.

QuoteGuru:
“Don’t aim to be perfect, perfection is for machines not for humans, try to excel, because perfection is a dead thing”.

Peek-a-Boo at these links

Photoshop Tutorial: Design a Simple and Elegant Looking Power Button
Photoshop Tutorial: Design a Record App Icon in Photoshop
Photoshop Tutorial: Create A Simple Music Player Icon
Photoshop Tutorial: Create A Battery Icon
Photoshop Tutorial: Create A Stylish Mouse Icon

Step-1 Open a new document with width and height of 500 pixels respectively.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Step-2 From the tools palette pick the rounded rectangle tool, at the top of the menu tab, set the radius of this tool to 20 pixels. Now draw a shape as you see below. Once you have drawn the shape, double click on this layer to bring in the layer style window, and apply the following layer style effects. Here i have used DROP SHADOW, INNER GLOW, BEVEL EMBOSS, and GRADIENT OVERLAY. This is how the image will look once after applying the required effects.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Step-3 Here in this step we will make some incisions in the previous shape. To do that select(activate) the vector mask thumbnail of the layer, and also pick the elliptical tool from the tools palette, at the top of the menu tab select the option subtract from shape area. Now subtract some parts of the shape like i have done it below. See the image.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Step-4 Pick the rectangle tool from the tools palette, and draw a shape as you see below. Now we will apply some Layer style effects. Double click upon the layer, a new layer style window will appear. Now apply the layer style effects. Here i have used DROP SHADOW, BEVEL EMBOSS, GRADIENT OVERLAY.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Step-5 Again using the same rectangle tool create another shape at the top of the previous shape. Let the colour code of this shape be # 3b3b3b. Now apply the following layer style effects. Here i have used DROP SHADOW, BEVEL EMBOSS.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Step-6 Now its time to create the pins that is attached to the chip, to do that, pick the rectangle tool from the tools palette, and draw some shapes as i have drawn it below. Once you have drawn the shape, we will apply some layer style effects. Select any one of the shape now double click on this layer to bring in the layer style window. Here i have applied DROP SHADOW, GRADIENT OVERLAY EFFECTS.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Once you have applied the desired layer style effects, right click upon this layer, and select the option copy layer style, once you have copied it, select the other two remaining shapes right click upon it and paste the layer style values. Look at the image below.

Design a Circuit Chip Icon in Photoshop

Step-7 Now select all those three shapes, CTRL+T to bring in the transform tool, and transform this shape into a much smaller size. Once you have transformed it, click CTRL+E to flatten the image. Duplicate this image as many times as required, and place it accordingly, so that it must look like a chip. Check the image below.

Design a Circuit Chip Icon in Photoshop

Step-8 Now group all these shapes, duplicate it and place it accordingly. See the image below.

Design a Circuit Chip Icon in Photoshop

Step-9 We will create some more necessary additions. From the tools palette pick the elliptical tool with the colour code # 3a3939, draw a small circle at the bottom left of the chip. Apply INNER SHADOW and OUTER GLOW effect. After applying the layer style effects. Duplicate this shape and place it at the other side of the chip. Check the image below.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Step-10 Pick the rectangle tool from the tools palette, draw a small rectangle shape at the bottom. Double click on this layer to bring in the layer style window and apply GRADIENT OVERLAY effect. Duplicate this image and place it accordingly.

Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop
Design a Circuit Chip Icon in Photoshop

Step-11 For the final step add some text, use some technology brushes, you can download it from net, to make it more realistic.

This is final preview of the Photoshop Tutorial: How to Design a Detailed Circuit Chip Icon in Photoshop.

Design a Circuit Chip Icon in Photoshop

That’s it friends for today. Hope you have liked this Photoshop Tutorial. Weekend has come, its calling you and pulling you. Party hard, enjoy. Take care.

SEO Powered by Platinum SEO from Techblissonline