Click to See Complete Forum and Search --> : Photoshop
GoverNment
01-16-2009, 03:44 PM
I think this is the right place..anyways does anyone got good plugins for making website templates in photoshop ? or got any tips in make one in Photoshop CS3 Extended?
I think i'm going to try and make one and i need some tutorials how to slices the images and all that...
GoverNment
01-16-2009, 08:10 PM
i followed this tutorial and got my design, i was wondering how to slice them?
http://hv-designs.co.uk/2007/10/10/web-design-layout-3-tutorial/
if anyone got a good slicing tutorial i'd really appreciate it!!
yeah, i try slicing but idk how to save to make it CSS/HTML ready and everytime i slice one image i get like 4 slices everytime i just try to get a button.
Another thing is idk if i should make it one layer, or have multiple layers for everything! =X
GoverNment
01-16-2009, 09:43 PM
i tried working with it an all but i got stuck on the CSS part..
.
say this is my first div, and my first sliced image..
#lgph_01 {
background: url('images/location-of-image/')
position:absolute;
left:0px;
top:0px;
width:800px;
height:19px;
}
To be honest this is my first ever PSD>CSS layout and i'm so lost on how to code it, here is my screenshot of my slices, idk how many to make so i made all the buttons and logos
http://img129.imageshack.us/img129/1831/52228942hk4.jpg (http://imageshack.us)
Eye for Video
01-16-2009, 11:38 PM
Are you sure you want to go the slicing route? There are what...30 some pieces? Why not skip that and do the entire layout with CSS. You'll have far fewer elemnts to place and you be learning a skill for the future. Slicing may have been needed when bandwidth required downloading small chunks at a time, but CSS is currently a much more acceptable practice. My opinion...stay away from absolute positioning as much as possible.
Start small, with 5 or 6 <div> and practice positioning. Think of each <div> as a box, all your little boxes will go inside one big box. So your first <div> will be an all encompassing
<div id="main_container">
then you position that (with CSS), set the margins for the page, size (width, height, in pixels or %), background color, etc. Then start every page with your main_container and all your pages will come out looking the same. Need to change something, just change the CSS and they all change.
Once that's done start placing the other <div>s inside, with dimensions and floating as needed.
Time spent on a slicing tut could put you a long way toward learning CSS positioning.
http://www.w3schools.com/css/default.asp
Best wishes,
EfV
Stephen Philbin
01-29-2009, 07:17 AM
Do you mean you want to know how to get the image in Photoshop sent over to Dreamweaver and converted into code? I did this last week in college (they teach us all kinds of horrendous crap there), but we did it going from Fireworks into Dreamweaver instead of Photoshop into Dreamweaver. Have a look for some sort of export button in the top right corner of either the window containing yer image, or the main Photoshop window (I can't remember which one it was on when I did it in Fireworks). If Photoshop's UI is anything like Fireworks', then I'd imagine the button will be there in Photoshop too.
Just click that export button and you should get a small menu that drops down with approx. 3 options. One option will be "Export HTML", the second will be "Update HTML", and I can't remember what the third one is. The first time you ever move your design from Photoshop to Dreamweaver, you must select the Export HTML option. Once you've exported your design into dreamweaver you can do what little you can with it there. However, if you ever update the design (i.e. create a newly sliced region, alter an image, or even correct a tiny mistake) you will have to go back to Photoshop, make your changes and then select the "Update HTML" option.
Be warned, though. Eye for Video is right about it not being a good way to go about building pages. It's certainly the worst method of creating a web page I've ever seen so far. It makes creating a page require much more work and messing around, produces utterly attrocious code, produces far more code than is actually needed (about 5 times more code than necessary when I did it at college last week), greatly increases the bandwidth consumption of every page request and you can pretty much forget about any hope of being anywhere but the bottom of search engine results.