#How do i add guide lines to photoshop 5.5 code#
This will allow the developer to easily create sprite groups of navigation or button layers or layer groups, so these elements can be executed in the code properly. As mentioned later within this document, these elements should be grouped in their own folder. This also should be done for any type of button. Place each state on its own layer name to correspond to its function, such as topnav, topnav:hover, etc. Navigation elements sometimes get overlooked but should have at least two and maybe three states of user interaction that the developer will need to define in the style sheet. If each page has been laid out for the client’s approval, this process is not necessary. These images should be consistent in size, as well as thumbnail images used as navigation.Ĭommon elements, if possible, could have their own PSD file to the width and height of the element, instead of creating a PSD file for each page, especially when these pages have the same layout. For instance, an employee profile page will most likely have a large image of the employee. Common ElementsĬommon elements, such as images, which are placed in the same area on a page or are part of the navigation, should be the same width and height. The style guide and/or color palette/list can define the website’s common page components such as the font size and style for body copy, page headers, sub heads, etc.Īlso, if the client supplied brand specs for the development of their websites, please supply those. 2.2 Include a Color Palette/List or Style GuideĬreate a layer group within the Photoshop file or create a Word document with a list of colors and styles, especially the ones not in the PSD files such as the hover states for text links. Also, a smaller number of guides will allow the developer to add guides as needed to visually map out layout details in the code, such as nested divs and navigation menus. These guidelines will help the developer understand the basic structure to follow. If possible, keep guides to a minimum and only section off the major regions if you decide to place any guides within the document. Properly align and remove any unnecessary guidelines within a Photoshop document. This way, any unnecessary layers can be deleted, and the art director can still have the final design intact. The approved design may have experimental layers not necessary for the web developer’s purpose. As efficient as it may seem to use one PSD for all page layouts, it’s actually easier to work with multiple small PSD files, each containing a single template.īefore making changes to the approved Photoshop design, make another version for the web developers so as not to destroy the approved Photoshop file.
If possible, create separate Photoshop Document files for the homepage and each separate template page layout (example: secondary, tertiary, and specialized pages). For developers, sifting through many unnamed layers (Layer 1, Layer 23 copy, etc.) can be confusing and time consuming. This can lead to a host of unused and unnamed layers that don’t end up as part of the final approved design.
#How do i add guide lines to photoshop 5.5 full#
While the development process is generally very structured, by contrast, the design process is quite often spontaneous and full of experimentation. This document gives general guidelines for art directors on setting up Photoshop files to hand off to web developers for programming web pages. 2.2 Include a Color Palette/List or Style Guide.
0 kommentar(er)
