Tutorials

Create a Replica of the Legendary Game Boy Pocket in Photoshop

advertisement

In this article we’re going to create a realistic replica of the Nintendo Game Boy pocket.

Tutorial Details

  • Program: Adobe Photoshop
  • Version: CS5
  • Difficulty: Beginner/Intermediate
  • Estimated Completion Time: 2 hours

Final Result

gameboy-preview

Step 1

Create a new file in Photoshop.

gameboy-01

Step 2

Grab the Rounded Rectangle Tool (U) and draw the three shapes shown on the image below. Change the color of these shapes to #dfc243 (actually, pick any color you like). Merge these layers and name the layer “Base”.

gameboy-02

Apply the following styles.

gameboy-021
gameboy-022
gameboy-023
gameboy-024

Step 3

Duplicate this shape and turn Fill to 0%. Replace the existing styles with these ones.

gameboy-03
gameboy-031

Step 4

Create a new layer and place it before the “Base” layer. Pick the Rectangle Tool (U) and draw a very small rectangle (color: #2f2f2f). Apply the following styles and place it accordingly to the fourth image.

gameboy-04
gameboy-041
gameboy-042
gameboy-043

Step 5

Create a new layer and select the Ellipse Tool (U). Draw a tiny ellipse and add this gradient.

gameboy-05
gameboy-051
gameboy-052

Step 6

Create a new layer (above the Base layer) and draw a shape like the one created in Step 2. Change its color to #242424) and apply the following styles.

gameboy-06
gameboy-061
gameboy-062
gameboy-063

Step 7

Create a new layer and pick the Rectangle Tool (U). Draw a rectangle like the one on the image below (color: #9bab85) and apply the following Inner Shadow style.

gameboy-07
gameboy-071

Step 8

Create a new layer and select the pixels of the shape created in Step 6. Pick the Gradient Tool (G) and draw a gradient to add a random highlight effect. Change its Blend Mode to Multiply and the Opacity to 18%.

gameboy-08
gameboy-081

Step 9

Group all the layers created so far (except from the background) and name the group “Base”. Grab the Rounded Rectangle Tool (U). Set the radius to 5px and draw four rectangles (red shapes). Then pick the Rectangle Tool (U) and draw two rectangles (black and white shapes). Fill all the shapes with #2f2f2f, merge them (name the layer “Cross”) and turn Fill to 0%. Apply the following style.

gameboy-09
gameboy-091

Step 10

Duplicate this Cross layer, keep the Fill at 0% and replace the Bevel Emboss style with these ones.

gameboy-10
gameboy-101

Step 11

Duplicate once more the Cross layer, turn Fill to 100% and replace its styles with these.

gameboy-11
gameboy-111
gameboy-112

Step 12

Group these three layers and name the group “Cross”. Create a new layer and pick the Brush Tool (B). Select a Hard Round brush and draw four dots outside of the cross. Turn the Fill to 0% and apply this style.

gameboy-12
gameboy-121

Step 13

This step is optional. Add the Game Boy pocket logo or your own logo.

gameboy-13

Step 14

Create a new layer and pick the Custom Shape Tool (U). Find the Triangle and draw a small triangle like the one on the image below. Turn the Fill to 0% and add these styles.

gameboy-14
gameboy-141
gameboy-142

Step 15

Duplicate this triangle three times and place them accordingly to the image.

gameboy-15

Step 16

On a new layer draw a circle using the Ellipse Tool (U). Change its Fill to 0% and apply the following styles.

gameboy-16
gameboy-161
gameboy-162
gameboy-163

Step 17

Group these triangles and the ellipse and name the group “Cross deco”. Create a new layer and pick the Ellipse Tool (U). Draw a circle like the one on the image below, fill it with #2f2f2f, turn its Fill to 0% and apply the following style.

gameboy-17
gameboy-171

Ads


Step 18

Duplicate this circle and replace the Bevel and Emboss style with these.

gameboy-18
gameboy-181

Step 19

Duplicate once again the circle and turn its Fill to 100%. Replace the existing styles with these.

gameboy-19
gameboy-191
gameboy-192

Step 20

Step 20
Group these three circles and name the group “B button”. Duplicate it and place the copy accordingly to the image below. Rename the copy to “A button”.

gameboy-20

Step 21

Duplicate one circle from each group (B button, A button). Turn their Fill to 0% and apply this Inner Glow style.

gameboy-21
gameboy-211

Step 22

Group these two layers created in the previous step and group them. Name the group “A/B highlights”. Create a new layer and select the Rounded Rectangle Tool (U). Set the radius to 10px and draw a small shape like the one on the first image (color: #2f2f2f). Turn the Fill to 0% and apply the following style.

gameboy-22
gameboy-221

Step 23

Duplicate this shape and replace the existing style with these ones.

gameboy-23
gameboy-231

Step 24

Duplicate once again this shape and turn its Fill to 100%. Clear the existing styles and apply these.

gameboy-24
gameboy-241

Step 25

Group these three layers and name the group “Select button”. Duplicate the group and place the copy accordingly to the image below. Rename the copy to “Start button”.

gameboy-25

Step 26

Add some text under the buttons (font: Arial / Helvetica, sizes: 5pt and 3,3pt, color: #2f2f2f).

gameboy-26

Step 27

Create a new layer and pick the Brush Tool (B). Select a Hard Round brush and hit F5. Apply these parametres.

gameboy-27

Draw some dots (color: #2f2f2f), turn the Fill to 0% and apply the following style.

gameboy-271
gameboy-272

Step 28

Create a new layer and draw some more dots (Fill: 100%, no styles).

gameboy-28

Step 29

Group these two layers and name the group “Speaker”. Add your logo to decorate the gameboy.

gameboy-29

Step 30

Create a new layer and add some text (OFF / ON). Turn the Fill to 0% and apply these styles (font: Arial / Helvetica, size: 3,3pt).

gameboy-30
gameboy-301
gameboy-302
gameboy-303

Step 31

Create a new layer and using the Brush Tool (B) draw two dots. Lower Fill to 0% and apply this style.

gameboy-31
gameboy-311

Step 32

Pick the Rectangle Tool (U) and draw two tiny narrow rectangles. Change their color to #dfc243 and apply this style.

gameboy-32
gameboy-321

Step 33

Group the layers created in Steps 29-32 and name the group “Logo / On Off”. Create a new layer and using the Ellipse Tool (U) draw a small circle (color: #c71221). Apply the following styles.

gameboy-33
gameboy-331
gameboy-332
gameboy-333

Step 34

Decorate the Power light with some text (font: Arial / Helvetica, size: 2pt) and some shapes. To create these shapes follow the instructions on the second image.

gameboy-34
gameboy-341

Conclusion

That’s the end of the tutorial. Your gameboy pocket is ready. Add any effects, background or anything else to make it look even better. We hope you enjoyed the article.

Ads