Sunday, February 5, 2012

Videos > Photoshop Tutorial: Create a Simple Web Header Bar

Photoshop Tutorial: Create a Simple Web Header Bar

by Website Designer on June 30, 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!

Tags: , , , ,

Related Web Design Posts

{ 25 comments… read them below or add one }

puffnpluky76 August 31, 2010 at 7:52 pm

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.

AL7boob1 August 31, 2010 at 8:47 pm

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

famousmoney123 August 31, 2010 at 9:24 pm

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

Thanks, FamousMoney123

elobiretv August 31, 2010 at 9:38 pm

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

dumpadidu August 31, 2010 at 9:45 pm

@yurikenn
make a better tutorial then you idiot

sunioj101 August 31, 2010 at 10:39 pm

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.

friendslove August 31, 2010 at 10:47 pm

are you using photoshop cs4 or cs5?

jmbeen August 31, 2010 at 10:58 pm

Thanks for all the hard work!

TCNroomba August 31, 2010 at 11:54 pm

@tutvid ur crazy….

Hacknor September 1, 2010 at 12:46 am

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

thetechall September 1, 2010 at 1:06 am

@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

iFinni September 1, 2010 at 1:32 am

Thanks. I allways appreciate your videolessons. :)

yurikenn September 1, 2010 at 2:09 am

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

yurikenn September 1, 2010 at 3:05 am

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

PrinceProStudio September 1, 2010 at 4:04 am

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

thaman667 September 1, 2010 at 4:15 am

@GunskiMod
Totally agreed that would be awesome!

ucantburpthis September 1, 2010 at 5:13 am

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

roadman73 September 1, 2010 at 5:22 am

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

tashtan1 September 1, 2010 at 6:20 am

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,

graphicsite September 1, 2010 at 6:35 am

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

thehackerization September 1, 2010 at 7:22 am

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

AndersTherkildsen September 1, 2010 at 7:23 am

@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.. :)

JoeAlcorn September 1, 2010 at 7:27 am

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

Djghost1123 September 1, 2010 at 8:24 am

@TenshiBan
look up flashbuilding on youtube, he does that

joka232 September 1, 2010 at 8:54 am

@dcallstar51 cuz noobs dont know the shortcuts and stuff so he made it simple for them!

Previous post:

Next post: