How to Make Delicious French Fries Icon – Photoshop Tutorial

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:

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.

How to Make a Delicious French Fries Icon in Photoshop

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

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop

Here’s the result.

How to Make a Delicious French Fries Icon in Photoshop
Step 2

Draw potato’s side.

How to Make a Delicious French Fries Icon in Photoshop

Add following Layer Styles.

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop

This is the result.

How to Make a Delicious French Fries Icon in Photoshop
Step 3

Finally, draw its upper part.

How to Make a Delicious French Fries Icon in Photoshop

Add following Layer Styles.

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop

We have one french fries now.

How to Make a Delicious French Fries Icon in Photoshop
Step 4

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

How to Make a Delicious French Fries Icon in Photoshop
Step 5: Bucket

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

How to Make a Delicious French Fries Icon in Photoshop
Step 6

Draw stripes with color #a60101 and #ff0302.

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop

Reduce Opacity to 40%.

How to Make a Delicious French Fries Icon in Photoshop
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).

How to Make a Delicious French Fries Icon in Photoshop
Step 9

Repeat previous process to upper part of the bucket.

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop

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

How to Make a Delicious French Fries Icon in Photoshop
Step 11

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

How to Make a Delicious French Fries Icon in Photoshop

Add Inner Shadow with this setting.

How to Make a Delicious French Fries Icon in Photoshop

Here’s the result.

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop

Add Gradient Overlay and Inner Glow.

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop

Here’s our result.

How to Make a Delicious French Fries Icon in Photoshop
Step 14

Draw red polygon for left side of the bucket.

How to Make a Delicious French Fries Icon in Photoshop

Double click layer and add Inner Shadow.

How to Make a Delicious French Fries Icon in Photoshop
Step 15

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

How to Make a Delicious French Fries Icon in Photoshop
Step 16

Click Filter > Noise > Add Noise.

How to Make a Delicious French Fries Icon in Photoshop

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

How to Make a Delicious French Fries Icon in Photoshop
Step 17

Draw yellow horizontal stripe on the bucket side.

How to Make a Delicious French Fries Icon in Photoshop

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

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop

Here’s the result.

How to Make a Delicious French Fries Icon in Photoshop
Step 18

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

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop
Step 20

Repeat this to step to draw another highlight.

How to Make a Delicious French Fries Icon in Photoshop
Step 21

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

How to Make a Delicious French Fries Icon in Photoshop

Add Gradient Overlay.

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop

Add following Layer Styles.

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop

This is the result.

How to Make a Delicious French Fries Icon in Photoshop
Step 23

Draw other side of the bucket.

How to Make a Delicious French Fries Icon in Photoshop

Add following Layer Styles.

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop
Step 24: Add Potatoes

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

How to Make a Delicious French Fries Icon in Photoshop
Step 25

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

How to Make a Delicious French Fries Icon in Photoshop
Step 26

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

How to Make a Delicious French Fries Icon in Photoshop

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

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop
Step 28

Paint more highlight on its other sides.

How to Make a Delicious French Fries Icon in Photoshop
Step 29: Logo

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

How to Make a Delicious French Fries Icon in Photoshop

Double click layer and add Drop Shadow.

How to Make a Delicious French Fries Icon in Photoshop

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

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop
Step 31

Add following Layer Styles onto the text logo.

How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop
How to Make a Delicious French Fries Icon in Photoshop

Below is the result.

How to Make a Delicious French Fries Icon in Photoshop
Step 32

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

How to Make a Delicious French Fries Icon in Photoshop
Step 33: Background

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

How to Make a Delicious French Fries Icon in Photoshop
Step 34: Shadow

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

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop
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.

How to Make a Delicious French Fries Icon in Photoshop

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

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail