首页

PS教程

PSD素材

PS素材

背景图片

高清图片

字体下载

矢量素材

PS资源

PS作品

会员专区
注册 / 登录
收藏
入门教程照片处理抠图教程调色教程文字特效经典合成鼠绘教程滤镜特效非 主 流GIF 动画签名溶图创意设计
 您当前的位置: PhotoShop资源网 >> PS教程 >> PS教程 >> 创意设计 >> 正文

Clean Header

[ 作者来源:cornoncob 编辑整理:PhotoShop资源网 更新时间: 2006-08-01 录入: 黄叶飞扬 ]

 

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.

Remebmer, this is only one method of creating a header. The possibilities are literally endless when it comes to making headers so let this tutorial just be of inspiration to you.

The first step to make the header is to open Adobe Photoshop. This may be challenging for some but I'm sure you'll get it ;)

Next, create a new document with a white background at whatever width and height you would like the header to be. I chose 800px wide by 200px high.

按此在新窗口浏览图片

Now, set your foreground and background colors to a color and a darker shade of that color respectively. I chose a blue and a dark blue.

Create a New Layer (Shift + Ctrl+ N) and select the Gradient Tool (G)

Using Linear Gradient, simply fill the layer with a smooth gradient of the two colors you chose earlier.

按此在新窗口浏览图片

So far so easy, huh? Here, I created a new layer and made a skinny selection at the bottom of the header.

按此在新窗口浏览图片

I selected a white and gray gradient and filled the selection. This will be the navigation menu.

按此在新窗口浏览图片

Here is where your imagination comes in. Find a way to spice up your header a little. Since world maps are popular in headers now and days, I will demonstrate how to do this.

First, find a picture of a world map and open it up in photoshop. Using whatever tequniques you'd like, get a basic shape of the map and drag it onto the header in a position you like.

按此在新窗口浏览图片

Select the shape of the map by holding the Ctrl key and clicking on the thumbnail of the layer with the map on it in the Layer Window.

按此在新窗口浏览图片

On a new layer, fill the selection with any pattern or color you like (Shift + F5).

按此在新窗口浏览图片

Play around with the blend modes and opacity until you get a result you are happy with.

按此在新窗口浏览图片

Here, I just cut off a little bit of the map at the bottom.

按此在新窗口浏览图片

Get some nice and clean fonts (Impact and Verdana in my case) and type in your site/forum name and slogan.

按此在新窗口浏览图片

Use the same font to type in the sections of the site on the navigation bar. Try not to use more than 2 different fonts as it takes away from the simplicity and professionalism of the header.

按此在新窗口浏览图片

Finally, add simple gradient seperators between the section on the navigation menu.

按此在新窗口浏览图片

Complete! You now have a professional header to display at the top of your website or forum. I hope you learned something or were inspired in some way by this tutorial.




≡★ 免 责 声 明 ★≡

除本站原创外,本站所提供的所有教程均收集整理自网络,其版权归该教程直原始作者或原始出处所有!

除特别声明外,您可以在保持教程的完整和注明来源的前提下免费复制、转贴本站所提供的所有教程;但是,不可以盗链本站的图片!

除特别声明外,在未经许可的情况下您不得将本站所提供的任何教程(包括资源)用于商业用途;

如果确有需要,请自行与该教程的原始所有权者(即:原始作者或出处)联系,本站不提供相关服务;否则,由此而引发的一切后果由您自负!