Category Archives: web layout

Glossy Button Video Tutorial and PSD

Hey there everyone – I have been quite busy and havent had much time to be creative.. I hope no one suspected that I gave up my blog. Anyways, in this tutorial I will teach you how to create/design a nice sleek glossy button  using PHOTOSHOP!! The final image will look something like this:

Why do I say “something like this” That is because in this tutorial I use a different font and dont do the gradient in the background. To view the video tutorial you can go by clicking here.  And when you are done, feel free to go here and pick up the PSD with layers intact. 

P.S. I have to say that I think the colors in the video came out a little too bright which was not my intention …sorry guys.

Sleek and Spicy website header Tutorial – Web 2.0 Style

In this tutorial I am going to teach you how to make a nice sleek looking mockup for a website header.
It should look like this: Click here.

  • We start by opening a new document (Ctrl+N) (Cmnd+N – Note for mac users – Replace the CTRL with Command) Dimensions 800px width X 120px Height – Background color set as white for now. OK
  • On the background layer go choose black as your color and than go select the paint bucket tool- than click on your stage to fill the bg with black.
  • Create a new layer above the bg(background) layer and name it “pattern”. While the pattern layer selected go select paint bucket tool and then go up to the top of the screen to the properties panel and select PATTERN instead of FOREGROUND.

select pattern

Select the thick pin stripes pattern.


  • In order to have the pin stripes pattern in your pattern library – you first must create one. Keep this document open and go open a new document (CTRL+N) and create something like this

make sure you delete the background layer to be a transparent background. and not white. Than go to edit>Define pattern>give it a name “thickpin” and click ok.

  • You will now be able to close that doc. and go back to your oringinal document and select that pattern from the pattern library. You should have the paint bucket selected so just click the stage to fill it with the pattern.
  • Go select the pattern layer and double click it to open blending options. (if it doesnt open it for you than keep on clicking you will get it – make sure you are not clicking on the text – that wont work) – now select color overlay and choose a nice blueish color like I did #005777. and click OK. You should now see this:
  • Now double click on the magnifying glass so you will see the image at 100% this is always good. And drag open the surrounding window around your stage – you should be able to see a gray color of the document around all sides of the current header. This is going to help you for the next step.
  • Create a new layer and name it “gradient black” select that layer and go select the gradient tool and bring it back to the stage. place it inside the gray section below your header and hold on shift (this keeps it straight) and drag your cursor upwards all the way to the top of your header. now release. you should have this:
  • Create a new layer above that and name it “hr”(stands for horizontal Rule) Go to the color pallete and choose a nice yellow color #e0ff36 . Now select the square tool and drag out a nice line at the bottom of your header.
    You should see this on your stage and this in your layer panel.
  • Now go to the layers pallete and select the “pattern “layer – now hold down on shift and select the “hr” layer – you will see now that all three layers are selected. (This selection trick is a great new feature in cs2 – just how folders work on your pc or mac.) Now with all 3 layers selected go to the top right corner of your layers pallete and click on the triangle and it will drop a menu down

    – go select “new group from layers” now name it ” Backgrounds” and click ok.
  • Now your backround layers are in that nice little folder

    so they wont confuse you the rest of the way. To be smart – while the folder is selected , you can even click on the lock symbol at the top of the layers pallete in order to lock the folder so they wont be opened – even by mistake. Originization is very important – ALWAYS NAME YOUR LAYERS and USE FOLDERS! Continue reading Sleek and Spicy website header Tutorial – Web 2.0 Style

Whats coming: website header tutorial.

The actuall tutorial will be ready by hopefully tuesday! I know so loooong but sometimes the wait only makes it better. I plan on making  tutorials that stand out in  the crowd -  I can do it in 30 minutes but it will take you all 5 hrs to understand it – That is not a good idea. I think you all agree with me on this.

The goal: You will enjoy it.
You will understand it.
You will learn some cool shortcuts tricks and tips from it.
You will be able to teach other people what I taught you.
You will be able to discover new ideas and new ways of working with photoshop from it.
You will be very happy.
You will like my blog
you will come back.
you will be even happier.

I will give you a sneak peak of what it will look like.

Sweet and Spicy

I hope you’ll like it.
See you than. feel free to eat up my archives while I am away.

[Free PSD] Free Website Header Design

a sleek web 20 “lookin” header and web page layout – yes it is piping hot  it is something about the nice bright colors on a dark background that makes it look so good.


It was done pretty simply – and it can be customized even more easily – Just DOWNLOAD the free psd over here.
Just look inside and play around with it – you may learn something new, you may not. you may just enjoy not working so hard on your next web project. either way – have fun with it. – If you actually use this psd or part of it for an actual project (commercial or personal)I would be honored if you credit me with a link or two on your site. -ENJOY