PDA

View Full Version : how would i slice and code the css for this content area?



pbul2004
Jan 25th, 2010, 10:26 PM
Hi,

I am fairly new to css and i have completed my design in photoshop, but i dont know how i am going to slice the image up and code the css for the content areas!

They have a gradient, curved edge and a border.

I want it so that when you are typing in the div of the content area the image/borders move down with the text.

I have attached an image as im probably not explaining this very well. I know one way of doing this is to have it as a background image then have a div on top but then if the text is runs over the image it will not move down with the text.

Any info or tips on how i might do this would be great as im abit unsure of where to slice and how i could achieve my goal in css?

Thanks for any help!
Paul

jenius
Jan 25th, 2010, 11:27 PM
Ok, so being mainly a designer myself, I can feel your pain. One day, someone asked me to make a website, and I was like "sure!", so I made up the graphics nicely like you have, then suddenly realized I had no idea how to make a website.

Unfortunately, there is no easy solution on this. Coding is an entire different discipline than graphic design, and takes quite a while to get a handle on (take it from me - I've spent a large number of hours learning it, and am still struggling on many areas).

I'm not sure if anyone here would be nice enough to code this entire thing for you, because thats a lot of work, and the kind of thing that people often are paid for. I can offer you some suggestions though!

1. Buy a good CSS book, sit down by the warm fire, and do some reading. I started off with CSS: The Missing Manual (http://bit.ly/7EiIWo), and it was a super great book.

2. Start viewing the source of websites you think look good, or function well. You can see all their coding there, and learn a lot of cool tricks.

3. Never use the slice tool in photoshop. It is outdated, and will not do the trick for you. What you want to do is start thinking about how your website will look from a "layers" standpoint, which is not that hard being a photoshop user. First, you need to lay down the background. Hide all the other layers until you have just the background, then figure out how you are going to place that on the page (example, if it is a gradient, you can take a small horizontal slice, and use "repeat-x"). Next you need the boxes. These need to be cropped out, saved as pngs, and placed using divs. Then the images have to be placed within the divs you used to create the basic layout, then the text goes over it all. Use real text for the text and not images as much as you can.

Good luck, and let me know if you have any other things you're stuck on!

lewis_
Jan 26th, 2010, 12:49 AM
Hi,

I am fairly new to css and i have completed my design in photoshop, but i dont know how i am going to slice the image up and code the css for the content areas!

They have a gradient, curved edge and a border.

I want it so that when you are typing in the div of the content area the image/borders move down with the text.

I have attached an image as im probably not explaining this very well. I know one way of doing this is to have it as a background image then have a div on top but then if the text is runs over the image it will not move down with the text.

Any info or tips on how i might do this would be great as im abit unsure of where to slice and how i could achieve my goal in css?

Thanks for any help!
Paul

Basically Photoshop CS4 has made this an easy task! first you need to use the slice tool in photoshop, by pressing (C) then looking down on the menu to find the slice tool.

You then need to cut the areas of the site you want in DIV's such as the bits with font in. After experimenting with this i found out that the best way is to hide all the layers besides the background layer and save it as a png, and then add the image to your background in html to get the style you want. Then you want to hide the background layer in PS and show all the other layers you have added your slices over...

You now need to go to save for web and devices (alt+shift+ctrl+s), instead of save as. You then click save, and you want to click other on the drop down menu at the bottom of the window html slices, then generate css. This will save all your slices as images and add them into the html according to where they are in the image in PS.

This is obviosuly a simplified guide but have a mess around with it, if you need anymore help feel free to ask. Upload a psd next time!

Secondly for the divs to expand when you type more text you need to look at hieght attributes and images repeating!

Lewis.

edit:

This may help:

http://www1.picturepush.com/photo/a/2830129/img/2830129.png (http://picturepush.com/public/2830129)