Photoshop Tutorial: Create a Simple Web Header Bar

13 04 2011

If you are not very familiar with creating simple graphics in Photoshop this is the tutorial for you! We will start from scratch and explain every little thing and build a nice little header bar you can use in web design. Obviously you can go ahead and create your bar at multiple widths and use the design techniques for all sorts of things in Photoshop and web design! We will also learn how to just drop that simple letter press effect onto our text and icons we place on our bar!


Actions

Information

25 responses

13 04 2011
TheMeatDroid

Thanks! Check out my website with a header I made in PS! beans.net78.net

13 04 2011
puffnpluky76

Hey tutvid. I noticed that in Dreamweaver you can link only some parts of an image. You could use those icons on the header bar to link to other pages in your website.

13 04 2011
AL7boob1

your English is amazing ….
my English is not really good but u make me understand ..
Thank You

also your teaching is really good
thanks man and we need more

13 04 2011
famousmoney123

Nice Video, Could you guys go to my channel, watch some of my videos, and subscribe if u like them.

Thanks, FamousMoney123

14 04 2011
elobiretv

@yurikenn learn to use proper grammar for a start. secondly he needs to speak in his videos. most people watch these tutorials to learn more about photoshop not to mimic how to do something.

14 04 2011
dumpadidu

@yurikenn
make a better tutorial then you idiot

14 04 2011
sunioj101

Yea man, the reason why his tutorials are so good is because he teaches us how to use many more features not only to mimic his, but to create our own things.

14 04 2011
friendslove

are you using photoshop cs4 or cs5?

14 04 2011
jmbeen

Thanks for all the hard work!

14 04 2011
TCNroomba

@tutvid ur crazy….

14 04 2011
Hacknor

its a very good tutorial but you can do most of the things even easier but still nice

14 04 2011
thetechall

@yurikenn If he didnt talk then his tutorials wouldnt be as good as they are. they go indepth so if you dont like it dont watch it

14 04 2011
iFinni

Thanks. I allways appreciate your videolessons. 🙂

14 04 2011
yurikenn

American fool, talking much and doing little. You talk too much, stop talking and do the tutorial faster and less boring. View your tutorial was a waste of time, all the time you spend talking and talking. The longer video with little gilipoyas benefits. Atte: Tu male

14 04 2011
yurikenn

Americano tonto, hablas mucho y haces poco. Hablas mucho, deja de hablar y haz el tutorial mas rapido y menos aburrido. Ver tu tutorial fue una perdida de tiempo, por que todo el tiempo te la pasas hablando y hablando. El video mas largo y con poco beneficios gilipoyas. Atte: Tu macho

14 04 2011
PrinceProStudio

Omg, this is Some Awesome tut Dude, Keep It Up!

14 04 2011
thaman667

@GunskiMod
Totally agreed that would be awesome!

14 04 2011
ucantburpthis

thanks for the tut
and new kb shortcut learned for me
the spacebar while dragging shapes.. really useful ^^

14 04 2011
roadman73

For a Newbie working with PS,Dw and Ai i really appreciate the work you put into making the Tuts for us. Many Thanks

14 04 2011
tashtan1

i wish i had a website i would use this tut to make my self menu bar header and menu buttons this looks real nice, thanks hopefully i’ll use it some time later cause i am willing to learn html,php and little bit of sql,

14 04 2011
graphicsite

Thank you very much for the recording…very useful!
Christa

14 04 2011
thehackerization

Hey tutvid i admire your videos and love them. But i think you should show how to desgin our youtube channels by ourself in Photoshop. That would be great because there is no straight video on youtube “How to make a youtube Layout” Or which is working. So i kindly request it. It will get us more proffesnail in Youtube. So please help us with this. I also think all of your Suscribers want it.
All his Suscribers please make this comment thumb up so Tutvid can see it.
Thanks

14 04 2011
AndersTherkildsen

@minhmeo1209 You have to save the FLA file in a folder, then publish the .FLA file, which will create an SWF file and an index file. Open the index/projectname file by dragging it to dreamweaver or right clicking on it and open in dreamweaver. Rename it, and upload both files to your ftp and you should be good.. 🙂

14 04 2011
JoeAlcorn

Hey Nathaniel are you going to get CS5?
Any CS5 tutorials coming?

14 04 2011
Djghost1123

@TenshiBan
look up flashbuilding on youtube, he does that




%d bloggers like this: