Website header « Web « Photoshop Tutorials

Create some more shapes. Insert search box as shown. Insert a cutout of a car. Place it on the left .

Start with a white canvas. Create a new layer-set titled Retro Scan just to be organize. In a new layer draw a black rectangle, this will be your header size. Picture guide below is cropped, original width: 600px.

Start with a big enough canvas for a full size canvas to fit in, in this tutorial my canvas was 900px x 400px. Make a new layer-set called Nature. In a new layer draw your header size with #334600 ink. The header size in this tutorial is 800px x 200px. Add the following layer styles: Inner Glow.

Start with a large black canvas, on your layers window make a new layer set. Name it Dark Header. Create a new layer then draw a 663 x 6 pixels, white rectangle. Add the following layer styles:

Create a rectangle using rectangular shape tool. Apply layer style we used for rounded frame. Create another rectangle using rectangular shape tool. fill it with black color. This will create a button.

In this tutorial you're going to make a header for the creative template series.. Previous tutorials: Creative Template: Navigation Creative Template: Background

In this tutorial you will learn how to create a dark header with a sleek and stylish navigation. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

In this tutorial you will learn how to create a dark professional header design. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

In this tutorial you will learn how to create a design studio header for your website. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

In this tutorial you will learn how to create a professional and simple red header with navigational menu. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Now add shadows to the whole design, first add a marquee selection around your entire metallic header design then go to Edit > Copy Merged then Paste. You should now have a new layer with the whole metallic header design, set the layer's blending mode to Lighten and flip it Vertical through Edit > Transform. Then move the design down as shown below.

Welcome back for Part II! In this episode we are going to explore the techniques used in building the aged paper background, borders and grungy star used in the current PSHERO header.

� 2008-09 PSDVIBE. All Rights Reserved. All tutorials are property of PSDVIBE and may not be redistributed without the written consent of PSDVIBE

In honor of Valentine's Day - I wanted to offer a photoshop tutorial on making a cute and girly - love heart header.??

Start with a 900 x190 px canvas, in your layers window make a new layer set and name it Header Design. In a new layer draw a 859 x 13 pixels, #0D0502 colored rectangle just below your canvas.

STEP 1: Start with a 1000 x 190 pixels black canvas, in your layers window make a new layer set and name it Gaming Header. Create a new layer then choose your Rectangle Tool and draw a 1000 x 103 pixels, #1D1D1D colored rectangle. This will be the size of your header so if your current header is smaller just add your own width settings.

Start with a 760 x150 px canvas, in your layers window make a new layer set and name it Header Design. In a new layer draw a 760 x 26 pixels, white rectangle just below your canvas.

I've had quite a few requests for a tutorial on how I created the previous pshero.com site header, so this tutorial will cover creating the background and red bars of the project.

2. Time to give it more of a PHP Nuke style. Time to grab your polygonal lasso and draw a shape that resembles the following: Place it along the left edge.

This tutorial is aimed at beginning Photoshop users and makes heavy use of layer styles, basic shapes, and a little pen tool. I try to explain each step in detail.

In Photoshop create a new document - set the width to whatever you want the width of your website and the height to 80px. For this tutorial my width is 400px to save room. Press Ctrl + A to select everything. Go to Layer >> New Layer and call it "bg". Use the gradient tool and fill the selected area, from top to bottom with a silverish gradient. The gradient Im using goes from #E1E1E1 to #C5C2C2. To make sure your gradient is perfectlt straight hold down the shift key whilst you click and drag. Now use the rectangular marquee tool and select the top half of your design. Create a new layer and call it "cover". Now fill this area with white using the fill tool. Now change your "cover" layers opacity to 25%. Now using your text tool type in the name of your website and if you have one - add a logo. You may also want to add a slogan. Right click on the layer which your site name is on and go to blending options. Tick the box for stroke. Set the size to 3px. For the colour you need to use the dropper tool and click on your header just beneath where the colour changes. You could also do this for your logo. And thats it. Heres my final header:

In this tutorial we will be creating a beautiful blue header. suitable for any purposes, simply and effective. 1.first off, create a new document that is 800 x 98 px (you may wish to round this up to 100) create a new layer and using your rectangular marquee tool drag out an area that is 800 x 73 px. fill this with white. bring up blending options for this layer and create a gradient from #1B52C2 to #1C8FE8.

Anywhere on your header background draw a 1 1000 x 20 pixels, white rectangle. Set the layers blending mode to Soft light at 18%.

No HTML code is allowed. Line breaks will be converted automatically. URLs will be auto-linked. Please use BBCode to format your text.

Select the clover layer and press ctrl+e to merge the layer down with the rounded rectangle layer. Apply a stroke of 2px to the rounded rectangle layer with #fffff as your color. Then I will add the words “TeamTutorials�? using the font 42pt Sego. The color is white #ffffff. Technorati uses a slightly different font (neo sans), however, it is not freely available. Your image should turn out like the one below.

[...] Amanda Kern wrote an interesting post today onHere's a quick excerptIn this photoshop tutorial you will learn how to make a gaming header with a unique navigation interface. (more…) [...]

Create this Step 1 Start with a 900px x 400px white canvas. Make a new layer set titled Header. In a new layer draw a large black rectangle across your canvas ( width: 900px x height: 70px)

OMG, that looks awesome! but one question, that alien guy in the header, did you make him also in Photoshop? or did you use a 3D package like Maya or 3D's Max to make that?

[...] richtig anwendet. Um einen kleinen Einstieg in den Bereich des Webdesign zu geben, ist das Tutorial ??Create a Simple Gradient Header in Photoshop?? genau richtig. Der Schwierigkeitsgrad ist nicht besonders hoch, eignet sich also auch sehr gut [...]

Now we need to select a font for our header. A nice thick bold font will work best here. Whichever font you choose, make sure to use all capital letters. This reflection will not look good with lower case letters that hang down such as "y" or "g". I am choosing a font called "Impact". I am also using a burnt orange color (hex#CC9900) for the text.

Here we will create simple yet useful website header for a Business related website. This free tutorial has many tricks that you pick as a website graphics designer.

[...] lukeroberts.us wrote an interesting post today onHere's a quick excerpt In this photoshop tutorial you will learn how to create an effective Colorful Header for your websites. (more…) [...]

If you want to impress your client as website designer the first thing it to create a professional website for yourself. Here is a photoshop tutorials for you to create a professional Website Header using 3d cubes design layout.

If you need a website header image in green theme, take a look at this photoshop tutorial.Create a new file and choose any a suitable size for website navigation, Now fill the Background Layer with any color and create the following selection with the help of Rectangular Marquee Tool

Testimonials | Job opportunities | How we work | Warranty | Web design news | About us | Contact us | Web Design Resources Freelance Web Designer | Website Design Company Bognor Regis | Web Site Design Chichester | Illustrator Tutorial | Tutorials Web Hosting Review | Chichester Restaurants | UK Services Review Core Media Design Ltd is registered in England No 6557241 Suite B, 29 Harley Street, London, W1G 9QR | VAT Number: GB 930 8084 29 � Web Site Design Company - Core Media Design Ltd 2004-2009

Here you will learn to make a custom header for your website or blog.

Double click the layer to open layer style window. Apply settings as shown.

With this Adobe Photoshop Tutorial, you will be taught how to create a professional web header for a company, business, or any other website. Shown below is a preview of the final result:

Start off with a new document 900�125 with # e5ecf3 as your background color.

Click for full size image 1. Start by creating a new document with the setting shown below. (of course you can use a different size if you wish)

2. Fill the background with color: #000000

Step 1: Base Create a New Document with the dimensions of the banner you want to make, and include about 50px for your navbars (my document will be 780�200. Create a New Layer, and fill it with Grey (#797979). Now go to your layer styles, and apply a gradient with these settings:

Create a new document 780�200.

2. Now draw the gradient from top to bottom.

Now should you have something like this. (Click for larger view)

Start this tutorial by making a new document.

Difficulty 1 2 3 4 5 6 7 8 9 10

Press Ctrl+T. Right Click and select Warp. Select "Flag" from the preset warp shapes. Adjust settings as shown.

This is a simple clean header design that can be used for any type of website, but I will add some things that are probably more appropriate for blogs as I continue along in the series. I will assume a very basic level of familiarity with photoshop or any image editing program.

Step1: Create a new document 780�200. Step2: Create a new layer and fill the top half of the document with red #FF0000. Create a new layer and fill the bottom half with red #850000. Step3: Apply these layer styles to the top layer:

[1] Take a new file of 500 pixels,300 pixels, of resolution 72 dpi in the RGB mode.

[1]-First of all open new document of Custom size and make Height & Width 400 x 400 pixels.

This is what the final result will look like

In this first tutorial, I???ll go over the basics on how I made the top graphic (header) for my blog. We'll be working with masks, blending modes, the LucisArt plugin, color correction, levels, and brushes. A basic understanding of Photoshop is needed to follow this tutorial.

This is what you will be creating :

Mail (will not be published) (required)

Mail (will not be published) (required)

Mail (will not be published) (required)

Let's throw a new color onto a new layer. I'm going to be using a bright, pale orange, like #fbb85a. I'm also going to adjust the size of my brush to something a bit smaller, like 300px. After painting, I'm going to change the blending mode for this layer to Overlay.

Inner Shadow:

1) Create a new image 700?60 with transparent background. Rename this layer as �background?

In this tutorial, I will demonstrate one method of making a website header which is clean, simple, and perfect for a professional looking website or forum. Since a header is located at the top of a website, it basically defines it, and for this reason, a header should look professional.

Mail (will not be published) (required)

While serviceable, this logo does the job. But I decided to go with a little more personality rather than a logo on a reflective floor�

Press and hold Ctrl and left click the preview area of the blue bar in the layers panel.

Blend Mode Colour set to #000000

Your Own HTML:

This will be your final result :