Slicing a website in Photoshop CS4?

IJ
Posted By
Ian_J_Gregson
Dec 18, 2008
Views
666
Replies
6
Status
Closed
Hi there,

I wonder if anyone can help?

I am looking to slice a website up in Photoshop, I have created my design in photoshop for 800 x 600. I think this size is wrong as i haven’t allowed for the scroll bar in the browser…

I notice i can use the slice tool, or slice from layers etc.

What about place holders i have left for "pure" text which of course i will enter in my html editor? But i should imagine i want it to export with the text place holder in the html file otherwise the html with the graphics are not going to line up?

Also i have created a box with rounded corners, i presume i should only be exporting the four corners and using some trickery to lower file size.. I just can’t seem to find any reference on the best way about doing this.

If anyone can provide any assistance i would be really grateful.

Thanks in advance

How to Improve Photoshop Performance

Learn how to optimize Photoshop for maximum speed, troubleshoot common issues, and keep your projects organized so that you can work faster than ever before!

DM
Don_McCahill
Dec 18, 2008
I think this size is wrong as i haven’t allowed for the scroll bar in the browser…

Problem number one. You don’t design web pages to any size. Each user can set his or her window to the size they prefer.

I am looking to slice a website up in Photoshop, I

Second problem. You are using a photo creation tool to design websites. You need a program like Dreamweaver (better yet, learn HTML) to create effective websites. Only use Photoshop for design concepts and perhaps creating graphics. Build the site with a web tool.
IJ
Ian_J_Gregson
Dec 18, 2008
Hi Don,

thanks for the reply, Yes i am using Visual Studio 2008 to develop pages, but i have a page that has nice graphics… so i wish to slice and export part of it for building in my editor (not dreamweaver but visual studio)

My web page is designed for a minimun size of 800 x 600 but as i say i think i got the dimensions wrong… but is centered in DIV
DM
Don_McCahill
Dec 18, 2008
If you want the page to appear without scrolling on 800×600, your dimensions will vary by browser, but you should figure on a space of about 750×425. There is the scroll bars on the right, a small border on the left. The bottom has the Windows task bar, plus the task bars of the browser, and the top has a large chunk taken up by the browser, which will vary according to the make of browser, plus the way the user has configured the browser.
DM
dave_milbut
Dec 20, 2008
Now, if I can just _find_

asp.net, vb.net, c#.net.. etc. 🙂
I
IanGregson
Dec 21, 2008
Hi Curvemeister,

Thanks for the info. Yes i use visual studio 2008 (i actually use the professional version but there is a free version available for download) Its called visual studio express i believe, ensure you get the 2008 version.

Also VERY Important, ensure you download SP1 etc… before VS 2008 was really bad with web design and VS 2005 / 2003 were even worse!

VS 2008 (SP1) has brought us CSS intellisense, jquery intellisense and it doesn’t play around the formatting of your code like previous versions + lots of other fixes…

With that said, is dreamweaver better? Yes probably, Its more advanced for html stuff (i think it even has slicing macros and stuff if i remember) but changing between dreamweaver and VS 2008 for me just isn’t worth it….

Give it a whirl,
C
Curvemeister
Dec 21, 2008
Fixed size web pages, particularly fixed width, are normal and acceptable. Adobe, for example, is using a fixed width 1000 pixel design. Don’t worry about the scroll bars, as most screens have plenty of extra space. Photoshop remains a standard tool for designing such pages.

Re the place holder, for text. There is no need to actually export it – just un-check it when you save for web. There are tricks for stretching images, or using color fill, to form the rectangular portions of borders and backgrounds. The amount of space is tiny, so again I would not worry about it.

Re the layout of pure text – find some examples of .css layout. The idea is to provide a rectangle of pure text that can vary in size, with your other material forming a margin around it.

BTW – thanks for mentioning that VS2008 can do web design. I have it already for software development, and was not aware that it could do this. Now, if I can just _find_ it, LOL.

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

Related Discussion Topics

Nice and short text about related topics in discussion sections