Image Coding

I really would advise against coding anything by slicing. But that's just me. Slicing usually tends to make bulkier more bandwidth intense layouts, when you could just start from scratch and layer the design, using images only on things you can't achieve with CSS.

Obviously you would need to know the basics of CSS. But if you're going to learn CSS, you should kind of let slicing go. Slicing still uses tables, and tables have been outlawed for years now. But I'm not suggesting you stop using tables just because they're archaic. I'm just trying to save you some time and effort. Tables were never meant to "house" designs, they just kind of got bastardized into it, and they've never been able to fully handle the job. You pull your hair out trying to simple things with tables, and it gets pretty ugly if you have to resort to hacks. Tables were meant for data. Any sort of interface design needs to be done with divs. And if you just do the "crop / new document" method, you're bound to use less images, thereby creating a quicker loading layout. And even though everyone and their grandma has high speed internet, we're down to mere seconds that could make or break a visitor's interest.

Lol I used to just add an image with a hyperlink added to it and then positioned it with css... but then again I never actually properly read or learned anything about html/css so that might be a bit ghetto... Guess I should start learning it as it's pretty awsome.

wait is CSS photoshop? and this is a bit confusing does anybody have a tutorial of some sort?

CSS has nothing to do with Photoshop. It stands for Cascading Style Sheets. CSS allows you to put everything that is going to affect the look of the site into one document. This way if you have 100 pages in your website, and you decide you want to change the background color on all of them, you simply open up your CSS document, find the code that pertains to the background, and change the hex color. By changing anything in the CSS document, it will have the same effect across all of the webpages (so long as you link to them in each individual HTML document).

Here's a quick example. You have two identical web pages. Each one is its own HTML document. Now say you want to make the header italic on both pages. You could go into each of the two documents, and put the <em></em> tags around the header. But if you have two hundred pages to do this to, it'll be way to time-consuming.

So what you do is create a new document in Notepad. You're going to make a class. All you have to do to create a class is type

.classname{
}

You now have a class. Now you have to add some attributes to this class. All we need is italics for this example. So you would write the class like this:

.classname{
font-style:italic;
}

Now save this file as a CSS document. Go to each of your two web pages and find the header you wish to convert to italics. Now, if it's a header, it should have something like <h1> in front of it. You would change it to <h1 class="classname">. Your headers should now be italic when viewed in a web browser.

That's a really basic example of what CSS is used for. Just remember to keep all of your content in the HTML document, and all of your styling in the CSS document. This makes your code much cleaner. And it's definitely less of a headache when you need to alter something.

If you're still completely clueless I would use this following guide and go through the entire thing. Don't worry I went through the whole thing myself when I first started, it's not that bad.

http://articles.sitepoint.com/articl...inners-guide/3

I guarantee once you finish reading this, you'll be able to code your website.

thanks man. ill def take a look

Can't believe I'm going to bring this up...back when I was a baddie, I made a simple tutorial on how to design a simple website in photoshop. I then made a tutorial on how to code that same website. A lot of people said it helped them a lot. Hope it helps you.

This is the first video for the design, you can follow that if you want to practice designing and coding together:
http://www.youtube.com/watch?v=J4MJRhXajuw

If you wanna try to just learn from watching the coding without designing here is the coding video:
http://www.youtube.com/watch?v=IKeg1nhe-wE


Here is all of them, searching GFxCube on youtube:
http://www.youtube.com/results?searc...rce=opensearch

Good luck.

I'm becoming a fan of slowly cutting the Photoshop component out of the design process of a website. Design the website for where its going to live: the browser.

With Photoshop I find it a laborious task to design a static prototype. It does nothing but look pretty, plus Photoshop's text-rendering can be deceiving. If you design it within the browser, you know precisely how the site is going to behave since you are interacting with it right away and bypassing all that slicing mumbojumbo. Furthermore, it makes the layout lightweight and easier to change overall. Typically you'll only require 2-3 images on a simple site.

As Solaris said, web technologies (HTML5, CSS3) have really caught up to the point where you can replicate a lot of the things we used to require Photoshop for. Take a look at @font-face, border-radius (for rounded corners), transitions and gradients for some awesome effects.

Yup I agree. CSS is definitely the way to go.