Step 1

We start our layout with a new document of size 400×200.
Using “Myriad Pro”, Bold Codensed and 112pt size write “happy”.

Make sure that you write each letter on seperate layers i.e “h” “a” “p” on seperate layers
respectively also remember the layer order and make a new group named “happy” by selecting all the layers and pressing “Ctrl +G”.

Now using the arrow keys nudge the letters close to each other like so.

Step 2

Apply the following gradient to all the layers in the group.

So here is what we get.

Step 3

Make a new layer over the “y” letter layer and using a soft brush 35px radius with black as foreground color just click once between “y”and “a” naming it “shadow”

Step 4

Press “Ctrl + click on the layer “y” to select it.” Now goto the layer named shadow press “Ctrl+ shift + I” to invert the selection and then press delete.

Now the shadow is only on y.

Step 5

Repeat step 4 on all the remaing layers.

Step 6

Duplicate the group “happy”. naming it happy2.

Step 7

Merge all the layers in group happy2 by selecting all the layers in the group right click and click on merge layers. Name the new layer happy3. Now make a duplicate layer
of happy3 by pressing “CTRL+J” name it happy4. Goto Filter>Blur>Blur

Step 8

Use dodge and burn tool

Step 9

“CTRL+Click” happy4 layer togo select>modify>contract “contract by 1px” make a new layer and fill it with white color. Then again to go select>modify>contract “contract by 1px”
and press delete

Step 10

Using the eraser tool erase some part like so.

Step 11

Again select layer happy4 by ctrl+clicking on the layer in the layer panel. Make a new layer set the blending mode to “Vivid Light”,
togo select>modify>contract “contract by 1px” then
with foreground color black and background color white goto Filter>Render>Clouds. (Remember you can always press CTRL+F to redo the latest filter you just applied ) So you
can always press CTRL+F until you get a nice effect (note:make sure the layer happy4 remains selected.)

Step 12

Now we go back to layer “happy3″ from step 7. With arrow tool selected . Press “ALT or Command” then press “Left arrow key once then top arrow key once” repeat this step untill you get the following effect.

Conclusion

You can get different effects by just changing the gradinent in step 2 and the render clouds in step 11.
And happy holidays.

We start our layout with a new document of size 1000×750.
Apply the following gradient in the layer options of the background layer.

Step 2

Now in this tutorial instead of starting from the top we are going to start with the bottom , i.e the footer.
Using the pentool we are going to make a triangular shape at the bottom like so.

Step 3

Now we are going to make a few more such shapes. ( Each shape will be made on a new layer ).

Step 4

On each of these triangular ( mountains ) layer we apply the following gradient.

We get the following.

Step 5

Now using the elliptical marquee tool with add to selection option selected.

We make the following selection. Select a similar shape as below.

(TIP: Just make circles one on top of another , with the add to selection option will just mix all these circles together)

Step 6

Make a new layer ( SHIFT+CTRL+N) naming it snow . And with the paint bucket tool fill the selection with white color.

Step 7

With ( SHIFT+CTRL ) pressed click on all the four mountain layers.Remember to click on the vector mask thumbnail ( where the red arrow is pointing at in the following picture).

Step 8

The above step selected only the three triangular (mountain) layers.

Now with the layer named snow (which was made in step 6) selected press (CTRL +X) to cut the selection.

Step 9

We only need what we just cut and dont need the rest of the layer so we delete the layer named snow.

Step 10

Press (CTRL+V) to paste what was cut in step8. Using the arrow keys place the selection on top of the mountain layer.

Apply the following gradient

Our mountain footer is done.

Step 11

Now we make the header . Click on the elliptical marquee tool with add to selection option selected with 10px feather.

Using the same process described in step 6. We make a cloud shape as below.

Step 12

Make a new layer ( SHIFT+CTRL+N) . And with the paint bucket tool fill the selection with white color.

The above process is one of the fastest and easiest ways to make clouds.
Add logo and slogan to the cloud.

Here is what we have made up till now.

Step 13

For the navigation we use the rounded rectangle tool. (Radus 10px ) We make the following shape and apply gradient.

Add navigation

Step 14

Using the line tool with width 1px we make a divider and apply a gradient to it.

Our header is done.

Step 15

For the featured content box we start with rounded rectangle tool and make a rectangle with the following gradient.

Step 16

(CTRL+Click) on the layer we just created . Goto Select>Modify>Contract. And select 1px setting. Fill the selection with white color.
Again goto Select>Modify>Contract. And select 1px setting and press delete or cut the selection.

Step 17

Again using the rectangular marquee tool with 10px feather. Make a selection like so

Press the delete key or cut the selection. And you will get .

Step 18

Make a white rounded rectangle

Add a sample image.

Step 19

Now using the ellipse tool make two circles on either side like so.

Using the custom shape, make an arrow with background #879c4b

Duplicate the arrow we just made ( CTRL+J) and using the arrow keys press right key 3 times and set the opacity of this layer to 21%.

Do so on the other side too.

Add sample text and we are done with this part.

Step 20

For this part select the rounded rectangle tool again and make a rectangle with background #c7e8fc . And add sample text to it.

Step 21

Now we will make a login form. For this again use the rounded rectangle tool.

We get.

Step 22

Make another rectangle and apply the following gradient.

Add text.

Add copyright And we are finished.

First off we start by making a new document of 300px X 300px
Then using (Myriad Pro ) (Bold Condensed) we write “S”

Step 2

Now duplicate this layer and change its color.

Step 3

Now click on the lower “s” layer and using the arrow keys nudge it down ( press down arrow key 4-5 times )

Step 4

On the upper layer go add the following gradient

Step 5

Then Apply a stroke

Step 6

And you will have a simple yet professional effect.

Step 7

For the logo we duplicate the layers and invert them using ( CTRL + T ) and then to to Edit > Transform > Flip horizontal

Finally

Although this is a very simple tutorial and you may have used this yourself but using it in making logos and using
different fonts makes great effects ( See the psd for another example )

First off we will start by creating a new document of 1000px X 900px .
Next fill the background with #b3ae68.

Step 2

Now the first part of the layout ; the header.
Using the rectangle tool make a rectangle on top of the layout . It’s size should be about 100px in height and 100% the width of the document.

Step 3

Then we will apply a linear gradient. Of #b0a500 to #beb202 .

Step 4

Next we add 2 , 1px dividers below the header.

Step 5

I will be using “Myriad Pro” throughout the tutorial . For the title ill use it aswell ( Condensed , 48 pt , strong ) color #3f3f40.

Step 6

Now lets head to the main navigation; again using same font ,smaller size (24pt) we’ll add the navigation on to far right of the layout. Make
sure that you leave some space on the right.

Step 7

To add an effect for the “current page” lets make a rounded rectangle “BENEATH” the text layer using same color as the background , like below.

Step 8

Now we’ll apply the following linear gradient and reduce the opacity to 23%.

Step 9

Our header is now complete. You might think that this is simple. Yes, for me a portfolio should either be very simple ( which you might have seen
around the web ) or should have much components and anything in between just won’t do.

Alright the following steps are really simple and would be repeated in the layout so ill point here to do the following more than once.

Below the header we need to leave some space and with “Myrid Pro , 36 pt, #b4a901 ” we’ll add the text ” blog ” because this space is for the
latest blog entries ( you can write blog,journal,the blog , my diary , diary ; what ever you like )

Just below our blog heading make a rectangle with background color #454214 and 1px stroke of color #282710.

Step 10

Now select the rectangle by pressing ( CTRL + Click on the layer in the layer panel ).
Then goto ( SELECT > MODIFY > CONTRACT ) and apply ( Contract By ” 4px ” ) .
With the selection make a new layer by simply pressing ( CTRL + N ) fill the selection with white color .
Set the layer opacity of this layer to 9%.

Step 11

Now at the top edges of the newly created layer we make 2 , 1px lines of color #565329 just as shown below.

Step 12

Add some text just for testing purposes.

Step 13

Now on the far right we make a rounded rectangle of color #736c08. I won’t add any stroke or gradient .

Step 14

Using the custom shape tool make an arrow of color #bab576 . Add the text read on , read more etc .

Step 15

Similarly make another rounded rectangle of color #b3ae68 and another arrow of color #736c08 .
This will be used for hover link ( when you point the mouse arrow on the link it will change the image ) , i’ve done this because you
should also have the final work in your head so you dont have to make/edit your layout over and over when you are coding it.

Step 16

Now using the same approach as before we make another rectangle just like the blog one for your latest work.

Step 17

This the what it would be safe to say the main content of the layout, what you are trying to showcase.
For that youll have to figure out what you wanna show there , the single most recent work or more than one.

Step 18

Alright for the footer , we leave a little space below our recent work and using rectangle tool make a rectangle on the bottom in the same fashion
we made the header.

Step 19

Again using the line tool we make a 1px line of the same color #171711.

Finally

As the layout is supposed to be very simple we wont add anything else to it.
Now add your footer text and we are done.