Welcome to Hongkiat Baking & Culinary Arts Class! Today we are going to teach you how to hand make a visually yummy french fries icon using just Photoshop!

Yeah, you will be learning to create delicious french fries icon with mainly some shape creations and layer styling involved, beginner baker welcomed! This tutorial will definitely make you full.

Getting Started

To follow this tutorial, you will need following resource:

• Font Ballpark Weiner from Mickey Rossi
• Font Recycle-It from Bartek Nowak

French Fries Icon

Step 1: Draw Potato

Activate pen tool. Draw potato’s basic shape and set its color to #e1cc7a. Notice that we don’t use rectangle tool, instead we use pen tool to get natural appearance.

In Layers panel, double click layer to open Layer Style dialog box. Add following Inner Shadow and Gradient Overlay.

Here’s the result.

Step 2

Draw potato’s side.

Add following Layer Styles.

This is the result.

Step 3

Finally, draw its upper part.

Add following Layer Styles.

We have one french fries now.

Step 4

Put all layers into a group. Repeat these processes to draw more potatoes.

Step 5: Bucket

Draw a red polygon shape. On top of it, add elliptical path and set its mode to Subtract.

Step 6

Draw stripes with color #a60101 and #ff0302.

Step 7

Place stripes on top of the bucket. Convert it to Clipping Mask by pressing Ctrl + Alt + G. Perform transformation (Ctrl + T) and then Ctrl-drag its corner until the stripes match the bucket’s perspective.

Reduce Opacity to 40%.

Step 8

Make new layer on top of the bucket. Paint black spot on lower part of the bucket. Convert layer to Clipping Mask (Ctrl + Alt + G).

Step 9

Repeat previous process to upper part of the bucket.

Step 10

Ctrl-click front bucket layer to make new selection based on its shape. Make a new layer and fill it with black. Add noise using filter, Filter > Noise > Add Noise.

Change layer blend mode to Screen and reduce its Opacity to 70%.

Step 11

Duplicate front bucket’s layer shape and place it above all layers. Reduce its Fill to 0%.

Add Inner Shadow with this setting.

Here’s the result.

Step 12

Let’s draw horizontal stripe on the bucket. Duplicate path of front bucket’s layer shape. Select both paths and click Combine. Both paths will be merged into a single path.

Step 13

Click Add Adjustment Layer icon and select Solid Color to convert the path into a layer shape. Select #fedd19 for its color. Duplicate path and move it down a few pixels. Set its mode to Subtract. Now, you should have a yellow horizontal stripe on the bucket.

Add Gradient Overlay and Inner Glow.

Here’s our result.

Step 14

Draw red polygon for left side of the bucket.

Double click layer and add Inner Shadow.

Step 15

Ctrl-click bucket side’s shape. Make new layer and fill it with black.

Step 16

Click Filter > Noise > Add Noise.

Set blend mode to Screen and reduce its Opacity to 60%.

Step 17

Draw yellow horizontal stripe on the bucket side.

Add Gradient Overlay and Inner Glow. The setting used here is the same as horizontal stripe on front face of the bucket (Step 13).

Here’s the result.

Step 18

Use the same technique to draw more stripes on lower part of the bucket.

Step 19

Let’s draw highlight on the bucket. Draw a white rectangle on lower part of the bucket and reduce its Opacity to 43%. In Layers panel, click Add Layer Mask icon and paint both ends with black.

Step 20

Repeat this to step to draw another highlight.

Step 21

Draw bucket’s thickness. Use red for its color.

Add Gradient Overlay.

Step 22

Next, draw back side of the bucket. We can simply duplicate front side of the bucket and move it under all layers. This time, set both its path mode to Add to Shape.

Add following Layer Styles.

This is the result.

Step 23

Draw other side of the bucket.

Add following Layer Styles.

Step 24: Add Potatoes

Alt-drag sample potatoes that we have created earlier. Put them inside the bucket. Arrange them in a natural position.

Step 25

Make black shadow between potatoes and bucket. Paint black to add bucket shadow onto the potatoes. Reduce its Opacity to 12%.

Step 26

Make new layer and individually draw shadow on each potato. This subtle shadow will add depth onto potatoes’ position.

Below, you can see gif animation showing before and after adding subtle shadow on each potato.

Step 27: Add More Highlights on Bucket

Let’s add some highlights on the bucket. Draw a white rectangle on front cover side and reduce its Opacity to 30%. Click Add Layer Mask icon and paint both edges with black.

Step 28

Paint more highlight on its other sides.

Step 29: Logo

Draw an ellipse on front face of the bucket with color: #fcbe15.

Double click layer and add Drop Shadow.

Below is the result of subtle Drop Shadow onto the ellipse.

Step 30

Add text "Hk’s" on top of the ellipse using font, Ballpark Weiner. Hit Ctrl + T to perform transformation. Hold Ctrl and drag its side to skew the text.

Step 31

Add following Layer Styles onto the text logo.

Below is the result.

Step 32

You can some more stuff onto the bucket. You can also add recycle icon using character from free font Recycle It.

Step 33: Background

Activate gradient tool. Draw a radial gradient from #f3f3f2 to #f4f5c9.

Step 34: Shadow

Use soft and small brush to draw a shadow under the bucket.

Step 35

Duplicate shadow layer by pressing Ctrl + J. Click Filter > Blur > Gaussian Blur to soften it. You may want to reduce its Opacity if the shadow becomes too dark.

Final Result + Download

Finally, this is our french fries icon. I hope you enjoy this tutorial. And remember not to eat too much french fries, it’s just not healthy! :)

Click here to download the final PSD.

(This tutorial was done in collaboration with Syarip Yunus.)