June 29, 201115 yr ok... im not getting into image software practice yet, i havent finished working with HTML and CSS, so im holding off. but still, im always trying to get a bit of knowledge of things ill practice in the future, so it's easier when i get there. and to satisfy my general curiosity. so im just wondering how exactly a photoshop image, can then become a web layout, with functioning HTML etc... just a brief, or rather detailed explanation...whatever....please, would be greatly appreciated. finding answer's to questions through google search can be a pain, or in my case, sometimes impossible HA.
June 29, 201115 yr In short... Certain parts of the image are cut out and saved separately. These are then placed in to a webpage by using HTML as the structure and CSS as the styling.
June 30, 201115 yr This can be done in a number of ways but typically a mockup of how the page will look is designed in photoshop and then the slice tool is used to segment the entire image into smaller visual building blocks. The idea from the start is to avoid using images where possible so if a particular image slice could be achieve through CSS then that is what is done. E.g. If the main background is a solid dark grey of #333333 then rather than using images this will be replaced by CSS. If a wide banner is used that has a repeatable pattern in the middle then the left side will become a narrow image, the right side will become a narrow image and the middle will be made up of a 1 or 2 px wide slice that can be repeated across the axis. This allows the window to be expanded and contracted without forcing horizontal scroll bars. Most of the text featured in the mock-up should be removed prior to slicing and exporting and should be replaced by real coded text. Edited June 30, 201115 yr by DesignerX
Create an account or sign in to comment