PS Webpage Design tutorial VII-design cartoon storefront layout in Photoshop

As the coders, the basis of the artist is weak. We can refer to some mature web page PS tutorials to improve our design capabilities. To apply a sentence, "Three Hundred Tang poems are carefully read, and no poems are written ".

This series of tutorials come from the PS tutorials on the Internet, both of which are foreign and all in English. I try to translate these excellent tutorials. Due to the limited translation capabilities, the translation details are still to be elaborated.

Conventions:

1. The software in this article is Photoshop cs5

2. The original tutorial was in English. On the basis of the re-creation, I cut the Chinese version of the diagram again.

3. Some operations in the original text do not provide parameters. I tested some parameters repeatedly and displayed them in red. Some Incorrect parameters are displayed in red.

For example: (231,), indicating that the coordinates in the upper left corner of the rectangle are (), in width, and 77 in height.

For example: (90,22) indicates that the coordinates in the upper left corner of the rectangle are (90,22 ).

4. At the end of the tutorial, I will attach my own experiences. Some are Optimization of some steps in the tutorial.

 

1. firstly download the grid system, unzip the archive file you downloaded, go to the "templates" folder and then go to the Photoshop folder. choose the 12 GRID file. the PSD file will come with a premade grid guide to help you arrange the website. to activate the guides, go to View> show> guides.

Will need to make the canvas bigger, go to image> canvas size and put in the new width and height below:

1. First download the grid system, decompress the downloaded file, go to the Templates folder, and go to the Photoshop subfolders. Select the 12 GRID file. The PSD file pre-fabricated grid reference line helps you align the page layout. Activate the reference line and click View> display> reference line.

To enlarge the canvas, Click image> canvas size and set the new width and height.

This tutorial does not use a grid system. In this step, create a document with the size of pixel PX * 1480px, as shown in:

 

2. to unlock the background layer click on the layer and press the lock icon to unlock.

2. Double-click the lock icon on the background layer to unlock the background layer.

 

3. using the rectangle tool draw a rectangle shape like below using the blue lines as a guide. press Ctrl + T to make the shape transformable and drag each top corner to in while holding down the Alt key. double click on the layer to bring up blending options and put in the settings below:

3. Use a rectangle tool to draw a rectangle (132,200,936,135), just like a reference line in blue. Press Ctrl + T to enter the deformation mode, and press ALT to drag the two control points on the top (it should be Ctrl + T, right-click and select perspective, drag the control point in the upper left corner to move 70px to the inside ). Double-click the layer to open the layer blending option and follow the set style. Name this layer roof

Color of gradient superposition: #7e1416, # ee2a28

 

4. using the circle draw a shape like below while holding down the Shift key. double click into blending options and make a stroke of 1px. duplicate the circle by dragging it to the new layer icon. make the circles alternate from dark red to white. if the circles don't fit hold down the ctrl key and select all the circle layers and drag them all to the new folder icon. on the folder press Ctrl + T and drag a bottom corner holding SS while holding down the Shift key.

Use the elliptical tool to press shift to draw a circle. Double-click the layer style to add the stroke 1px. Drag this layer to the icon for creating a new layer and copy it multiple times. Make sure that these circles are red and white. If these circles do not appear in the proper position, press Ctrl to select them all, drag them to the icon of the new group, press Ctrl + T on the group, and hold down shift, drag a control point at the bottom to a proper position.

According to the source image, a total of 12 circles are obtained. The diameter of each circle is 78px. perform the following operations to complete 12 Semi-circles.

Create a circle (132,296,) with an elliptical tool on the left side, and use the dark red color: #7e1416

Double-click this layer to add the following style

CTRL + J copy the layer, CTRL + T free deformation, move the new layer to 156px on the right of the source Layer

Press Ctrl + Shift + ALT + T to copy the new layer and move it to the appropriate position (automatically move it to 156px on the right of the source Image Layer)

Repeat the previous operation until six deep red circles are created.

Use the same method to create 6 white circles

Merge the circles into a new group and name them circles. Click layer> layer mask> show all

For example, you can use the rectangular selection box to create a rectangular selection area.

Press the delete key. The content in the Rectangular selection box is not displayed. Press Ctrl + D to cancel the selection and move the roof layer to the top of the circles group.

 

5. Go to the background layer and double click into blending options> gradient overlay and put in the colours below:

5. Return to the background layer, double-click the layer style window, and add a gradient overlapping style. Set the style according to the settings.

Color overlapping colors: # 09a0df, #80 ddff

 

6. with the rectangle tool draw a top part on the 'roof' using the same gradient overlay colours as the red roof. using the font Bebe Neue write out the menu, then double click into blending options> drop shadow and put in the settings below:

6. Use the rectangle tool to create a rectangle (202,142,796, 58) on the top of roof and add a style with the same gradient as the roof layer. (Copy the roof layer style directly, and paste it on this layer, including the stroke style)

Add some menu text on the rectangle. Font: Bebe Neue (this font cannot be found. Use Arial rounded Mt bold instead. Font color: White ). Double-click the text layer to add the projection layer style:

The font settings are as follows:

Adjust the position of each menu. The result is as follows:

 

7. using the rectangle tool draw a search box, double clock into blending options & put in the settings below. next go into custom shape tool and select the magnifying glass icon, holding down the Shift key (so the shape stays perfect) Draw the icon.

7. Use a rectangle tool to draw a search box (770,152,210, 36), double-click the layer to add a layer style, and follow the set style. Next, select the custom shape tool, select the magnifier icon, and hold down the Shift key to save the shape intact.

Add the text type in here and press enter in the search box and set the following format, font color: # 6d6d6d

The final result is as follows:

 

8. Next using the rectangle tool draw the page background, double click into blending options> gradient overlay and put in the colours I have below, then put a dark gray 1px stroke.

8. Use a rectangle tool to draw a page background (132,335,936,107 0). Double-click the layer style and add a dark gray stroke of 1px according to the set gradient.

Color of gradient superposition: #4b3226, #2b1915

Stroke color: #343434

 

9. Again with the rectangle tool draw a white 'window', double click into blending options and put in the settings below.

9. Use a rectangle tool to draw a window (168,335,864,274). Double-click to open the layer style and press set style.

 

10. next for the slider I 've got some ice cream images, I 've shrunk the images down (using the CTRL + T method we used earlier ). to make the white background of the images transparent I 've put all the ice cream images into a folder and set the blending mode to multiply.

10. Next, we will use some ice cream images on the left to narrow down these images (using the previous Ctrl + T method ). To make the white background look transparent, I will merge these images into a group, and then set the mixed options of the Group to the front slice.

 

11. for the slider I 've used the font heartbreaker, I 've rotated the text by pressing CTRL + T and rotating the edges. I 've gotten an hand drawn, copied & pasted it into the canvas and have changed the size & rotated it using the CTRL + T method & changed the color by double clicking into blending options> color overlay.

11. On the other side, I used the heartbreaker font (replaced by the Pristina font, for example,) to add some text, press Ctrl + T, and rotate the text. I got some hand-drawn patterns, copied them to the canvas, adjusted the size and rotation angle with Ctrl + T, double-clicked to open the layer style window, set the color overlay style to change the color

Text format settings are as follows:

Because the pattern is relatively simple, hand-painted directly. Create a new layer, and then use the paint brush tool to draw a hand on the new layer. Click it carefully.

 

12. now draw a box with the rounded rectangle tool, double click into blending options and put in the settings below & rotate the box. using the circle tool draw a black circle & with the line tool draw 2 lines for strings. place the blue sign layers into a folder.

12. draw a square (80 Px in width and 60 Px in height) with a rounded rectangle. Double-click to open the layer style window, rotate the square according to the set style, and draw a small black circle using an elliptical tool, use a line tool to draw two lines. Merge the layers of these blue symbols into a group

Gradient colors: # 3789cd, #2f6ba3, # 3789cd

The angle of the square rotation is recommended to be 159 degrees, because the angle of the gradient stack previously set is 111 degrees. Through calculation, we can see that 159 degrees is the direction of the gradient and the direction of the square is consistent.

 

13. duplicate the blue sign folder by dragging them to the new layer icon. Go into the custom shape tool and choose the arrow, draw a white arrow on each blue sign.

13. Copy the folder of the blue symbol and drag it to the icon of the new layer. Use a custom shape tool, select an arrow, and add an arrow to each blue symbol

 

14. next draw a 'title' box using the rectangle tool, double click into blending options and put in the same red gradient as the 'roof '& put in a 1px dark gray stroke. next draw a white box with a 1px stroke. holding down the ctrl key select the 2 shapes you created and duplicate them 4 more times. place each of them where you want. to make a box larger press Ctrl + T and stretch out the box.

14. Next, use the rectangle tool to draw the title square (168,630,264, 45). Double-click the layer style window, add the same gradient superposition as the roof layer, and add the dark gray of 1px (#343434) next, draw a white square (168,675,264,195), 1 px stroke.

 

Press ctrl to select two layers and copy them four times. Move each square to a proper position. Then press Ctrl + T to change the size of a square.

For example, the positions of the five title blocks are (168,630), (468,630), (768,630), (168,900), (768,900)

The width of the big square in the lower left corner is 564px, and the height of the white square in the big square is 416

 

15. I 've put in the headings with the font Bebe Neue, and written out the content in Arial font. I 've gotten the icons from the Danish royalty free icon set.

15. Write the title in each square. Use the Bebe Neue font to write the content. Use the font Arial. I got some free icons from Danish royalty free icon

Directly copy the text layer on the Roof Layer, move it to the appropriate position, and modify the title text. The link of the Danish royalty free icon has expired, and the icon is retrieved from other places.

 

16. using the rectangle shape tool draw out some boxes for the contact form using the color below. double click into blending options> stroke and put a 1px dark gray stroke. draw a button with the rounded rectangle Tool & put in the same gradient and stroke as the red title box.

16. Use a rectangle tool to draw some squares in the contact form. The color is shown in (# ebeb ). Double-click the layer style window and add a 1 px dark (#343434) stroke. Add a button with the rounded rectangle tool to add a gradient superposition and stroke style identical to the title bar.

 

17, next holding down the Shift key draw 2 boxed with the rectangle tool like below, one white & small and the second large. on the larger box double click into blending options and put in the settings below:

17. Use the rectangular tool to hold down the Shift key and draw two squares, as shown in, one smaller white dot and one larger white dot. Double-click the layer style on the square with a large point and press the set style.

In order to be eye-catching, the color of the small white square is changed to red

 

Write out the example post title & post description.

The title and description of a blog are written. The title Font is the same as that in the title bar. The color is red, indicating that the text font is the same as that in other columns.

 

18. Next Copy & Paste an example image, right click and create clipping mask (this will crop the image to the size of the white square ).

18. copy and paste a part, right-click it, and create a clipboard mask (this will limit your image to a white square. In this example, it has been changed to red to be eye-catching)

 

19. duplicate the send button you created earlier and place it as a button under the Post, change the 'send' to 'continue reading '.

19. Copy the second button you created earlier, move the button below the description text, and change send to continue reading.

 

20. Next I 've gotten some icy pole Social Icons and placed them on top of the layout.

20. Next, download some icy pole Social Icons and move it to the proper layout location.

 

21. Next write out the title of your website, I 've used the font heartbreaker. Double click on the title into blending options and put in the settings below:

21. Next, add the website title, Font: heartbreaker, double-click the text layer to open the layer style, and press set style:

 

Go into the custom shape tool & choose this snow flake Symbol & while holding down the Shift key draw some snow flakes.

Switch to the custom shape tool, select the snowflake shape, and press shift to add some snowflakes.

 

22. Lastly write out some copyright details for the footer.

22. Add some copyright information to the footer.

Final Result

Final Result

 

Postscript:

Refreshing in summer. Because this tutorial was completed by referring to the 960 layout system, some local sizes are relatively casual. It takes a lot of effort to calculate these dimensions during translation.

For designers, they naturally have a good grasp of the size, that is, dragging the mouse, the size can also be in place.

For the coders, it is better to carefully calculate the size of each part in the early learning stage. When I do more in the future, I feel the bit is done, and it is not too late to be satisfied.