This tutorial is a collaboration with a young and talented web designer from Indonesia, Aris FM.

Preview

Click on the image below to see it in full size.

Step 1

Open Photoshop. Click File > New or hit Ctrl + N to make a new file. In the dialog bos, set its size to 1340 × 2598 px.

Step 2

Make new layer. Click foreground color on toolbox and change its color to #c5c5c5. Hit Alt + Delete to fill it with foreground color.

Step 3: Make Pattern

Make new file with size 6 x 6 px..

Step 4

Set foreground color to default, black, by pressing D. Activate Brush tool with brush size 1 px. Make new layer and then draw two diagonal lines as seen below.

Step 5

Click eye icon on front of Background layer to hide it. Click Edit > Define Pattern to save the picture as a pattern.

Step 6

Let’s return to our site design. Activate background layer we have just made in Step 2. Double click layer and add Pattern Overlay. Select pattern that we have just created.

Here’s the result of our background in 100% magnification.

Step 7: Guides

Reveal ruler by pressing Ctrl + R. Click and drag from vertical ruler onto the canvas to make new guide. Place the guides on 280 px and 1060 px.

Step 8: Main Menu

Draw a rectangle shape with color: #434343 on top of the site. Make sure to make it big enough until its top, left, and right sides are outside the canvas. Set its layer Opacity to 50%.

Step 9

Double click rectangle shape layer to open Layer Style dialog box. Add Drop Shadow and Stroke with following settings.

This is the difference with and without Layer Style.

Step 10

Use type tool to write main menu.

Step 11: Main Content

Start writing main content of this site, the owner’s name. We are using free Lobster font.

Double click text layer. Add Drop Shadow and Stroke.

Step 12

Add subtitle. Add layer style drop shadow to add letterpress effect onto the text.

Step 13

Add a slogan that define the site owner’s principle. Again, add same layer style to add letterpress effect.

Step 14: Separator

We’re done with main content section. Before adding another section, we need to make a custom shape separator between each section.

Activate Custom Shape tool. From the option bar activate shape layer and select indicated shape below.

Step 15

Click and drag on the canvas to draw the shape.

Step 16

Select another shape from the option bar. Shift-drag to add shape onto the layer shape.

Step 17

Select shape we have just created with Path Selection tool. Alt-drag shape to duplicate it. Perform transformation (Ctrl + T), right click and select Flip Vertical.

Step 18

Repeat previous step, this time to all shapes. Select all shapes and then Alt-drag to duplicate them. Transform (Ctrl + T), right click and choose Flip Horizontal.

Add following Drop Shadow onto the shape.

This is the result after adding Layer Style.

Step 19

Let’s hide the custom shape layer by clicking on its eye icon. Use Pencil tool to draw two 1 px lines, black and white, in a separate layers.

Step 20

Set black line layer Opacity to 40% and white line layer Opacity to 60%.

Step 21

Place both lines into a group layer, by selecting both of it and hit Ctrl + G. Alt-click Add Layer Mask icon to hide both lines. Activate brush tool. Use big and soft brush. Paint indicated areas with white.

Step 22

Reveal custom shape that we have made earlier.

Step 23: Featured Project

Write title of the next section.

Add following Drop Shadow to add letterpress effect.

Step 24

Draw a rounded rectangle under the title. Make sure it fits the content width.

Add Drop Shadow and Stroke with following settings.

Below is the result.

Step 25

Paste a picture on top of the shape. Convert it to Clipping Mask by pressing Ctrl + Alt + G. This will force the picture goes inside the shape.

Step 26

Draw a rectangle on lower part of the shape. Convert it to Clipping Mask (Ctrl + Alt + G). Add following layer style Gradient Overlay.

Step 27

Draw a 1 px line with color #939393. Add a Drop Shadow.

Step 27

Add project title and its category.

Add Drop Shadow to give it 3D appearance.

Step 28

Add more pictures for another project.

Step 29

Draw a small circle shape for slide navigation.

Add following Drop Shadow, Gradient Overlay, and Stroke.

Here’s the result after adding Layer Style.

Step 30

Activate Move tool. Alt-drag the circle twice to duplicate it.

Step 31

Select one of the circle. We need to change its appearance for active condition. Edit layer style with following settings.

And below is the slide navigation with one of them in active condition.

Step 32: Section Owner Description

Let’s continue working on next section. Duplicate section separator. Add section title and make sure to use layer style settings as the previous section title on Step 23. Add short description about the site owner.

Step 33: Add Social Network Icons

Grab some social network icons. Place them under the owner short description. In layers panel, select all their layers by clicking on first layer and then Shift-click the last one.

Step 34

Activate Move tool. From the option bar, click Align vertical centers and Distribute horizontal centers to perfectly align all the icons and distribute them equally.

Step 35: Section Contact

Before moving on to next section. Let’s duplicate the separator first. Alt-drag the separator to duplicate it.

Step 36

Add section title. Make sure to consistent using same layer style as the other section title.

Step 37

Draw simple rounded rectangle for the contact form input box. On top of each input box add clear description.

Step 38

Let’s working on its submit button. Draw another rounded rectangle shape but this time use lighter color.

Draw following layer styles.

We add subtle noise inside the button using Inner Glow. notice that in the setting we use small Opacity, max out the Noise setting to 100%, and increase the Size setting.

Below is our button.

Step 39

Write Submit on the button. Add layer style Drop Shadow to make it 3D.

Final Result

We’re done with this design. Click on the image below to see it in full size. Don’t missed next tutorial, because we will convert this design into a functional HTML page, complete with its image slide.

Download File PSD

Download file PSD

Draw a Realistic Wacom Bamboo in Illustrator and Photoshop – Part 2

In this second part of the tutorial, we are going to draw a realistic Wacom Bamboo. Make sure to read the first part, drawing the path in Illustrator.

Preview

Below is the final result of this tutorial.

Resourse Used

Following resource is used in this tutorial:

• Fabric Patterns

Step 1: Import Vector Path from Illustrator

Select all the paths we have made in Illustrator. Copy (Ctrl + C) and then paste it (Ctrl + V) in Photoshop.

In Photoshop, you will get a dialog box asking type of paste that you want. Because we want to export the vector path, we choose Path.

All the paths is now imported in a new path. You can find them inside Paths panel. Double click the path and change its name.

Step 2: Wacom Main Shape

Select wacom main shape path. Copy and then paste it on a new path. Click black and white icon on Layers panel to add new Adjustment Layer. Select Solid Color and set its color to #222327.

Step 3

Make new layer on top of previous shape. Fill it with white. Set its blend mode to Multiply. Convert it to Clipping by pressing Ctrl + Alt + G. Click Filter > Noise > Add Noise.

Step 4

Below is our result. The shape now has subtle texture on its surface. If your texture is not enough, you can simply duplicate the layer by pressing Ctrl + J.

Step 5

Make new layer. Set foregound color to white. Activate brush tool. Paint some highlights on indicated areas below. To get best result, make sure to paint patiently using low Opacity brush.

Step 6

Select inner shape of the wacom and paste it on a new path. Add new Adjustment Layer with color #111113.

Add following Layer Styles.

Step 7

Select main pad area path. Paste it on new path and add new Adjustment Layer Solid Color with color: #111113.

Again, add Layer Style Bevel and Emboss and Gradient Overlay.

Step 8

Hit Ctrl + J to duplicate the shape. Transform (Ctrl + T) it to 99% of its original size.

We still use previous Layer Style settings. But, this time set Direction on Bevel and Emboss to Up.

Here’s our current result.

Step 9: Reflection

Duplicate Wacom inner shape that we have created in Step 6. Change its color to white and remove all its Layer Styles. Add a triangle shape and set its mode to Intersect.

Step 10

Reduce layer Opacity to 10%.

Step 11

Add Layer Mask onto the shape. Draw Linear Gradient from white to black until the reflection fades away.

Step 12: Wacom Drawing Pad

Activate Wacom drawing pad and convert it into a new Adjustment Layer Solid Color. Set its color to #2a2a2e.

Add Layer Style Gradient Overlay.

Step 13

Let’s add texture onto the drawing pad to make it appears realistic. Make new layer and then fill it with white. Click Filter > Noise > Add Noise. Set blend mode to Multiply.

Step 14

Activate brush tool. Right click on canvas and set brush size to 1 px with 0% hardness.

Step 15

Make new layer above the drawing pad. Select rounded rectangle path inside the drawing pad. Right click and select Stroke Path.

In the next dialog box, select Brush.

Step 16

Convert layer to Clipping Mask by pressing Ctrl + Alt + G. This way, the stroke will stay inside the drawing pad.

Step 17: Buttons

Activate Pencil tool. Set its size to 1 px. Draw some black lineson indicated areas below.

Step 18

Next to the line, draw another white line. This time, decrease its Opacity to 30%. Combination of these black and white lines will create an inset effect.

Step 19

In the middle of the buttons, draw some white dots.

Step 20

Draw a white rectangular shape on the middle of the buttons. Add Layer Style Gradient Overlay.

Step 21

Draw an elliptical selection on top of the shape. make new layer and then fill it with white. Remove selection (Ctrl + D) and soften it with Gaussian Blur (Filter > Blur > Gaussian Blur). Reduce Opacity and then erase both its end using a very soft Eraser tool.

Step 22

Activate Brush tool and set foreground color to white. Draw subtle highlight on Wacom corner. This subtle highlight will add realism onto the shape.

Step 23: Shadow

Ctrl-click wacom basic shape to make new selection based on its shape.

Step 24

Make new layer and place it under all layers. Fill selection with black and then remove selection using shortcut Ctrl + D. Soften the shadow using Gaussian Blur (Filter > Blur > Gaussian Blur).

Step 25: Label

Draw a rectangle under the pad. You can use any color, it doesn’t matter.

Step 26

Activate pen tool. Click on the rectangle to add new layer. Pull new point down. What we want here is a natural label shape.

Step 27

Grab fabric texture and place it above the label shape. Convert it into Clipping Mask by pressing Ctrl + Alt + G. This way, the texture will stay inside the label area.

Step 28

Make new layer and and convert it to Clipping Mask. Use soft brush tool to paint subtle highlight and shadow on the label. Because the layer has been converted into a Clipping Mask, anything you paint will goes inside the label. Draw black rectangle and put it behind the label. As you can see below, the label appears very natural.

Step 29

Make new layer above the label. Paint subtle shadow from the Wacom on the label.

Step 30

Add white text on top of the label.

Double click text layer and drag black slider on Underlying layer option to the middle.

This slider will bring up black pixel from layers underneath it. The result is natural looking text.

Step 31: Cable

Draw a black rectangle under the pad. Activate pen tool and click on the path to add new points. Drag new points until we have a natural looking cable.

Double click layer and add Layer Styles Bevel and Emboss.

Step 32

Ctrl-click cable to make new selection based on its shape. Move selection down a few pixels by pressing down arrow. Make new layer under the cable and fill selection with black.

Step 33

Soften the shadow by adding filter Gaussian Blur.

Step 34

Erase some part of the shadow to make it appears more realistic.

Step 35: Pen

We have finished drawing the pad, let’s move on to work on the pen. To prevent it from distracting our work, put all layers into a new group and click eye icon on front of it to hide the pad.

Activate pen path and hit Ctrl + Enter to convert it into selection. Make new group layer and then click Add Layer Mask. Next, we will draw the pen inside this group layer.

Step 36

Activate pen main path. Click Add Adjustment Layer icon and select Solid Color. Set its color to #1b1c1e. Double click layer and add Layer Style Gradient Overlay.

Step 37

Use Brush tool to draw highlight on outer side of the pen. Reduce its Opacity to 40%.

Step 38

Draw a rounded rectangle on its center with color #141517.

Step 39

Ctrl-click shape we have just created. make new layer and fill it with white.

Step 40

Move selection up by pressing up arrow key a few times. Hit Delete key.

Click Select > Deselect to remove selection. Soften the highlight by adding filter Gaussian Blur.

Step 41: Pen button

Draw a rounded rectangle and set its color to #1d1e20.

Add Layer Styles Drop Shadow, Bevel and Emboss, and Gradient Overlay to change the button appearance into 3D.

You can see the result below.

Step 42

Zoom in using Zoom tool to see details on the button. Set foreground color to white. Activate Brush tool with radius 1 px. Paint subtle highlight on the button edges.

Step 43: Eraser

Draw a rounded rectangle with color #141517 for pen eraser. Put it under all shapes.

Add Layer Style Inner and Gradient Overlay.

Step 44

Make new layer above the eraser. Paint pen shadow on the eraser using soft brush.

Step 45

Use Zoom tool to see details on the eraser. Draw some subtle highlights using 1 px brush.

Step 46

Our current pen has no proper lighting. So, let’s add one. Our light source is located on top right of the pen. Activate brush tool and paint highlight on the pen.

Step 47: Pen Tip

Draw a small black rectangle on top of the pen. Make new layer and then paint a small highlight on the tip using 1 px brush.

Step 48: Shadow

Remember that our pen is located in a group layer with layer mask. We made the group layer in Step 35. Now, we need to make pen shadow outside the group layer. Ctrl-click pen path to convert it to selection. Press left arrow key a few times to move the selection. Make new layer and place it under pen group layer. Fill selection with black. Remove selection using shortcut Ctrl + D or click Select > Deselect.

Step 49

Click Filter > Blur > Gaussian Blur to soften the shadow.

Step 50

Activate Eraser tool and set its Hardness to 0%. Erase top and bottom part of the shadow to make it realistic.

Step 51

We’ve done drawing the pen. Let’s bring back the pad.

Step 52: Rotating the Pen.

let’s rotate our pen position to make it natural. Activate pen shadow layer and pen group layer. Hit Ctrl + T to perform transformation. Drag outside the transformation frame to rotate the pen.

Final Result

Here is the final result of our drawing tutorial. Click on the image to see it in full size.

Download Source

Preview

This is the final result of our realistic drawing tutorial.

In this tutorial, we will draw its wireframe in Illustrator.

Step 1: Pad

Make new file in Illustrator. Activate Rounded Rectangle tool and then click once on canvas. In the next dialog box, set Corner Radius to 2 mm. By doing this, we have just set amount of radius corner on every new rounded rectangle created onward. After clicking OK, you will have new rounded rectangle. You can simply delete it.

Step 2

Click and drag to make new rounded rectangle. Set Fill and Stroke to white and black.

Step 3

Next, we need another rounded rectangle with Corner Radius 10 mm. To do this, click once and set its Corner Radius to 10 mm. Delete created rounded rectangle shape.

Step 4

Draw a rounded rectangle right on top of the previus rounded rectangle. See picture below to see their positions.

Step 5

Select both shapes and then click Unite on the Pathfinder panel.

Now, we have a combination of two rounded rectangles. Its left side has corner radius 10 mm and its other side is 2 mm. This is going to be the wacom basic shape.

Step 6

Inside the rounded rectangle, draw smaller rounded rectangle with corner radius: 5 mm.

Step 7

Activate pen tool and then click indicated points on left side of the rounded rectangle to remove it. Alt-click remaining two points to convert them to corner point. Now, we have a half rounded rectangle shape.

Step 8

Drag left line segment until it snaps on left edge of the bigger rounded rectangle.

Step 9

Draw repeat previous steps to draw another haft rounded rectangle shapes.

Step 10

Draw some rectangles for Wacom buttons.

Step 11

Draw two small rectangles for cable and label.

Step 12: Pen

Activate rounded rectangle tool. Click once on canvas and set Corner Radius to 1 mm. Delete created shape.

Step 13

Draw pen basic shape. Click middle top line to add new point and click the other two points to remove it. Drag the remaining two points down until we have a triangle on top of the shape.

Step 14

Make sure you still have pen tool active. Shift + Alt -drag indicated points below to convert the triangle into an ellipse.

Step 15

Draw a small rectangle on top of the pen for its tip.

Step 16

Draw a rounded rectangle on lower part of the pen for its eraser.

Step 17

Finally, draw two rounded rectangles on center of the pen.

Final Result

Here’s our finish path. In our next tutorial, we will convert it into a realistic image using Photoshop.

Step 1: First Page — Setup Document

First, download 960 grid template from 960.gs. Inside the downloaded zip file, you will find a Photoshop action file (*.atn). Double click it to load into Photoshop.

Step 2

First, download 960 grid template from 960.gs. Inside the downloaded zip file, you will find a Photoshop action file (*.atn). Double click to load it into Photoshop. Return to Photoshop, inside Actions panel you will find new group named 960 GRIDS. Select 12 Column Grid and click play button.

This action will automatically created a new file in standard 960 grid system, complete with guides to help you design.

Step 3: Set Up Background

Create new group and name it Background. We will put all background element here. Create new layer and fill it with color #be58d5.

Step 4

Grab sun picture and paste it on top left of the background. Set layer Opacity to 46%

Step 5

Paste octopus picture onto the background.

Step 6

There is a problem with this octopus. If you zoom closer, you will find that there is a 1 px white line along its edge. No need to worry, there is a nice tip to fix this.

Step 7

Ctrl-click octopus layer to create new selection based on its shape. Click Select > modify > Contract.

Use Contract By 1 px..

Click Add layer mask icon. This process will hide white pixel on the octopus edge.

Step 8

Ctrl-click octopus layer. Create new layer underneath it. Fill selection with black.

Remove selection by pressing Ctrl + D. Soften the selection by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Use eraser tool to delete upper part of the layer. Now, we should have octopus shadow on the floor.

Step 9

Ctrl-click octopus layer. Make sure marquee tool is still active, right click and choose Transform Selection.

Right click and choose Skew.

Pull top middle handle until the selection is skewed. See picture below for reference.

Step 10

Fill selection with black.

Remove selection (Ctrl + D). Click Filter > Blur > Gaussian Blur.

Delete lower part of the layer.

Set layer Opacity to 20%.

Step 11

Select top part of the site. Create new layer and fill it with #obobob.

Step 12: Logo

Draw an ellipse shape with color #333333.

Draw another ellipse and set its mode to Add to Shape.

Repeat this process a few times until we have clouds shape for the logo background.

Add following Layer Style.

Step 13

Add site name on top of the clouds. Add following Layer Styles.

Step 14: Site Description

Add site description and give it this Layer Styles.

Step 15: Step 1 Interface

Draw a rounded rectangle with radius 10 px and color #ebebeb. Add Drop Shadow.

Step 16

Add text. Draw a circle with same color as the background. Add Inner Shadow.

Step 17

Add number 1 inside the circle and add following Layer Styles.

Step 18

Draw a white rectangle. Add Stroke.

Step 19

Add city name inside the rectangle. On its opposite side, draw a white rectangle shape. Add following Layer Styles.

Step 19

Activate polygon tool. From the Option Bar set Sides to 3 to get a triangle. Draw a black triangle on top of the rectangle.

Step 20

Draw a rounded rectangle with radius 10 px.

Step 21

Draw another roundd rectangle for continue button. Add following Layer Styles.

Step 22

Add text “continue” on top of the button. Add Drop Shadow.

Step 23

Draw a circle shape next to the continue text.

Draw a rounded rectangle. Hit Ctrl + T to perform transformation and rotate it 45 degree.

Repeat previous step but this time rotate -45 degree. Combine both shapes until we get an arrow symbol.

Step 24

Create a rounded rectangle under the continue text.

Draw a rectangle covering half of the rectangle shape. This shape indicates that the process is only halfway and not yet finish.

Step 25: Step 2 Interface

Repeat the same process to create Step 2 interface. You can easily copy the first interface and modify it.

Step 26: Landing Page — Set Up Background

Next, we need to create landing page. User will go to this page after finishing Step 2. Use 960 grids actions to create new 12 column file. Fill background with #be58d5. Add sun ornament on background with Opacity 46%.

Step 27: Top Menu

Fill top part of the file with black and add some site menus.

Step 28

We need to differentiate active menu from the others. Draw a rectangle and fill it with #333333 and put it behind active menu.

Step 29

Draw a 2 px under the menu to add contrast with its background.

Step 30: Content

Draw a rounded rectangle for the page content.

Step 31

Add post title, product image, and some description. Leave empty room on left side of the page to add price info.

Step 32: Buy Ribbon

Draw a tall rectangle on left side of the content page with color #fbc5ff. On top of it, draw another rectangle with color #9928b3 to be used as a price ribbon.

Step 33

Create new layer above the ribbon and paint highlight on top of it using a big soft brush (Hardness: 0%).

Step 34

Activate single row marquee and draw a 1 px selection on top of the ribbon.

Hit Delete key to delete 1 px highlight on the ribon.

Step 35

Ctrl-click ribbon layer to create a new selection based on its shape. Click Select > Modify > Contract. Set parameter to 2 px.

Create new layer. Click Edit > Stroke. Set Width to 2 px and Location to Inside.

Change layer opacity to 30%.

Step 36

Activate text tool and write item’s price. Add Drop Shadow and Outer Glow.

Step 37: Buy Button

Draw a big blue rounded rectangle. Add following Layer Styles.

Step 38

Add text “Buy!” and Drop Shadow to keep it legible.

Step 39

Draw a rectangle with color #9928b3. Put it under the ribbon. Select left lower corner and pull it up.

Add Gradient Overlay.

Step 40: More Content

Add another rounded rectangle to add more post content.

Step 41

Draw a rectangle with color #fbc5ff on right side of the shape. Convert layer shape to Clipping Mask by pressing Ctrl + Alt + G.

The rectangle will goes inside the content shape.

Step 42

Insert some text for the content.

Step 43: Button

Draw a rounded rectangle on end of the post with color #eb582c. Add following Layer Styles.

Step 44

Add text on the button. Apply Drop Shadow to make the text legible.

Step 45: Sidebar

Add some content on the sidebar.

Step 46

Using same method, add another sidebar on the top content.

Step 47

Finally, add simple content for the footer. Use same color background as the top menu explained on Step 27 above.

Final Result

Below is the final result of all three designs we have created. Click on the image to see it in full screen. Don’t miss the second part of this tutorial. We will code this design and turn it into a functional HTML/CSS complete with its sliding jQuery.

Download Source File

Download PSD File

Step 1: Set Up Document

We will use 960 grid in this design. So, our first step is download the file from 960.gs.

Step 2

Inside the file, you will find an action file, 960_GRIDS.atn. Double click it to load it into Photoshop.

Step 3

In Photoshop, open panel Actions. Inside group 960 GRIDS you will find some actions. Select 12 Column Grid then click Play icon to start creating a new canvas.

Step 4: Layer Structure

Before starting the design process let’s take a look at the layer structure of the final file. A clean organized layer will help the process of transferring the design. If you are still new with organizing layer, you can learn more about this in Photoshop Etiquette.

Step 5: Background

Create a new layer and name it Background. Fill layer with white. Let’s just leave it like this for now. We’ll work on this again later.

Step 6: Change Canvas Size

We need more room on the canvas. Click Image > Canvas Size. Change the height to 923. Click OK.

Step 7: Logo

Create new group layer and name it Logo. Grab a logo for the site. I’m using a magnify glass icon from PSDfreemium and rotate it 45 degree. Place the logo on top left corner.

Step 8

Next to the logo, add site’s title. Add following Layer Style.

Step 9

Add tagline under site’s title and add this Layer Style to give it letterpress effect.

Step 10

Create new layer and draw two 1 px horizontal line.

Step 11: Main Menu

Create some text for the main menu and place it on top left of the site. Set its alignment to align right.

Step 12

We need to diferentiate active menu, in this case HOME. Draw a rounded rectangle, place it under the text. Set its color to #d9d7d7.

Step 13

Change active menu text color to white.

Step 14: Site Intro

Create new layer group and name it Content. Inside it create another layer group for site intro.

Step 15

Activate type tool then click and drag to create a text box. Set its alignment to center.

Step 16

Add this layer style on the text to give it letterpress effect.

Step 17

Activate line layer that we have created on Step 10. Activate tool move, Alt-drag to duplicate the lines. Delete right part of the lines. We are going to use it for sidebar.

Step 18

Use eraser tool to delete part of the lines indicated below.

Step 19

Let’s add a classic ornament onto the design. I’m using a nice vector barroque ornaments from WeGraphics. Open this shape on Illustrator. Select it and hit Ctrl + C.

Step 20

Return to Photoshop. Hit Ctrl + V, paste it as smart object. By saving it as Smart Object, we can retain its quality.

Step 21

Resize the ornament and place it in the middle of the line.

Step 22: Photos

Create new group layer and name it Photos.

Step 23

For the first photo, create new layer group and name it Photo-1. Draw a rectangle shape, color: #f7f7f7.

Step 24

Add subtle stroke and pattern by adding these Layer Style. For the pattern, I’m using minimal pattern from WeGraphics.

Step 25

Paste photo thumbnail with size 185 x 170 px. Place it on the middle of the rectangle.

Step 25

Add title under the photo and add this layer style.

Step 26

Create a rectangular selection and fill it with black. We are going to use it as a shadow.

Step 27

Remove selection by pressing Ctrl + D. Soften the shadow by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Step 28

Hit Ctrl + T.

Step 29

Right click and choose Warp.

Step 30

Pull bottom center section up. See picture below for reference.

Step 31

Reduce shadow opacity to 10%.

Step 32

Make sure tool move is active. Alt-drag to duplicate Photo-1 group.

Step 33

Replace the photo and update its title.

Step 34

Keep repeating this process until we have six photos for the site’s content.

Step 35: Navigation Button

Create another group layer and name it prev-next. We’ll put buttons for navigation here.

Step 36

Create a rounded rectangle and add following Layer Styles.

Step 37

Activate polygon tool, on the option bar set sides to 3. Click and drag to create a triangle on top of the button.

Step 38

Label it Previous Photos.

Step 39

Repeat the same process to create Next Photos button.

Step 40: About Me

Let’s start working on the sidebar. Create new layer group and name it Sidebar. Our first component is information about the author. Create another group layer and name it About Me.

Step 41

Create a text box and add the title. Make sure the length of the text box is 3 columns and the text is aligned center.

Step 42

Draw a 1 px line under the title.

Step 43

Insert a profile picture with size 80×80 pixel.

Step 44

Next, we will add text warping the picture. We can’t just add text box because by default text box in Photoshop doesn’t support warping. First, create a rectangular path. Click with pen tool to add points and modify it until we have the path’s shape warping the profile picture. See picture below for reference.

Step 45

Activate type tool and click inside the path. You can see that the cursor is now changing, indicating that the text will be warped inside the path. Write a short description inside the path.

Step 46: Social Network Icons

Create new group layer and name it Connect.

Step 47

Create title and a line underneath it.

Step 48

Here, I’m using another icon from WeGraphics. Place icons. No need to worry about its alignment, we’ll fix it latter. For now, just make sure the first and last icon are snapped onto the grid.

Step 49

Select all layer icons by clicking on the first layer then Shift-click the last layer icon.

Step 50

Activate tool move. Click align vertical centers and distibute horizontal centers icon. These two icons will automatically fix the alignment and distribution of all icons.

Step 51: Search

Create new layer layer group for search box.

Step 52

As usual, add title and a line underneath it.

Step 53

Draw a rectangle. Make sure the box’s width is matched to the column’s width. Add Layer Style Inner Shadow.

Step 54: Categories

Create new group layer for categories. Write list of the photo categories.

Step 55

Photoshop does not support bullet list. So, we need to build it manually. Create a circular selection on front of the list and fill it with color #cbcbcb.

Step 56

Repeat this for the other items.

Step 57: Blog list

Repeat previous step to create list of blog posts.

Step 58: Footer

Draw a rectangle on bottom of the site. Make sure that left, right, and lower side of the rectangle are outside the canvas. For the color use #f4f4f4. Add a subtle Layer Style Stroke.

Step 59

Write copyright info in the middle of the footer.

Step 60

Okay, we are almost done with the design. Let’s step back and see the result so far.

Step 61

Below is the top left section in 100% view.

Step 62: Background Texture

Currently the background is plain white. So, let’s working on the background’s texture. Again, grab a nice minimalist pattern from WeGraphics. We’ll add a subtle red color onto the texture by adding adjustment layer Hue/Saturation. Click Add Adjustment Layer icon and select Hue/Saturation.

Step 63

Use following settings.

Step 64

Hit Ctrl + E to merge adjustment layer and the pattern. Hit Ctrl + A to select all pixels, click Edit > Define Pattern to save selection as a pattern.

Step 65

In the next dialog box, you can name the pattern. Make sure to save this bacground, we’re going to use it in the next tutorial.

Step 66

Let’s return to our design. Make sure layer background which we created earlier in Step 5 is selected.

Step 67

Click Edit > Fill. Select Use: Pattern and pick pattern we have just created earlier.

Final Result

Okay, it’s a wrap! We’re done with the design. Hit Ctrl + H to hide all the guides then hit F twice to see the result in full screen.

Below you can see the final result. Click on the image to see it in full screen. Stay tuned for part two of this tutorial, we will code this design into HTML/CSS.

This is 100% view of the top left section.

Download File Source

Download PSD File (2,86 MB)

Step 1: Create a 3D Ball

Our first step is creating a 3D ball. Let’s start by creating a new file with size 512×512 px. Draw a circle on its center. You can see any color you want, it doesn’t matter. We will change it using layer styles.

Step 2

Double click layer shape to open Layer Style dialog box. Add Inner Shadow, Outer Glow, Inner Glow, and Gradient Overlay.

Step 3

I believe we will have this result.

Step 4

Ctrl-click circle shape to create selection based on its shape. Create new layer and paint lower part of the ball with black. Use a very big and soft brush, hardness: 0%.

Step 5

Create new layer and draw a radial gradient from white to transparent.

Step 6

Create an elliptical shape, reduce its Fill to 0%. Add layer style Gradient Overlay from white to transparent and set its blend mode to Screen. This will add a highlight to the ball.

Step 7: Adding World Map

We’re done with the 3D ball. Now, we need to add the continent map. Drawing this manually takes more time and skill. So, we’ll use a nice free vector stock from Vector Open Stock. You can download the stock from Vecteezy. Open the file in Illustrator. We will use vector map from bottom right artwork.

Step 8

Double click shape. Select the dots shape and delete it. This will left us with the map only.

Step 9

Select the continent maps and hit Ctrl + C to copy it.

Step 10

Paste the vector map to Photoshop (Ctrl + V). Click Add Adjustment Layer icon and select Solid Color. Use #005d2c for its color. Copy path from our first circle and paste it onto the map. Select Intersect from option bar.

Step 11

Add Gradient Overlay with this settings.

Step 12

Let’s duplicate continent map layer shape. Change its color to lighter green. Select all continents path, without selecting the circle path, and move it 5 pixel up and 5 pixels left. Next, select circle path only and resize it to 101%. This will add extra tickness to the continent and make it not so flat.

Step 13

This is our globe so far. There’s something wrong with its perspective. If you notice the emboss effect on the continents, it seems flat.

Step 14

Activate lower continent map. Select some of the points using Direct Selection Tool and move them until we have correct perspective. You can see the difference before and after moving some of the points.

Step 15

Activate topmost continent map and add layer style Gradient Overlay.

Step 16

Ctrl-click its thumbnail layer and create new layer.

Step 17

Paint outer part of the selection with black. Use big and soft brush (Hardness: 0%)with low opacity (20%).

Step 18

Let’s add more highlight onto the map. Create an elliptical selection. Add new layer. Fill selection with white to transparent gradient. Deselect and give it a Gaussian Blur (Filter > Blur > Gaussian Blur) with big radius.

Step 19: Draw Shadow

Create new layer and place underneath all layers. Draw an elliptical selection. Create new layer, fill selection with black. Deselect. Soften it by adding Gaussian Blur (Filter > Blur > Gaussian Blur).

Step 20: Draw Background

Activate Background layer. Draw a radial gradient from white to #c7c7c7.

Step 21

Duplicate layer by pressing Ctrl + J. hit Ctrl + T and transform layer. See picture below for reference.

Final Result

Here’s our final result. I hope you like it.

Preview

Before we continue, please take a look at what we’re creating below. Looks interesting? Good. Let’s move on to the tutorial.

Step 1: Drawing G5 Side

Start by drawing a gray rectangle. Activate pen tool then add some points on its top and bottom. See picture below for reference.

Step 2

Select middle points, hit Ctrl + T and pull it closer.

Step 3

Hold Ctrl and move top left and bottom corner until we have a nice perspective view.

Step 4

Using pen tool modify points on each corner. See picture below for reference.

Step 5

Create new layer, hit Ctrl + Alt + G to convert it to Clipping Mask. Paint white on top left and left side to add highlight. Paint black on bottom corner to add shadow.

Step 6

Double click shape layer to open Layer Style dialog box. Add Gradient Overlay.

Step 7: Front face

Let’s draw front face of the iMac G5. Draw a rounded rectangle shape. Inside it, draw another smaller rounded shape and select Subtract from option bar.

Step 8

Hit Ctrl + T, place it next to the iMac. Right click and choose Perspective, move top right corner until we have a nice perspective view. See image below for reference.

Step 9

Add layer style Gradient Overlay to add highlight on the shape.

Step 10

We still need to add more highlight and shadow. Create new layer and convert it to Clipping Mask (Ctrl + Alt + G). Paint indicated areas with black.

Step 11

Duplicate shape and transform it to smaller size and put it behind.

Step 12

Draw a rounded rectangle. Use pen tool to delete indicated points. Convert points on left side to corner using Convert Point Tool.

Step 13

Perform another perspective transformation until we have the shape in the right place.

Step 14

Let’s add another highlight and shadow. Create new layer and convert it to Clipping Mask (Ctrl + Alt + G). paint top and lower areas with black.

Step 15

Add highlight by painting white using soft brush.

Step 16: Add Dots Pattern

Create a new file with size: 30×30 px. Create two circle selection and fill it with black. Click Edit > Define Pattern to save it as a pattern.

Step 17

Create new layer. Click Edit > Fill, choose Use: Fill and select dots pattern we have just created.

Step 18

Perform another perspective transformation to place the pattern on the front face.

Step 19

Ctrl-click front face shape layer to create a selection based on its shape. Click Add Layer Mask icon. Now, the pattern is perfectly inside the shape.

Step 20

Create new layer. Draw a marquee and fill it with reflected black to white gradient.

Step 21

Hit Ctrl + T, right click and choose Skew. Transform the shape until it fit perfectly on lower side of the front face. Change its blend mode to Overlay. Ctrl-click front face shape and click Add Layer Mask icon. Reduce its opacity to 20%.

Step 22

Repeat previous step and apply it to top face. This time use bigger Opacity, 80%.

Step 23

Let’s add 3D effect on the face. Draw a rounded rectangle (a). Inside the rounded rectangle draw smaller rounded rectangle path and select Subtract from the option bar (b). Perform another perspective transformation, see picture c for reference.

Step 24

As you can see in close up picture below. This thin shape add 3D effect.

Step 25

Add Gradient Overlay to give the shape highlight and shadow.

Step 26

Draw a rectangle shape. Hit Ctrl + T, right click and select Skew. Transform it until it match the front face perspective. You need to move lower right corner to make sure its perfectly match to the front face. Double click the shape to open Layer Style dialog box and add IIner Shadow, Gradient Overlay, and Stroke.

Step 27: Add Apple Logo

Search for apple logo, you can find it easily in google image. Trace it in Photoshop manually using pen tool. After finish, you can just delete the image. Use black for its color.

Step 28

Perform perspective transformation, do it until the logo it is perfectly placed on iMac G5 side.

Step 29

Double click its layer shap to open Layer Style dialog box. Activate Bevel and Emboss with these settings.

Step 30

Reduce its Fill layer to 7%.

Step 31: Add Shadow

Activate big soft brushes and paint a big black shadow underneath the iMac. No need to be accurate on this, you can see the shadow I draw below.

Step 32

Click Filter > Blur > Gaussian Blur to soften the shadow. Use big radius to make the shadow is very soft. Reduce its opacity to 20%.

Step 33

Now, we need to add another shadow right under the iMac. Paint indicated areas below with black. This time make sure you use harder brush. Finally, duplicate the shadow layer (Ctrl + J), and add a very big Gaussian Blur.

Final Result

Here, you can see our finish drawing. I hope you like it. If you have any questions, fee free to ask in the comment area below. I’d be glad to answer it.

Chanel

Polo Ralph Lauren

Louis Vuitton

Givenchy

Tommy Hilfiger

Juicy Couture

Lacoste

Gap

Brooks Brothers

Preview

First, let’s take a look at icon we will be creating.

Step 1

Create a new file with size 2.300 x 3.000 pixel. You may say this is too big for an icon, this is just how I work in Photoshop. I prefer to start with big image and then resize the final result to smaller size. This way, I can focus more on the details. Let’s start by adding guides to help us placing the battery.

Step 2

Activate rectangle tool and draw a rectangle shape. Make sure to select shape icon in the option bar. Use the guide to make it snap into place.

Step 3

Activate ellipse tool. This time select path and add path in option bar. Create an ellipse shape on top an bottom of the rectangle.

Step 4

Create new layer and fill it with #e0c400. Hit Ctrl + Alt + G to insert the color into the battery shape.

Step 5

Select one of the ellipse path we created in step 3 and hit Ctrl + C. Open Paths Panel, click new panel icon and paste the path (Ctrl + V). Move the path and place in lower part of the battery (1). Convert path to selection by pressing Ctrl + Enter (2). hold Shift and select upper part of the battery using rectangular marquee tool (3). Press Delete (4).

Step 5

Once again, create new layer. Fill it with color, place the ellipse (1). Convert path to selection (2). Hold Shift and select lower part of the battery (3). Press Delete (4).

Step 6

Create new layer. Using elliptical marquee tool select top part of the battery. Fill it with white. Remove selection by clicking Select > Deselect. Reduce opacity to 45%.

Step 7

Draw an ellipse smaller than top of the battery. Add Inner Shadow and Gradient Overlay. Use settings shown below.

Step 8

Let’s draw the battery’s brass cap. Draw a rectangle shape. and add an ellipse path underneath it. Add layer mask. Activate soft brush tool and paint indicated areas below with black. Add Gradient Overlay

Step 9

Create new layer and paint some shadow. See image below for reference.

Step 10

Create an ellipse shape on top. Add layer styles Inner Shadow and Gradient Overlay.

Step 11

Add layer mask. Activate brush tool. Set foreground color to black. Paint its edge to soften it.

Step 12

Select the battery’s front side. Create new layer and fill it with any color. In Layers Panel change Opacity to 20% and Fill to 0%. Add Layer Style Gradient Overlay.

Step 13

Let’s create the battery’s name. I use a simple text here.

Step 14

On lower part of the battery, draw a red circle shape. On top of it create a white rectangle.

Step 15

Repeat the same process, this time to create positive sign.

Step 16

Create a rectangular selection. Create new layer and fill it with any color. Change Opacity to 50%. We only need this shape to help us warp the name and signs.

Step 17

In Layers panel, select battery’s name, both signs, and rectangle shape layers. Right click and choose Convert to Smart Object. Press Ctrl + T to do transformation.

Step 18

Click warp icon on option bar. Select Warp: Arch and change the blend value until selected layers warps into the battery’s side.

Step 19

After finish with the warp process, we can just remove the rectangle shape. Double click the Smart Object layer to edit it. If you find this dialog box, just click OK.

Step 20

The smart object will be opened in a new window. Delete the rectangle shape layer. Save file and close.

Step 21

The content of smart object layer will automatically updated and you will have this.

Step 22

Let’s make the gold parts more shiny. To do this, first select them then create a new layer. Fill the layer with any color. Fill it with any color. Change Opacity to 20% and Fill to 0%. Add Gradient Overlay.

Step 23

Now, we need to create the shadow. Place ellipse path we have from previous step. Convert it to selection by pressing Ctrl + Enter.

Step 24

Fill the selection with black. Click Select > Deselect. Click Filter > Blur > Gaussian Blur.

Step 25

We need to add another bigger shadow. Duplicate previous shadow and fill it with black.

Step 26

We’re done with the base shadow. Let’s add another shadow. Create new layer. Use polygon lasso tool and create a shadow shape behind the battery. Fill it with black. Add Gaussian Blur to soften the shadow. Reduce layer’s opacity to 30%. Add layer mask and paint the farthest shadow with black to hide it.

Step 27

And congratulations! We just made ourself a battery icon. I hope you enjoy this tutorial and learn few techniques. If you have any questions, feel free to write it in the comment form below.

I hope this template can be useful for your web projects.