Create in Photoshop icons in the style of Pixel Art

Start your day with pixel art breakfast! After drawing these delicious images in Photoshop, you can use them as desktop icons, avatars or game icons. You will learn the basics of creating shape, smoothing edges and choosing colors.

1. Grill the bread!

Step 1

We begin with a simple – external form of toast. Create new document at Adobe Photoshop. For pixel art, I choose the size 200x200 and install transparent (transparent) background. Using the tool Pencil (Pencil tool) (B) size in 1 pixel, Start drawing the following:

one. Seven pixels horizontally.
2. By to one pixel diagonally on each side.
3 eleven pixels on each side, forming the rest of the toast. Round the edges by drawing over two pixel diagonally on each side. Ten down on both sides and you can proceed to the central part of the toast.
four. Two way down, one diagonally, 20 down each side.
five. Two way down, two horizontally to slightly round the bottom edges.
6. Connect the two sides by drawing 23 pixel horizontally.

Step 2

For drawing bread, I used four colors:
Dark brown for external lines: R: 108 G: 013 B: 003.
Medium brown for the outer part of the crust: R: 182 G: 090 B: 020.
Brown for the rest of the crust: R: 214 G: 123 B: 027.
Tan brown for the central part of the bread: R: 250 G: 211 B: 127.

Medium brown place near the edges of the toast. Brown will be the inner boundary of the crust. Now use the tool Fill (Paint Bucket) (G) to fill the rest of the bread yellow brown color.

Step 3

1. This toast will not be ready without a piece of melting butter. Create new layer on the layers panel before drawing oil.
2. Use bright yellow color to draw the shape of a melting butter tool Pencil (Pencil tool).
3. The edges of the oil should be marked with the brown colors that we used in the last step.
4. Pay attention to how the darkest colors are added at the corners and vertical edges.
5. Place a piece of butter in the center of the toast.
6. White and light cream colors are used for light spots on bread and butter.
7. Take dark brown color for Pencil (Pencil), lower opacity (opacity) to 30-50%. Circle the toast along the contour, making it darker at the corners to soften the strict edges.

2. Cooking waffles!

Step 1

The shape of the waffle is quite simple: a square with rounded corners. I start from the corners by drawing two pixels diagonally, so we keep the square shape of the waffle. Then added two pixel horizontally one diagonally, two vertically.

Step 2

As the main color of waffles, I chose R: 241 G: 180 B: 99. Shadow colors: Brown and Medium brown (from the second step in drawing toasts). On the layers palette, I create New layer and draw small squares 6 to 6 pixels, but without angular pixels, creating a waffle texture.

Step 3

In this picture it will be easier To copy (Ctrl + C) and Insert (Ctrl + V) repeating elements, evenly placing them inside the wafer. Use tan brown color to brighten the area around the waffle texture, and medium brown to create depth.

Step 4

Draw a piece of butter and smooth the edges of the wafer by making a dark stroke using Step 3 from drawing toast.

3. We bake cookies

Step 1

The shape of the cookies is also simple: a rectangle with rounded edges (two pixel vertically, two horizontally), but the upper right corner is made from six diagonal pixels, this will be the bitten off part of the cookie.

Step 2

Like a toast, we will begin to draw cookies from the outer edges, using brown and tan brown colors. I outlined the bitten part brown, To designate this area and in the following steps to make the stuffing from confiture.

Step 3

The glaze is white, so the shadows on it will be light blue. note that
some lines are “blurred” (eng. “dithered”). Pixel-art dithering is a texture-making technique (similar to noise) to darken or brighten an area with a minimum amount of color.

Caramel crumbs are drawn as squares from four pixels or one pixel that are scattered on the surface of the glaze. Do not forget to fill the area of ​​the glaze with white color if you plan to save the file as an image with transparent areas.

The confiture filling will be bright pink with dark pink and light pink accents. Also do not forget to circle the cookie itself. dark brown color with 30-50% opacity (opacity) to soften the edges.

4. Fried eggs!

Step 1

When creating an egg, we will draw something in between a real well-done egg and a perfect circle that looks too artificial even for pixel art. Place the pixels this way:

one. Ten pixels horizontally.
2. Add by three pixel on each side of the line below, skipping one pixel.
3 Two pixel diagonally and more one diagonally.

Now you need to repeat the steps that have already been done. But first add four pixel with opacity (opacity) 50% in empty corners. Finish the circle.

Step 2

Let’s start with the yolk. For him, I used three colors:

Medium brown in the lower part: R: 182 G: 090 B: 020.
Yellow ocher On the sides: R: 255 G: 150 B: 57.
Yellow for the rest of the: R: 251 G: 208 B: 59.

Step 3

The image below may seem more complicated than it actually is. I used the same light blue color as when drawing the cookies (Step 3), but regulated its opacity for dithering and shadow creation. I do the same with dark brown for the yolk, using opacity (opacity) 20-25%, placing this layer above the rest. To add light areas I used yellow, light cream and white color.

I smoothed the edges of the frog in three steps: the corners with opacity (opacity) 50%, a couple of pixels near every corner – thirty%, and the rest is 10-20%.

5. Fry bacon

Step 1

I preferred the thick and short piece of bacon, which is different from the present in form. Otherwise, this icon would be thinner and higher than all the others, which would be very noticeable if placed next to each other.

Use Pencil (Pencil tool) to draw four pixel, then three down and left diagonally again four horizontally.

The left corner is steep, consists of six pixels vertically, four diagonally to the left seven way down, three way down, four way down.

On right three pixel right, one diagonally, six way down, two diagonally to the left four way down, eight way down.

Copy (Ctrl + C) and Insert (Ctrl + V) this upper part, then go to Edit – Transformation – Flip Vertically (Edit – Transform – Flip Vertical) and combine the resulting element with the first half. Drain these two layers (Ctrl + E). Now we will fill in the created form.

Step 2

Use the tool Fill (Paint Bucket Tool) to fill out the form brick red (R: 204 G: 0 B: 0). Draw wavy lines Pencil (Pencil tool) with opacity (opacity) 50%. Darken the edges of the bacon dark-brown color with 50% opacity.

Step 3

Add light areas to the lines using white color and opacity (opacity) 30%, 20% and 100%. To create shiny pieces, add a few pixels near the edges with 80% opacity.

Step 4

To make it easier to add a stroke around the edge, use the tool. Magic wand (Magic Wand Tool) (W) to highlight the area around the bacon. We go to Selection – Modification – Compress (Select – Modify – Contract) and set the value one pixel Invert selection (Shift + Ctrl + E). Create a new layer below the bacon layer, fill the selection. dark brown with opacity (opacity) thirty%. You can layered color in the corners to soften them. When you are satisfied with the result, drain selected layers (Ctrl + E).

Good morning! Breakfast is served!

Do not stop there, add icons of fruit, coffee, juice to your breakfast … Icons drawn in this lesson refer to an American breakfast, so if you live in another country or are passionate about another culture, I challenge you to create small icons of your delicious dishes. Focusing on the lesson, draw everything edible that is in your kitchen. Good luck in pixel art!

Like this post? Please share to your friends: