Design a Transparent Website Layout in Photoshop

8/8/2019 Design a Transparent Website Layout in Photoshop

1/30


2/30


3/30

Step 4

Close out of the 20002000px document, because we are done with that one. Now open a new document12001200px and fill with black.

Step 5Create a new layer (Control + Shift + N) and fill it with black also.

Go into Filter>Render>Fibers. Adjust the settings like I have to get a real good contrast.


4/30

Step 6Now Go into Filter>Blur>Motion Blur and adjust the settings to 999px.

Using the transform tool (Control + T), hold down shift and rotate to the left one spot. Stretch out the fibers so thait covers the entire area.


5/30

Step 7Open up the Levels (Control + L) and adjust them as I have. This is going to darken our fibers.


6/30

Step 8Change the blend mode of the fibers layer to Color Dodge.

Now select the brush we made, then push F5 to open up our brush settings.

Change the settings as I have them.


7/30


8/30

Step 9Create a new layer (Control + Shift + N), and move it under the fibers layer.

Pick a blue color and paint a little area with our brush. Since we changed our brush settings, the brush we made

should be scattered something like what I have.

Step 10

Go to Filter>Blur>Motion Blur with the distance at 999 px.


9/30

Step 11Repeat steps 9 and 10 with different variations of blue, creating a new layer for each color, until you get something

you like.


10/30

Step 12Create a new layer just under the fiber layer. Click on the gradient and choose the Reflected Gradient tool. Makesure the color is white to nothing.

Click and drag a gradient in the middle of the document, following the line of the fibers.

Change the Blend Mode to Overlay, and drop the opacity down to 60%. This will give us a light source in themiddle of the document.

This is the finished product of our background. Now we are going to get started on putting together the actual

website.


11/30

Website

Step 13

Before we get any further I am going to take all of the layers from my background and put them into a folder to keeit organized.

Click on the background layer, then click and drag a guide out to the middle of the document. The guide should snainto place at the middle. If it doesnt go to View and make sure Snap is checked.

Using the Marquee Tool create a box 9601200px. We are going to move it over using the transform tool (Contro

+ T) to get the anchor points on the corners and the middle of the box. Line up the middle anchor points with themiddle guide. Put a guide on each side of the box.

Step 14Using the marquee tool create a box 37560px and rest the right side of it on the right guide and the top on the top the document. Hold down shift and move it down six times. Put guides on the top, bottom and left sides.

Using the Rounded Rectangle Tool, create a box inside the guides, with a radius of 10px.


12/30

We are going to add some layer styles to the box, so go into the first icon at the bottom of the layers palette, andclick on Inner Glow. Change the settings as I have them with a color of#666666, then click on Stroke with a color

of#000000.


13/30


14/30

Step 15Click on the marquee tool. Now Control and click on the shape we just made. Hold down shift and move the shape

up three spaces. Using a linear gradient fill the area with white. Drop the opacity down to 60%.

Step 16Create a new layer and change the foreground color to #3399FF. Control + clickon the box. Now, using the linear

gradient again, create a blue gradient at the top of the box.

Step 17Do Control + Shift + I to get the inverse selection, then select the white gradient layer and delete. This will get rid

of the extra part that we dont need.

Step 18Using Myriad Pro Black at 16 pt type out your navigation in white.

Using the square marquee tool click and drag a box 1px wide and the height of the box. Fill it with #333333. Movethe marquee over one spot and fill it with #000000.


15/30

Step 19Repeat step 18 so there is a break in between each button. Put all the navigation layers into a folder.

Step 20We are going to create the body of our website. Using the marquee tool create a box 960970px and rest the top of

the box on the bottom of our navigation bar. Hold down shift, and move it down three spaces. Put a guide on the toand bottom of the marquee.

Using the Rounded Rectangle tools, Create a box within those guides as well as the far left and right ones.

Click and drag the layer styles from the navigation box onto the website box.


16/30

Step 21Grab a logo and bring it into your document. Line up the left side of the logo with the left guide.

Step 22Using the marquee tool create a box 600240px and put guides around it like we did with the navigation and thewebsite box. Using the rectangle tool make a box on the guides we just created. Give it the same layer styles as the

navigation, fill it with white and change the opacity to 20%.

Put the white box into a new folder called Post 1.


17/30


18/30

Step 24Put the photo at the top left of the post box, then holding down Shift, move the photo down twice and to the right

twice.

We are also going to add some layer styles. So click on the layer styles icon and click on stroke. Change the settinglike what I have, with a color of white. Now add a drop shadow.


19/30


20/30

Step 25Now lets put in some dummy copy:

Etiam ultricies nisi Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.

Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quamfelis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringill

vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictumfelis eu pede mollis pretium. Integer tincidunt. Cras dapibus. ac, enim. Continue

The Etiam ultricies nisi will be our title. Arial/Helvetica Bold at 32 pt. The rest of the copy will be Verdana at11pt. The color of the continue will be #3399FF.

Step 26Right-click on the Post 1 folder, Duplicate Layer Set and call it Post 2. Put the top of the second post on thebottom of the first post and then hold down shift and move Post 2 down two spaces.


21/30

Step 27Repeat step 26 for the third and fourth posts. For the fourth post click on the Post 4 folder, then click on the layer

mask (second icon from the left on the layers palette). Use the marquee tool to create a box around the area of thefourth post that is on the website box. Hold down shift and move the marquee box up two spaces. Then do Contro

+ Shift + I to get the inverse selection and fill with black.

Step 28Now lets make the sidebar. Using the square marquee tool make a box 300px wide and put it on the far right guide

Hold down shift and move it in two spaces. Put a guide on the left and right sides of the square marquee.


22/30

Step 29Using the rectangle tool make a box within the guides we just made. Make sure the box lines up with the first post

box at the top and it goes below the bottom of the website box at the bottom.

The sidebar box is going to be white and have the same layer styles as the post boxes.

Step 30Click on the mask icon on the layers palette. With the square marquee tool, create a box that covers the sidebar from

the very bottom of the document to the bottom of the website box. Hold down Shift and move the square marqueeup two spaces. Fill the area with black. This should get rid of that extra area.


23/30

Step 31We want to add a reflection like we have on the posts. To do this we have to duplicate the layer with Control + J

and move it over above the sidebar box. Control and click on the sidebar box, then Control + Shift + I to get theinverse, and delete the extra area.

For the search bar make a white box with the square marquee tool. The size of the box is going to be 26030px and

it is going to be placed at the top left of the sidebar. Hold down shift and move it over two spaces to the left and twspaces down.

The search box is going to have the same layer styles as the sidebar box.

Using the text tool create some text that says Search with 16pt Verdana and a color of#CCCCCC.

Step 32Now we are going to put in some ads. These ads are 125125 and are going to go two spaces down, holding Shift

and two spaces from the edges.

The bottom two are going to be Shift and down one space from the bottom of the top ads.

While you are at it put a guide on the left and right sides of the ads.


24/30

Step 33Click on the Rectangle Tool and in the options, click on the down arrow to the right of all the different shapes. Clic

on fixed size, and change it to 26030px. Put the rectangle so the top is touching the bottom of the ads, and holdingdown shift move down two spaces.

Change the color to white, at 20% opacity

Step 34Now to get the reflection, Control and click on the rectangle we just made. Push Control + Shift + N to get a new

layer. Now click on the square marquee tool and move our selected area up so the bottom is at the middle of therectangle.

Fill with a white to nothing linear gradient.


25/30

Step 35Type in Related Links with the font, Myriad Pro Black, and a size of 16 pt.

We are going to give it a slight background shadow to make it stand out a little better.

Step 36For the links we are just going to use the generic Wordpress links:

Development Blog Documentation Plugins Suggest Ideas Support Forum Themes Web Hosting WordPress PlanetWordpress Themes

The text is going to be white 12pt Verdana. We are going to hold Shift and move it in two and down one from theRelated Links head.


26/30

Step 37To get the arrow bullets, select the custom shape tool (same button in the toolbar as the rectangle tool) and choose

the same arrow I did.

Change the color to #3399FF and add a Bevel and Emboss from the layer styles icon.


27/30


28/30


29/30

Step 41Finally we will put in our footer information. Hold down shift and move the footer text down two spaces.

Final

Here is the final version. The great part about working with a transparent website is that you can change the

background image to completely change the look of your website.


30/30

Documents

Design a Transparent Website Layout in Photoshop