Category Archives: Web 2.0

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.

select

  • 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

Pattern
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.

When I say Web 2.0 what do I mean?! I mean the look.

So the latest hype on the net waves is Web 2.0 . Its a funny thing but when someone uses this term – there are always those people who think they know what web 2.0 is.  We all know that it is alot more than the squeeky clean web graphics.  Here is a good link a which gives some good info on what this monster really is : http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
This blog/site may have some ajax tutorials later on, but for now it will be mainly focused on photoshop (of course) and the “LOOK and FEEL” of this latest trend – they call web 2.0