[Webdesign] Steps to become a webdesigner - Tutorial #1

[Beo]

Hello and welcome to my tutorial.
There will be a series of tutorials starting with the basic "how to make the template".

Here is what the series will contain. The lines in Green will be already done, the Red will be To-Do.

Photoshop Webdesign - Series #1
Tutorial #1 - Creating your template.
Tutorial #2 - How and where to input images, sliders & interactive buttons.
Tutorial #3 - Open to suggestions.
Tutorial #4 - Open to suggestions.
Tutorial #5 - Coding your layout using dreamweaver for HTML.

So here is a few tips before you start.

- Focus on a color scheme, such as red and black, yellow and white, blue and white, gray and blue etc. Make sure you have two colours in mind. This is the best way to keep your colors together which really makes a difference to your layout.

- Keep everything flowing nicely. By this I mean do not have something like this:


Rather make it clean like this:


That's just an example.

- Focus on being the user, would you find it easy to navigate around your website? Try to ask a friend if they would, as the creator, you'd know where to go straight away where as your friend would have to actually look for things. Perhaps even a few bugs would be found.

I guess that's it for now. Here's the video. There is no talking because I don't like to narrate and there is no music because you need focus. I refuse to keep using text inbetween frames to tell you the method of what I did. E.G. right click layer -> new layer when I am creating a new layer all the time. It's wasting my time and you should already know your way around Photoshop before you even start.

Sorry if I was a little to fast, it's one of my first tutorials. CONSTRUCTIVE criticism is very welcome.

I suggest you watch the video in fullscreen so you can actually see what I am doing :ninja:

[video=youtube;DBBzMkBKHl4]http://www.youtube.com/watch?v=DBBzMkBKHl4&feature=plcp[/video]

Happy web designing.

 

[Ninja]

Seems like a good guide.

Time to learn some HTML & CSS, my friend.

 

[Beo]

Seems like a good guide.

Time to learn some HTML & CSS, my friend.

Yes sir. I'm still learning myself. But it makes me better doing free things like tutorials, web designs etc.

 

[Deleted member 92788]

Quality is a bit low, somethimes hard to see what u do

 

[narko]

Very good tutorial I can not wait to see the others.

PD: You should use another program to record, to more quality.



- - - UPDATE- - -

Update this is my first newbie template ;d

 

[Zisly]

Writing about the subject is usually a good way to get a deeper understanding of things, usually you don't really grasp 100% what something does, you only know it has given you the result in the situations you've been in but you don't know why, just that it works. The more you know, the simpler you can put it things as well as draw references to other things

 

[Beo]

Quality is a bit low, somethimes hard to see what u do

I know

I think the next tutorial will be written like Zisly said.

 

[cordinator]

Nice work Three Magic rep+
for this amazing work

 

[City]

I made this
http://i46.tinypic.com/23jjbm.png

 

[Beo]

I made this

Looks good Try to explore more now with effects so it makes it look better Nice and clean.

I'll continue making tutorials when enough feedback has been given about this.

 

[Vendeliko]

 

[Zisly]

How a Web Design Goes Straight to Hell - The Oatmeal

 

[Beo]

Any more tips/ideas for the next tut?

 

[Deleted member 92788]

Better quality(if possible ofc) try making it abit more advanced and if you're using brushes etc then tell us what they are xd