TutsArena

Design a digital book reader in Photoshop

by TutsArena - Resources, Tutorials

Amazon is going to release the new version of it’s Kindle DX Wireless reader on the 19th. So, we decided it would be fitting to explain how to design a similar reader in Photoshop for the purpose of illustration or using on a web site, for instance.

Step 1:

Let’s start out by creating a new file. I used a 600×600 pixels canvas set at 72dpi, and I filled my background with white color. Now make a new layer set and call it ‘Sony Reader’.

Select the Rounded Rectangle Tool then above your screen under the options palette choose Fill Pixels, set the radius to 8 px and check anti-aliased. Now create a new layer then draw a large rounded rectangle with #6E6D72 color shade and 285×430 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay blending options to your large rounded rectangle layer.

Result:

Step 3:

In a new layer draw a black rounded rectangle with the same size as the first rounded rectangle. Then cut half of the black rounded rectangle as shown below.

Step 4:

Under Layer Style(Layer > Layer Style) add a Pattern Overlay blending option to the black half rounded rectangle layer. Then set the layer’s blending mode to Lighten. Now grab the Eraser Tool with a large soft brush and erase the right side of the pattern rectangle design.

Result:

Step 5:

In a new layer draw a large rounded rectangle with #ACADB1 color shade and 251×330 px dimensions on the center of the device. Then cut the bottom corners of the rounded rectangle.

Step 6:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Inner Glow, Satin, Gradient Overlay and Stroke blending options to your rounded rectangle layer from step five.

Result:

Step 7:

Now add the buttons right below the outer screen of the device, download the button designs here.

Step 8:

In a new layer draw a large gray rectangle with #717171 color shade and 212 x 290 px dimensions on the inside of the design.

Step 9:

Under Layer Style(Layer > Layer Style) add an Inner Glow blending option to your large gray rectangle layer.

Result:

Step 10:

Select the Horizontal Type Tool then set the font family to Arial, regular, 8 pt, crisp and #4B4B4B color shade. In a new text layer type out a paragraph on the screen rectangle. Then below the screen add “31 of 40″ text which is the page feature.

Step 11:

On top of the screen add the sony logo, download the logo file here.

Step 12:

Merge your ‘Sony Reader’ layer set so you end up with the sony reader design in one layer. Now resize the sony reader design by a couple of pixels through Edit > Transform then rotate it as shown below.

Step 13:

Now duplicate the sony reader layer and move it to the left by a couple of pixels.

Results:

Sony’s Reader Digital Book.