hello everyone<br />
<br />
i need a hand please<br />
<br />
right people tell me when they start there web design they use photoshop to design the site then transfer it to html<br />
<br />
how does this work please i dont understand..surely when u save a photoshop file it will save it as images and u cant use images as html can u?<br />
<br />
can someone clear this up for me please<br />
<br />
thanks u<!--content-->With a prog<br />
slice or slicing (google)<br />
like shoestring<br />
and:<br />
<!-- m --><a class="postlink" href="SLICERhttp://www.thecastle.com/">SLICERhttp://www.thecastle.com/</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://go.to/xedit/">http://go.to/xedit/</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://lad.co.za/greenmojo/templates.html">http://lad.co.za/greenmojo/templates.html</a><!-- m --><br />
iMaker -680 k- is an image splitting tool. If you have a single<br />
large interface image you can use iMaker to split the image up into a<br />
usable interface. It even generates the HTML code which should be<br />
used to "redraw" the interface in it's complete state.<br />
<br />
:rocker:<!--content-->I use Photoshop to help me draw the design I want. Then when I'm satisfied, whatever I can use HTML or CSS I do (like the layout), the rest (like backgrounds or special buttons and logos) I save as jpg or gif and voil?<br />
<br />
HTH<!--content-->If you are using Photoshop 6, or 7 it comes with the sister app ImageReady which will aid you in slicing your images up for the web.<br />
<br />
The nice advantage to ImageReady, is being able to slice graphics, create rollover effects without writing any Javascript, and create animated GIF's.<br />
<br />
After saving your overall design, use the "Jump to ImageReady" button in the toolbar to work in I.R.. You can switch back and forth until you get it like you want it. Some great --tutorials-- (<!-- m --><a class="postlink" href="http://www.planetphotoshop.com/smithback.html">http://www.planetphotoshop.com/smithback.html</a><!-- m -->) here.<!--content-->I create the page in photoshop and save it as a psd file for safe keeping.<br />
<br />
When cutting it up I use various techniques.<br />
<br />
1: Backgrounds: Repeating patterns are hard to achieve well... thus I try to stick with a fluid single colour BG. I then use the select tool at a fixed size, say 10*10 pixels. Then crop the Image and export the file to web acceptable format such as *.gif or *.jpg. Once done use the undo function to get back to the original image.<br />
<br />
2: Borders: Try to achieve a square function to get this right. What I mean by this: Start with the top left corner and use the select tool at a fixed size. Say 25 by 25 px. Place this as near as you can to the area you want to crop. You can then use the arrow keys to nudge this to the right place pixel by pixel. One press of the arrow will nudge it one pixel. It is worth mentioning that the best results will be done with no white space. By this I mean that the border should touch the edge of the canvas size. Thus when you move the selection tool a pixel to far it will dissapear outside of the canvas. Move it back one pixel to see the edge again. Do this for the top and left edges. Select crop and again save in a web format. Then rotate it 90 degrees, save again. Do this till you get all 4 corners.<br />
<br />
You will also need the spacer borders, ie the top, bottom, left and right borders. To get this go back to the original image. Use the select tool, make sure it is the same height as the corner, in this case 25 px. Width can be 10px if you want to speed up the image Download <!--more--> a tiny bit. Again use the nudge ability to move this to the very top of the image, select crop and save as web format again. Rotate 90 degrees till you get the four borders.<br />
<br />
This should give you a very basic layout. The corners should be placed a single images, you don't want these to repeat. The edge borders should be place as BG's so they do repeat. This is great if you have a dynamic layout as the border will stretch or shrink to the size of the page view.<br />
<br />
The above will work in tables or frames as long as it done properly. You will need to control certain aspects of the table or frameset down to the pixel.<br />
<br />
To see an example of what I mean visit this page I am creating.<br />
<br />
<!-- m --><a class="postlink" href="http://www.entimp.com/garra/test.htm">http://www.entimp.com/garra/test.htm</a><!-- m --><br />
<br />
I have expanded my ideas a little in this page but the jist is all the same.<br />
<br />
Feel free to ask some questions if you want.<!--content-->Hi<br />
thanks all for the input!<br />
<br />
one last Question whats the normal pallete size u use for photoshop to do ur designs<br />
<br />
thx<!--content-->What do u mean by palette size... i might know it as something else.<!--content-->hi<br />
<br />
sorry, what i meant is that when u use photoshop what size canvas u start off with <br />
<br />
regards<br />
s<!--content-->Depends on what i am doing but usually 1000 by 1000. After laying out a template I will crop it down to get rid of all white space at the sides.<!--content-->1000 x 1000?<br />
<br />
I usually desiogn the layouts in 800 x 600<!--content-->Im not suggesting design at 1000 by 1000 but suggesting a canvas size to play with. The design can be easily done at 800 by 600 on a larger canvas. This extra white space gives you room to play.<!--content-->
<br />
i need a hand please<br />
<br />
right people tell me when they start there web design they use photoshop to design the site then transfer it to html<br />
<br />
how does this work please i dont understand..surely when u save a photoshop file it will save it as images and u cant use images as html can u?<br />
<br />
can someone clear this up for me please<br />
<br />
thanks u<!--content-->With a prog<br />
slice or slicing (google)<br />
like shoestring<br />
and:<br />
<!-- m --><a class="postlink" href="SLICERhttp://www.thecastle.com/">SLICERhttp://www.thecastle.com/</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://go.to/xedit/">http://go.to/xedit/</a><!-- m --><br />
<!-- m --><a class="postlink" href="http://lad.co.za/greenmojo/templates.html">http://lad.co.za/greenmojo/templates.html</a><!-- m --><br />
iMaker -680 k- is an image splitting tool. If you have a single<br />
large interface image you can use iMaker to split the image up into a<br />
usable interface. It even generates the HTML code which should be<br />
used to "redraw" the interface in it's complete state.<br />
<br />
:rocker:<!--content-->I use Photoshop to help me draw the design I want. Then when I'm satisfied, whatever I can use HTML or CSS I do (like the layout), the rest (like backgrounds or special buttons and logos) I save as jpg or gif and voil?<br />
<br />
HTH<!--content-->If you are using Photoshop 6, or 7 it comes with the sister app ImageReady which will aid you in slicing your images up for the web.<br />
<br />
The nice advantage to ImageReady, is being able to slice graphics, create rollover effects without writing any Javascript, and create animated GIF's.<br />
<br />
After saving your overall design, use the "Jump to ImageReady" button in the toolbar to work in I.R.. You can switch back and forth until you get it like you want it. Some great --tutorials-- (<!-- m --><a class="postlink" href="http://www.planetphotoshop.com/smithback.html">http://www.planetphotoshop.com/smithback.html</a><!-- m -->) here.<!--content-->I create the page in photoshop and save it as a psd file for safe keeping.<br />
<br />
When cutting it up I use various techniques.<br />
<br />
1: Backgrounds: Repeating patterns are hard to achieve well... thus I try to stick with a fluid single colour BG. I then use the select tool at a fixed size, say 10*10 pixels. Then crop the Image and export the file to web acceptable format such as *.gif or *.jpg. Once done use the undo function to get back to the original image.<br />
<br />
2: Borders: Try to achieve a square function to get this right. What I mean by this: Start with the top left corner and use the select tool at a fixed size. Say 25 by 25 px. Place this as near as you can to the area you want to crop. You can then use the arrow keys to nudge this to the right place pixel by pixel. One press of the arrow will nudge it one pixel. It is worth mentioning that the best results will be done with no white space. By this I mean that the border should touch the edge of the canvas size. Thus when you move the selection tool a pixel to far it will dissapear outside of the canvas. Move it back one pixel to see the edge again. Do this for the top and left edges. Select crop and again save in a web format. Then rotate it 90 degrees, save again. Do this till you get all 4 corners.<br />
<br />
You will also need the spacer borders, ie the top, bottom, left and right borders. To get this go back to the original image. Use the select tool, make sure it is the same height as the corner, in this case 25 px. Width can be 10px if you want to speed up the image Download <!--more--> a tiny bit. Again use the nudge ability to move this to the very top of the image, select crop and save as web format again. Rotate 90 degrees till you get the four borders.<br />
<br />
This should give you a very basic layout. The corners should be placed a single images, you don't want these to repeat. The edge borders should be place as BG's so they do repeat. This is great if you have a dynamic layout as the border will stretch or shrink to the size of the page view.<br />
<br />
The above will work in tables or frames as long as it done properly. You will need to control certain aspects of the table or frameset down to the pixel.<br />
<br />
To see an example of what I mean visit this page I am creating.<br />
<br />
<!-- m --><a class="postlink" href="http://www.entimp.com/garra/test.htm">http://www.entimp.com/garra/test.htm</a><!-- m --><br />
<br />
I have expanded my ideas a little in this page but the jist is all the same.<br />
<br />
Feel free to ask some questions if you want.<!--content-->Hi<br />
thanks all for the input!<br />
<br />
one last Question whats the normal pallete size u use for photoshop to do ur designs<br />
<br />
thx<!--content-->What do u mean by palette size... i might know it as something else.<!--content-->hi<br />
<br />
sorry, what i meant is that when u use photoshop what size canvas u start off with <br />
<br />
regards<br />
s<!--content-->Depends on what i am doing but usually 1000 by 1000. After laying out a template I will crop it down to get rid of all white space at the sides.<!--content-->1000 x 1000?<br />
<br />
I usually desiogn the layouts in 800 x 600<!--content-->Im not suggesting design at 1000 by 1000 but suggesting a canvas size to play with. The design can be easily done at 800 by 600 on a larger canvas. This extra white space gives you room to play.<!--content-->