...

View Full Version : A little help slicing and coding with photoshop and image ready



Spit_Me_Out
12-22-2006, 07:09 PM
Hey everyone, I am new here. And I am also new to designing website layouts with photoshop/image ready.

I use Photoshop 7.0, and Imageready 7.0

I designed my intial layout, and I want to use it for the next look for my website. It isn't that complicated to slice, i don't think. but I have never sliced a layout, and then coded it before.

Can someone please help me out a little?

Here is my design. Quite simple, but I like it.

http://i80.photobucket.com/albums/j196/Spit_Me_Out_666/Layouts/layout2.jpg

I would like to use CSS for this to. I really hope someone can help me out a little.

By the way. i don't have anything like Dreamweaver. just notepad. lol.

Oh, does this hlep any? to let you know what everything is. :p

http://i80.photobucket.com/albums/j196/Spit_Me_Out_666/Layouts/ggggggg.jpg

vinyl-junkie
12-22-2006, 11:09 PM
Welcome to CodingForums! :D

What do you know about HTML? And CSS? Have you Googled for any of the sites that demonstrate how to slice an image? We're willing to coach you as you learn how to do this, but first we need to know your skill level. Then we can suggest next steps for you.

Spit_Me_Out
12-23-2006, 12:40 AM
I know HTML great, and CSS ok.

And i know PHP quite well, as well as javascript.

I have my website which is down right now. editing a few things PHP wise, and it is gonna take a couple days. Right now i don't have a CSS based layout, well theres some CSS, but not much. here's the website www.maggot-army.com

And yes, I have searched, I have been searching for the last week. I just got photoshop in august. And i finally got to the point where I figured I could design a layout. And every tutorial I find uses dream weaver. And if I do find a good tutorial that creates it from scratch it is something that only needs like to or three slices, so it is simple, and my layout which i designed I know will be more complicated than that.

See where I am at?

vinyl-junkie
12-23-2006, 06:14 AM
Sounds like you've put quite a bit of thought into this. However, I think you're making this quite a bit more complicated in your mind than it needs to be. I use Paint Shop Pro, not Photoshop, so I can't advise you on the technical aspects of slicing this image. What I can do though is tell you how I would personally slice it, which is only four slices.

I would make the first slice the top third of your image. Use CSS to set a background color to the dark gray of the outer edge of that image. That way, the image fills the whole top half of the page, no matter what browser resolution it's being viewed from. I would make three slices from that footer, starting with the left and right sides of the footer. The middle slice would be a very small section from the middle of the footer with a "background-repeat: repeat-x" style to fill in the whole footer. The middle section can be set using CSS background-color, so that doesn't need to be sliced at all.

Also, and this is probably a little basic, but I'll say it anyway. Take a copy of the original image and work with that. That way, if you just really mess it up, you can make another copy of the original image and start over.

I hope this helps get you started. If you get stuck on anything or have additional questions, feel free to ask. That's what we're here for. :)

Spit_Me_Out
12-23-2006, 07:09 PM
thanks for the help. I will do that.

And yes, I have put alot of work into this. Slipknot is my favorite band, and one of the ways I want to show that is by having a good looking fan website. ;)

I do have a copy of the orriganal. I don't do anything without a copy. A PSD copy at that. That way all the layers are preserved so that I can Edit the look of the image/layout when I please.

Thanks again. Won't hesitate to ask another question if needed.

hasnain721
12-25-2006, 02:21 PM
Hi,
If i was u, i would code it in the following way:
* Crop one pixel of the background and then in the html, change its width to 1024 or what ever u need accordingly.

* Crop one pixel of the main box and then change its height and width accordingly.

* Crop the header and the spike ball and File-Save for web it.

* Crop one pixel of the footer and then change its width in the html file.

EDIT: -
I have done something very quickly 4 u (took me about 30 minutes) to show what i mean to say. U can download it from here: -
http://rapidshare.com/files/8898813/coding_forums.rar


Hope that helps.
Plz reply back if ur stuck some where.
Hasnain Mir Mohammed

Spit_Me_Out
12-31-2006, 02:48 AM
i can't see it.

I downloaded it. but it won't work. I can't ever get rapidshare files to work for me.

Could you host it somewhere else or something? I really apreciate your help, and i don't want it to go to waste. maybe try e-mailing it to me

Spit_Me_Out666@yahoo.com

haveacigar
12-31-2006, 04:18 AM
Here you go.. i even did the html and css for you ;)

enjoy
ciggy

hasnain721
12-31-2006, 01:18 PM
i can't see it.

I downloaded it. but it won't work. I can't ever get rapidshare files to work for me.

Could you host it somewhere else or something? I really apreciate your help, and i don't want it to go to waste. maybe try e-mailing it to me

Spit_Me_Out666@yahoo.com

sure
try this: - http://www.megaupload.com/?d=ITSURA5U



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum