Image Coding

so me and a few buds are making a music website. i was wonderin if yall know how to image code. by that i mean to an image from photoshop and code it so that it is accesible to be used as a design for the site.

Are you talking about designing a web layout in PS and then slicing and coding each section of it?

yes

Yeah I haven't done that in a while.

lol anyone know how to do it

I can do it. How big is the site?

well just made it and theres nun on it. i want to build it myself so you got any advice?

Well once you have your layout designed, you turn on Rulers if they're not on yet. Then use the guide lines to make boxes. Make a box around each image, each content area, and each navigation link. Then use the slice tool and make selections of each box. After you do this, every box that the guide lines make should be a sliced image over in your layers palette.

To save this for the web, go to File -> Save for web... Then the box should come up with the preview of your work. The only thing to worry about here is the file type you're saving it as. If it's a more simple site, not too extravagant, I would use GIF. But if you have a fancier design then save as JPEG.

Then another box will come up for you to name the file. Make sure you're saving it under HTML and Images. This way it will make an HTML document with the coding for you to customize and creates a folder with the sliced images. Then name it something like index.html.

Do you know HTML and CSS already?

what do you mean by do i know HTML and CSS?

and that sounds complicated haha. so wait do i havta account for the content on the page when i make the boxes? do i just comply all the images together and cut it out or cut it out seperately?

You have to know some HTML and CSS for this to work the way you want it to. Do you know any? Meaning, can you make a simple website with sections and borders and colors in Notepad without ever opening up PS?

It's easier if I see your layout. Then I can give you more specific advice. But yes, you do have to account for content. So you would make a slice (a box) where you want your content to be. It's sort of like creating a text area.

Once your design is finished in Photoshop (before slicing anything), I would Stamp Visible (Ctrl -> Alt -> Shift -> E) and then Cut and Paste it in a new document. Then you'll only have one layer. Then slice it up from there accordingly.

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.