Photoshop Splicing Help!

[Kaldia]

Hi all,

So I'm working on my first actual freelance web design job. Thankfully, I only have to do the design part of it, and not the web development - which is great because I am not particularly amazing at the latter.

However, because I am not very good at building sites, it leaves me with the issue of not knowing the best way of splicing certain aspects of the site for a web developer to use.

The site design I have so far is here:



So, while I understand to an elementary degree how to splice a page up...I have the following questions:

1)How should I splice the shadows for the web developer?

2) Should I splice the content areas and send those for them to get the dimensions?

3) For the search bar and login and register areas...is there any particular way to splice those? Or will the developer have to rebuild them.

4) Should I be sending the hexadecimal values of the text to them?


As you can see I'm completely new to this....I just dont want to seem like an idiot when I send the final files to them.

Thank You!
-K

 

[Kaldia]

Hi all, I've just been notified its called "Slicing..." I have no idea why I thought it was called splcing. I've been calling it the splice tool for the longest time...scary.

 

[rwebber77]

Hi all, I've just been notified its called "Slicing..." I have no idea why I thought it was called splcing. I've been calling it the splice tool for the longest time...scary.

You are correct, it is the slice tool. By definition to splice is to put something together and slice is taking it apart. The easiest method may be to google how to slice in photoshop. I use a very unorthodox method I just "stumbled" upon since I have zero graphic design experience, but it works for me.

 

[ronaldroe]

What I usually do is slice around the images on the page. First, I hide all background layers, then slice around the images. That gives the images a transparent background (saved in .png). That way, if I want to adjust background colors, I don't have to change the images themselves. Then, I usually code the positions by hand. Photoshop save for web may be convenient, but the CSS it outputs is messy.

 

[Synergy Studios]

Make sure you splice the images so it is expandable for the developer (so the boxes get bigger to allow for content automatically)

attached is a rough pic of what i would do. trying to only use the smallest amount of slicing on things that can be repeated. all borders should remain css.

all nav and headings should not be images, so turn off all layers for the text.

for the subcategories heading i did a mistake. no need to save the whole bar just take a snippet of it like i have the others

hope this helps

Dave