I was made redundant in June and in the last few months I've been learning Photoshop, (Also completed basic + advanced vocational training) I'm working my way through Lynda.com dreamweaver/CSS/HTML and it looks like I'll be getting funding for a HTML basic + Advanced training course at the same centre.

 

I've got a lot of time to invest, hopefully you guys can give me a few pointers!

 

I'm thinking the first step would be a nice website up and running with one or two projects I can add to a portfolio?

 

Thanks in advance for any advice!

 

Michael

Thanks for the reply Charlotte,

 

I'm learning standalone HTML and CSS too so hopefully this will give me a solid foundation for any coding problems!

 

Do you use Dreamweaver for other things?

Cheers

 

Michael

 

 

Hi

 

I don't know much about the books/ courses you mentioned but this is my honest advice:

 

Don't make the mistake I did of coding your web sites in tables or using dreamweaver where it produces the code for you.

 

This is for many reasons like, if you get a problem it is hard to find where in the code the problem is.

 

It is also less easier to SEO a web site with junk code. And it can sometimes look different in each browser.

 

Now, if you are talking about hand coding everything my pointers are:

 

Keep your web site simple. Don't go down the over used route of lightbox portfolios. Currently I am re-designing my own web site. You need a web site that is easy to expand, nice and easy to read and full of SEO text. Because you need clients to find you, unless you're prepared to shell out a fortune on promotional printed info and deliver them to your clients!

 

Get a free yell advert, and submit your business to google maps, yahoo and bing maps.

 

Talk to people, go to business meet ups where you live and net work. Get a smart business card and talk to people.

 

Sell yourself- web design is not just about web design. You have to sell yourself these days, believe in what you do, do it good.

 

Be honest and upfront- don't over charge as a newbie but don't undercut yourself when you get a good portfolio together then you can charge because you've proven yourself.

 

Charlotte

So do you create your layout in photoshop, slice it up and code it all manually?

 

 

Cheers

 

Mike

 

 

I used an editor not dreamweaver for my first few clients now I don't.

 

I don't have a use for dreamweaver I gave my copy away, I suggest you do the same unless you're going to use it to code... I believe you can preview with a click quite easily, in which case that is handy.

 

Char

sounds like your going down the right track Mike... have a look into css frameworks aswell.

Will do, Cheers

So do you create your layout in photoshop, slice it up and code it all manually?

 

 

Cheers

 

Mike

 

 

Hi Mike

 

The way i was taught is once you have your mock-up finished in Photoshop and making sure all graphics are on their own separate layer, i then crop out each graphic using both the crop tool and rectangle marquee tool.

 

I have never used slices even though technically that is what i am doing. So say for instance i have a gradient background. What i do then is hide all my layers except the background layer and select the rectangle marquee tool and make a one pixel wide selection that spans the whole height of my document and select EDIT > COPY and then FILE > NEW. Photoshop will then automatically open up a new document thats the same size as my copied selection. I then save it for web and devices, making sure it's optimized and save it into my images folder i set up for this project and later on i will tile it using the repeat-x rule in CSS.

 

I do the same with every graphic that i want as i believe you have more control and it can be just as quick if not quicker then using slices.

 

Hope this helped and feel free to ask more q's

 

- Neil

That's really interesting, how would you approach a website header or a navbar?

 

Cheers

 

Mike

I would also you get yourself a decent book like "CSS - The Missing Manual" - it was the best £ 20 I ever spent.

Glad to hear that nedski I actually have that on order, should be here by Friday

Hey,

 

Nice to see you learning website design

 

I'm still quite new like you but i have a few pointers. I would suggest that you design your website in photoshop or a good graphics program first. It makes it so much easier to edit it in photoshop then later once you have coded it.

 

While your still new at designing websites, stick at learning HTML and CSS. My friend is also quit new to it and went straight on to learning Javaascript. Stay learning all languages before moving on to any other.

 

I also agree with Charlotte, try and stay away from using tables or if you do, make sure you do all your formatting and colour changes in the css and then using classes.

 

Hope this helped,

Ben

Hi Ben, I want to use Photoshop for layouts if possible, can all this be achieved with cropping/marquee and CSS styles?

 

Also is this covered at all in "CSS - The Missing Manual"? I've found tutorials that take you from psd mockup to Xhtml/CSS but it's a bit confusing to a newbie so I'd like to get to a good standard in CSS first. Plus I'd rather be using my own designs!

 

Cheers

 

Mike

Hi,

 

The Photoshop part is to purely design what its going to look like. What i do is start with a blank canvas the seize of my screen and then i design what i would like it to look like. I then hide all layers apart from the one you want and i use the rectangular marquee tool. I then copy it and save it. The rest is positioned in CSS.

 

I'm sorry to say that i don't know the book you have said about, although any good html and css book should take you through the process of design then coding it.

 

I would suggest looking at some reviews of the book, you would find some more information there.

 

 

Ben

It has had some great reviews also recommended by nedski on here hopefully it'll teach me what I need!

I also recommend CSS the missing manual, best CSS book there is. It's the first coding language I found a delight to learn (unlike actionscript).

 

I never use to slice my mock ups but now I do. I still find it slightly annoying how it creates it's own images folder. I still forget it does this and end up with image folders inside image folders.

Cool, can't wait to get started with it!

+1 for the CSS missing manual - I actually found it an enjoyable to read. The Javascript one is a bit...dry. Hard to make scripting fun sometimes I suppose

Ah I'll check the javascript one out too, had a look at your website, very nice

Good luck in your quest!

 

About exporting for web in Photoshop: slices are the best, and there is an option you can save so that it won't create the images folder every-time or export only the selected slice, etc. (of-course hide any layers you don't need in the export, but believe me it's way more efficient and time saving - and you can re-export easier if any change).

 

Also, be sure to set and use your colors and fonts consistently, also mind proportions and spacing consistency.

 

Indeed stay away from tables !! Use styles only in CSS!! (not in HTML tags)

 

Mind full attention to usability!! This means obvious navigation and at hand consistently.

 

Indeed some scripts like light-box are getting really old really fast.

 

Get with WEB 2, use tags, ratings and interaction as much as possible (but only as much as it makes sense), like content- user interaction; or content - other internet content or comunication ways / social networks and so on.

 

Get with CSS 2.1 and even CSS 3, but very importantly:

 

MAKE SURE CROSS BROWSER everything is Ok (there are solutions for that in books like CSS missing manual).

 

 

Validate your HTML and CSS as much as possible (also about that in books like above).

 

Use flash but know that it's useless when it comes to SEO. (so use it just for header or menu or such, not for important infos)

 

Use javascript only if necessary, some people still use javascript to get what they could easily get with CSS.

Too much java script slows down the page loading.

 

Pay attention SEO perspective: make sure you have the page title, description, keywords and so on, use SEO friendly links (not php parameters).

 

Pay attention to details, they make a big difference, like the favicon or usability enforcements by using CSS :focus or :hover on the right elements.

 

These are on the top of my head but more could be said.

Good luck.

Thanks for the advice, really appreciate it!