Site in the form of a school board in Photoshop

In this lesson you will learn how to make a unique and quite original layout for WP in the style of a school board. If you have any questions, ask them in the comments. Also please note that the PSD of the final result is available for download – this should help you.

This is what we should end up with:

Materials for the lesson:

  1. Font Eraser
  2. Chalkboard Font (standard on Mac)
  3. Set of icons
  4. Icons
  5. PSD file

Let’s get started.

Step 1

The first thing we do is we will create a new document with the following parameters:

Step 2

In this template, the background will be dark, so fill the background with color #oneC1C1C using a tool Paint bucket tool (Fill).

Step 3

Create a new layer on top of the background layer and name it. “Background Texture”. Fill it with the same color. We will add some noise, for this click Filter> Noise> Add Noise (Filter> Noise> Add Noise) and, setting the following settings, click OK.

After that, lower the layer opacity to thirty%.

Step 4

It’s time to start working on the cap. For the logo, I used the font Eraser (I posted a link to it above) in color #Ffffff. Behind the text layer create some kind of “chalk illusion”. Select the following brush:

Step 5

Using color # 000000, draw something like this on a layer specially created for this (you need to create a new one) and lower the opacity of the new layer to 20%.

Step 6

For the navigation menu in the header, I used the font. Chalkboard. For the active link, choose a color. # 272727, for an inactive link – let it be #FFFFFF. Behind the active link, draw a small brushstroke with the same brush that we used in the previous step, as shown in the figure.

Step 7

Let’s proceed to the creation of the main content block. Using Rectangle Marquee Tool (Rectangular area), create a rectangular selection, as shown in the picture, and fill it with color # 2E5A39. Name this layer Green Back ”.

Step 8

Now we need to duplicate the new layer and select it, holding Ctrl +J. Rename the duplicate to Noise ” and apply to it the noise that we used in the third step. Change the blending mode to Lighten and lower the opacity to 40%.

Step 9

Now back to the layer Green Back ” and apply the following layer settings to it:

Step 10

You should have something like this:

Step 11

Now let’s start creating the frame of our board. To do this, create a selection, as shown in the figure, from the side of the board, using Rectangle marquee tool (Rectangular area). Fill the selection with color # 323232.

Step 12

Now we need to add texture. We press Filter> Render> Fibers (Filter> Stylization> Fibers) and set the parameter Variance (Deviation) by 11 and parameter Strength (Intensity) at 28.

Step 13

Obviously, the frame should not be white. Therefore, we press Ctrl +U and in the panel that appears, set the following parameters:

Step 14

Our frame looks a bit flat – we will fix this by applying the following settings for the layer styles:

Step 15

You should have something like this:

Step 16

Repeat the previous steps for the rest of the parties and get something similar. However, make sure that the layers with the sides of the frame lie on top of the layers with the layers of the upper and lower frame – this is important.

Step 17

With the frame we are done! To make the categories menu, we need to add text in the following style. For active link Graphics ” i used color # EEE2D5, for inactive links – # D8C0A8.

Step 18

Add a small field to the background of the active link using Rounded rectangle (Rounded Rectangle) with a radius of 3px and color # 000000.

Step 19

Fill opacity down to 50% and change the blending mode to Soft Light (Soft Light). Also apply the following settings for layer styles:

Step 20

If you got something like this, then everything is ready.

Step 21

Now let’s work on the left side of the content. Create a small caption for the title, for example, writing “Latest Articles”. I used the font Georgia ”. To create the “illusion of blurred chalk”, we use the same technique as in the fourth step. It is better to use white, but you can experiment. Reduce layer opacity to 7%.

Step 22
Our post will not be displayed as in regular templates for WordPress – we will use the image with the title on top. Place the picture in size 240x240px and apply the following layer styles to it:

Step 23
Now we have to work a lot with Rectangle marquee tool (Rectangular area) and with opacity. Comment icon can be taken in the assembly Mono Icon Pack, link to which I posted at the very beginning of the article. Using the above tools, we create something like this:

Step 24

Duplicate the first picture and all the gadgets to it and multiply, changing the background:

Step 25

Using Rectangle Marquee Tool (Rectangular area), create a strip like in the picture and fill it with color #FFFFFF.

Step 26

Now we press Filter> Blur> Motion Blur (Filter> Imitation> Motion Blur). Put the corner -90 degrees and meaning 120px – something will turn out:

Step 27

Now lower the layer opacity to 50% and change the blending mode to Soft Light (Soft Light). Again, select the rectangular area, this time to the right, as shown in the figure, and fill it with color. # 000000.

Step 28

Lower the layer opacity to thirty% and change the blending mode to Soft Light (Soft Light).

Step 29

For sidebar headers we use the same effect as in step 21. The same font and the same settings:

Step 30

For the search title, do the same. Everything I did for the search field itself, I took a brush Chalk and put a horizontal brushstroke, as shown. For color use # 515151.

Step 31

The last thing we have to do for the sidebar is to add social networking icons. Icons can be found at the very top of the lesson – I gave links to them. The only thing – we will need to impose a white color on top, so that they become white. For chalk above use brush again. Chalk.

Step 32

The final step before our layout is ready is the creation of a footer or filed. Make sure that all these layers are located under everything else, except the background layers. Create a selection below and fill it with color. # 000000.

Step 33

Lower the opacity value to 18% and add some text:


Like this post? Please share to your friends: