The layout of the gaming site in Photoshop

The final result:

Sources:

  1. Background
  2. Font
  3. Icons

Step 1. Create a document and background.

Create a new document (Ctrl + N) with a size of 1200x1340px and a black (# 000000) background. Download the background for the site and copy to the document. Arrange it so that the solar flare is in the upper right corner. Add a layer mask to the background, and fill the layer with a linear gradient from the bottom up, you should have about the same as in the image below.

Step 2. Creating a logo

Take the tool Rounded Rectangle (Rounded Rectangle Tool) with a radius of 10px (This will be the default radius) and create a rectangle 360x105px.

Add the following styles to the rectangle: Blending options (overlay mode), Drop shadow (Shadow), Stroke (Stroke).

You should have something like this:

Inside the rectangle add the site name and slogan using the tool Text (Type Tool). (Site name write in Virgo 01 font)

Styles for the first word in the site name: Drop shadow (Shadow), Gradient overlay (Gradient overlay).

Styles for the second word: Drop shadow (Shadow), Gradient overlay (Gradient overlay).

You will have something like this:

Step 3. Create a navigation.

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) and draw a rectangle under the logo.

Add the following styles to the layer: Blending options (overlay mode), Drop shadow (Shadow), Inner shadow (Inner shadow), Gradient overlay (Gradient overlay) Stroke (Stroke).

It should be something like this:

Now, you will need to create a pattern. Create a new document (Ctrl + N) 9x9px, select the tool Magnifier (Zoom Tool) and bring the document as close as possible. Take the tool Pencil (Pencil Tool) and draw the same as in the picture below.

After that, go to Editing> Define a pattern (Edit> Define Pattern), save your pattern and return to the pattern. Load a selection for a layer with navigation.

Tip:
To load a selection, hold down the Ctrl key and click the layer icon in the layers panel. Now take the tool Fill (Fill Tool) and select your pattern in the list of patterns.

On a new layer, fill the selection and set Opacity (Opacity), by about 7%.

Take the tool Text (Type Tool) and add your own menu items.

Create an orange (# d88503) rectangle using the tool Rounded Rectangle (Rounded Rectangle Tool), and place it under the text navigation layer.

Choose a tool Oval selection area (Elliptical Marquee Tool) and create a small oval in the right side of the navigation. Fill the oval with white (#FFFFFF) color and add a Gaussian blur, Filter> Blur> Gaussian Blur (Filter> Blur> Guassian Blur), Radius – 5px.

Add style External glow (Outer Glow) using the settings below: Outer Glow (Outer shadow).

You should get something like this:

Step 4. Create a content area.

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) and create 3 rectangles.

For each rectangle, add the following layer styles: Blending options (overlay mode), Drop shadow (Shadow), Inner shadow (Inner shadow), Gradient overlay (Gradient overlay) Stroke (Stroke).

It will turn out something like this:

Select a layer with a luminous oval and duplicate it (Ctrl + J). Move it to the upper right corner of the first rectangle.

Step 5. Block “Recommended”.

The block “Recommended” will be in the form of a slider. Place a 555x250px image on the left side of the rectangle.

After the big image add 3 small ones. The first image should be a thumbnail of a large image.

Now add a description for each picture. And add separators between slides using hyphens (-).

Now add a description for a large image. To do this, take the tool Rectangular Selection (Rectangular Marquee Tool) and create a rectangular selection. Fill the selection with black (# 000000) color and set Opacity (Opacity) by 75%.

Inside the resulting rectangle, add your description.

Step 6. Block with random news.

Inside the second block, I decided to add a slider with random content. Slider consists of 3 large images.

Above the pictures, add the title “Random News” and in the upper right corner add a link to view the next slide.

Add a short description below each image.

Step 7. Block with content.

Inside the third block, I decided to make 3 columns with content. It all looks like this:

Step 8. Creating a footer.

Choose a tool Rounded Rectangle (Rounded Rectangle Tool) and create a rectangle the same size as the navigation.

And add the following styles to the layer: Blending options (overlay mode), Drop shadow (Shadow), Inner shadow (Inner shadow), Gradient overlay (Gradient overlay) Stroke (Stroke).

Inside the footer block, add your own copyrights and several social icons from the set you downloaded.

Duplicate the background layer and flip it vertically, to do this, go to Editing> Transform> Flip Vertically (Edit> Transform> Flip Vertical), then move the image to the bottom of the document.

The final result:

Like this post? Please share to your friends: