School design for website template

In this lesson we will learn to draw a layout for the site in the style of “School”.

Materials for the lesson:


A pen


Step 1. To begin with, we will create a notebook sheet and add several images to it. For a tetrad sheet, create a striped background of dark blue color 700×550 pixels We use the tool rectangular marquee tool (Rectangular selection area) in order to create light blue stripes on a new layer.

Place this layer in a folder called “Stripes” (in order to place a layer in a folder – select the desired layer and press the key combination ). Activate the tool free transform tool (Free Transform) from the menu edit> free transform (Editing – Free transform) and place the strip strictly horizontally. The strip should be long enough, such as shown:

Step 2. Now turn the created lane to 45 degrees This bar should be in the “Bands” folder.

Step 3. Duplicate the bands (while holding , move the strip to the side, creating a copy), placing them evenly, as shown in the figure. All these bands are placed in the “Stripes” folder.

Step 4. Merge the “Stripes” folder – right-click on the thumbnail with the image of the group folder and select the command – merge group.

Step 5. Reduce the opacity of the stripe layer to thirty%, duplicate this layer and flip it horizontally: flip it horizontally (Flip horizontally) in the menu: edit> transform> flip horiztonal (Editing – Transforming – Flip horizontally), as shown:

Step 6. Use the tool rectangular marquee tool (Rectangular selection area) in order to create a white rectangle on the new layer, which will serve as a sheet of paper. Name this layer “Paper 2”.

Step 7. Duplicate the layer that was in the Bands group, name it Paper 1 and make it invisible.
On the new layer, create a narrow rectangular strip of purple with the tool rectangular marquee tool (Rectangular selection area).

Step 8. Duplicate the line several times. Then merge all the layers with stripes into one.

Step 9. Make the “Paper 1” layer visible and merge the “Paper 1” and “Paper 2” layers into one layer, then apply a layer style to them drop shadow (Inner shadow) with the settings shown in the picture:

Step 10. Make the “Paper 2” layer active and use the tool free transform (Free Transform) from the menu edit> free transform (Editing – Free Transform) to rotate this layer clockwise. Aligned paper should be at an angle, as shown:

Step 11. Duplicate the “Paper 1” layer and place it below the other two layers. Rotate the “Paper 1” layer counterclockwise, as shown in the figure and move a little:

Step 12. Create a duplicate of the “Paper 1” layer just turned and aligned. And create a rectangular selection, as shown in the figure. Thus, we will create a sticker sheet.

Step 13. Fill the created selection with a color indicator: #F9EEB3

Step 14. Create a rectangular selection of the top of the yellow sticker, increase the saturation of this selected part: saturation (Saturation) from the menu: image> adjustments> hue / saturation (Image – Correction – Hue / Saturation).

Step 15. Put our sticker on top of the “Paper 1” layer and turn it a little.

Step 16. Now we will add content to the layout we created. For writing text is used a font called “angelina”, which you can find in the archive.

Step 17. The settings used for the text are shown below:

Step 18. In the final part of the lesson, we will add objects to our layout. Here I will show how to place a couple of objects, and then you yourself will do the same with other objects.
First of all, we need to remove the background on which the eraser is located. To do this, use the tool. magic wand tool (Magic wand). Click this tool on the light background behind the eraser, the background will be highlighted, and you can remove it by pressing .

Step 19. Use the tool transform tool (Transform) from the menu: edit> free transform (Editing – Free Transform) in order to rotate the eraser on 50 degrees

Step 20. Change the eraser shade: saturation (Saturation) from the menu: image> adjustments> hue / saturation (Image – Correction – Hue / Saturation).

Step 21 Slightly reduce the size of the eraser:

Step 22 Check if the background is well removed from the eraser:

Step 23 The layout should be similar to this drawing:

Step 24 Apply to eraser style drop shadow (Inner shadow) from the menu: layer> layer style> drop shadow (Layer – Layer Styles – Inner Shadow).

Step 25. Remove the background from the pencil and apply a shadow to it:

Step 26. And now add a ballpoint pen image to the layout:

Step 27. That’s all! The layout of the site in the style of “School” is finished.

I wish you success!

Author: flash-game-design

Like this post? Please share to your friends: