By Brian Rhinehart

Original Post: http://www.noupe.com/photoshop/preparing-photoshop-files-for-web-developers.html

Whether you’re a freelance web designer or part of a team at an agency, handing off Photoshop files to a client, developer, development team or even another designer is part of the process of building websites.

Whereas the development process is generally more structured, by contrast, the design process is quite often spontaneous and full of experimentation. This can lead to a host of unused and unnamed layers that don’t end up as part of the final approved design. For developers, sifting through a quagmire of unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming.

Designers can help their counterparts or clients before the design hand-off by taking 10 to 15 minutes to prepare files in a consistent and organized manner that can potentially save developers hours of production time. As an added bonus, an organized Photoshop file will save designers time by minimizing development questions after the file has been handed off for coding.

1. Prepping the File

First and foremost, make a copy of the Photoshop file that contains the approved design and add the suffix -prod to the file name. This way you can recognize a production file immediately and know that this file type is for development use only and not for further design refinements.

Guides and layout

Properly align and remove any unnecessary guides in the document. Keep guides to a minimum and only section off the major regions of the layout by outlining blocks of page content such as the masthead, content area, sidebar and footer so that the developer understands what basic structure the page should follow. Keeping the number of guides to a minimum also allows the developer to then add guides where needed to aid them in visually mapping out layout details in the code such as nested divs and navigation menus.

Include a color palette

Create a layer group with its visibility turned off at the top of the Layers panel named “Palette.” Populate this group with layers using Layer > New Fill Layer > Solid Color… which are named to correspond to elements that will be colored using CSS. This allows developers to simply Double+click the layer thumbnail to get the color values they need from the Color Picker while coding.

The added “Palette” Layer Group.

2. Navigation and Button States

During the design process, it’s easy to overlook that navigation graphics should have at least three states of user interaction that will need to be defined in a stylesheet. Place each state on its own layer and name that layer to correspond to its function. As an example, using the following for the layer names of a top navigation element (topnav, topnav:hover, topnav:active) will help to establish a common naming convention and language that both the designer and developer mutually understand and recognize.

Create sprite groups of navigation or button layers or layer groups to ensure that what you envisioned as a designer will get executed in the code. Position the default state as the topmost layer within the group with the hover and active states below.

When creating sprite groups, it is also recommended that a consistent height be used for all of the states so that it is easier for the developer to calculate the background-position of the elements while coding the CSS.

Sprite groups showing the different navigation states.

3. Flattening Artwork

The purpose of flattening artwork is to preserve the approved design and to combine multiple layered elements into single layers that are more readily digested. Examples of this would be a base layer which is being used as a clipping mask and the secondary layers that are being clipped by that base layer, photomontages or a group of layers that comprise the background of a site.

Merging layers

Merge (Command+E) layers and layer groups that won’t require further editing by the developer. This not only reduces the visual impact of the Layers panel, providing a clearer road map for the developer, but also removes the chance of design elements getting accidentally altered during image slicing.

Fonts

Web safe fonts that are used for headings and copy should be left as editable text. This allows developers to easily check the Character panel to see what values need to be applied to font properties in the stylesheet.

In cases where image substitution is to be used for items such as navigation or stylized text treatments, flatten the type layers just in case the developer doesn’t have a specific font available to them. Another method of preserving the appearance of a font would be to use Layer > Type > Convert to Shape in cases where the developer may need to resize a type treatment.

Smart objects

Smart objects are invaluable during the design process. They allow for resizing and styling with Smart Filters while remaining completely editable. However, once a design is approved these layer types should be rasterized or merged with other layers to reduce the overall file size as smart objects can often contain photos or other artwork that have a higher resolution (e.g. 300dpi) than is required for the final output of 72dpi. Another reason to flatten smart objects is to prevent a “File Not Found” error message should the developer Double+click the smart object layer thumbnail.

4. Organizing the Layers Panel

First things first, clean house. This means deleting any layers that are empty or are not going to be used in the final design, especially all the duplicated layers that were used to test ideas during the creative process. By doing a little housekeeping you have already made the file easier to read.

Name all layers

Once you have flattened and merged all the layers that will not require editing, go through and name all of the layers and layer groups. Use a naming convention that is not only well recognized, but also common to your work environment. One example would be to assign layers names that correspond to the CSS that would be used for that layer such as “button:hover.” The point is to establish and maintain the nonverbal communication between the designer and developer through common practices and language.

Use layer groups

Group like elements into consistent layer groups. For example, when designing a WordPress theme, it would be logical to have layer groups with the names “Header,” “Content,” “Sidebar” and “Footer.” It’s also good practice to group like items that constitute a navigational element or other design elements that have multiple states such as icons, buttons and menus.

Mirror the layout

Start from the top of the page layout and work your way to the bottom, arranging the layers and layer groups in descending order to correspond with their position in the design. In this manner a developer can quickly scan through the layer names to identify where a particular design element is located within the Layers panel based on its visual location in the design. This is especially helpful should they need to isolate it for editing or slicing.

Use nested layer groups that reflect the hierarchical structure of the layout. A layer group called “Sidebar” might contain layer groups “search” and “advertising.” Nested layer groups can also illustrate to the developer how elements are arranged structurally within the HTML.

An example of a hierarchically structured Layers panel.

5. Handing off the PSD

When the file has been prepared, don’t just send the file in an e-mail or upload it to the development server. Schedule a hand-off meeting and take the time to go over the file(s) with the developer to ensure that they have a firm understanding of how the end product is supposed to not only look, but behave in terms of user interaction. In the end, both designers and developers will save valuable time.

So I have found a few websites that can guide you and posted some tips below.

http://www.webpagesthatsuck.com/
http://www.datadial.net/blog/index.php/2009/06/09/website-fail-30-web-designs-that-will-hurt-your-eyes/

Bad Web Site Design
Why are there so many bad web design techniques in use today? Anyone that spends time online sees them everyday, and they make us all crazy. With a wealth of good web design information available, you would think that these web sites would change their ways. Below is our TOP-TEN list of the worst web design techniques.

#1 – Pop Ups and Broken Back Buttons
You hate the site and just can’t hit the back button fast enough, but the web site has broken your browsers back button, locking you down to throw popup ads at you faster than you can close them.

Do these %$*@#? Web sites truly believe, that if they bombard you with popup ads fast enough, that you will actually buy something from them?

I wouldn’t buy water from them if I were on fire.

#2. Huge Flash Intro Screen
How about making a visitor with a slow dial up connection wait 5 minutes to load your site, so they can watch some Flash effects first. Visitors don’t want to wait to see a cartoon, or a fireworks display, just to see your products on your site. Most will hit the back button if they have a dial up connection.

#3. Horizontal Scrolling
Web sites can really drive people crazy making them scroll left and right to read each line. I don’t think anyone likes horizontal scrolling. So why do so many sites have horizontal scrolling? It is a result of poor design, period.

To all you sites with horizontal scrolling, either make your site width 800 or 100% to fix the problem already.

#4. Slow Load Time Problems
Slow load time, is usually the single biggest problem for an e-commerce site. When customers try to navigate around the site, looking for items they want to buy, the site drags at a snail’s pace. Most visitors leave and find a faster site to purchase from.

Most often this is caused by: cheap web hosting, too many graphics, un-optimized graphics, or poor coding.

#5. Overuse of Banner Ads
I have visited e-commerce sites that must have been in 20 banner ad exchange programs. Frankly, the site looked like the classified section of the back of a cheap magazine. Banner ads for casinos and lingerie don’t belong on a golf equipment site. It looked like this site was actually selling golf products, but the average user would be very confused.

#6. Poor Spelling
Computers come with built in spell checkers. Why do some people just go out of their way not to use one? You are broadcasting your intelligence level to the world when you display your poor spelling on the Internet. (Buy sum cool thingz on mi sight!)

#7. Lots of Moving Things
Banners flashing, graphics twirling, words scrolling, with a string of fireworks chasing your mouse pointer.
Now, try and read the white text on the black background with all of that going on.
It makes my head hurt just thinking about it.
Please limit your site to only one moving or flashing object per page.

#8. Plenty of Music
Make sure your site cranks up some really loud, meaningless music, so you get everyone browsing the Internet at work in trouble. That is a super-fast way to make someone hit the back button. A lot of people surf the web at work, and could be potential customers, so don’t scare them off with pointless music!

#9. No Contact Information
You have searched the site high and low and are ready to buy. But now, you can’t find how to buy it, or how to contact anyone for more information. What is the site for then? No way to buy and no way to contact anyone. Did they forget an important part?

Please include contact information, or a contact link, on every page of your site, so your visitors can contact you if they want to buy something or make an inquiry. Maybe your visitor wanted to give you $10,000 for your domain name, but unfortunately now you will never know.

#10. Garbage Sites
Yes, make sure you include 10,000 words related to products you don’t even carry, just so that I find you on the search engines and then waste my time looking all over your site for it. Trust me, I am not going to buy what you’re selling if you trick me to your site with items you don’t even carry. I found a site on a major search engine that had about a thousand pages of garbage, that all took you to his Ebay link.

Here is some good diet tips for your website:

1. Call Us

Like every diet company some plans are better then others. Do you really need a trainer, diet coach, self motivator, health expert and so on. Get your code from the source or in this instance the guy who knows everything you need with out having to consult others. Why pay 5 people, when you can pay one to do the same job.

Give it the support it needs to go the mile.

2. Reduce HTTP Requests
3. Optimize the HTML DOM
4. Optimize the CSS
5. Optimize your Javascript
6. Externalize Javascript and CSS
7. LINK instead of @import CSS
8. Place scripts as low as possible
9. Set the Cache Controls
10. Avoid Dynamic Properties (CSS expressions)

Back in the days of dial-up and 14.4k modems, a page that was more than 100kb would be considered extremely bloated. Now things have changed; broadband is evermore ubiquitous and so is the demand for internet candy like Flash and Javascript. And just like the American waistline, the size of the average website has been expanding.

As busy web designers, it’s easy to get lazy and let our pages start putting on a little weight, so here are 9 tips for getting that website back in shape and able to fit into those skinny jeans again.

Reduce HTTP Requests

As a web page is loads into the browser, the HTML is parsed progressively. When a request for an asset is reached, the browser attempts to download it. Each of these assets (external files, images, Flash, etc.) is an HTTP Request with it’s own communication latency. Standard browsers are only configured to handle two HTTP Requests in parallel, per domain.

You can use a free tool like this one from Website Optimization to check how many HTTP Requests your web page makes. It will also give you the estimated download times for different web connections, and a few other things to help you decide what you need to trim.

Minimize HTTP requests by combining external scripts into a single file. Do the same with CSS files, merge them into a single stylesheet. For images, use CSS Sprites to reduce the number image requests. Using sprites has the added benefit of reducing overall download size as well.

Optimize the HTML DOM

Hopefully optimizing the DOM was done at the development stages of the site. Take a look at all the HTML tags in your website… are you looking at nested DIV and TABLE hell?

Parsing the DOM is the most processor intensive task when loading a web page. So the more DOM elements(HTML tags) the browser needs to parse through, the longer the process of loading the page is going to take. Ask yourself, do you really need all those divs for that flashy navigation? Are nested tables really the only way you can achieve that particular website design?

Watch out if your website was created with a WYSIWYG editor or rendered out by other software that writes the HTML for you. The code created by some of these programs is notoriously bloated. Some are better than others, but there is no substitute for a clever human with mad HTML skillz.

A bloated DOM will also slow your page when Javascript is used to modify or access the DOM, as is the case with DHTML and AJAX applications. Simply put, the more HTML elements you have, the longer DOM access takes.

Optimize the CSS

After the browser finishes parsing, it renders the page to your screen. As it does this, it renders the CSS in parallel. Speed up rendering time by consolidating and eliminating CSS rules.

Use a tool like Firebug to help you track down and eliminate any redundant CSS. Maximize the inheritance behaviors of CSS and trim any unnecessary rules that could be handled with inheritance instead.

Optimize your Javascript

Javascript is unique among other programming languages in that the source code is downloaded, parsed and executed with every pageload. So there is a performance cost for every line of code you write that doesn’t exist in other languages.

The obvious solution, write less code. Especially be on the lookout for Javascript bloating with third party scripts and script libraries. Lightbox and Scriptaculous for example. When you include these scripts in your HTML document, it’s not likely you will use each and every line of code. Delete any Javascript statements and functions that aren’t being called.

If you really want to geek out on optimizing Javascript, here is a great talk by Joseph Smarr: High-performance Javascript: Why Everything You’ve Been Taught is Wrong.

Externalize Javascript and CSS

Externalizing your Javascript and CSS files allows them to be cached by the browser. There is a trade-off to consider however because this means additional HTTP Requests. Once the these files are in the cache however, subsequent pages will be much faster. If the typical user behavior for your site is to visit multiple pages, the overhead is probably worth it. Verify your user behavior with a metrics tool like Google Analytics.

LINK instead of @import CSS

Just as important as reducing the actual download time of a web page is reducing the perceived download time of a web page. Users are much happier waiting 10 seconds for a page to download if they can see the page is doing stuff.

@import gained popularity is as one of the hacks in a web designers bag of tricks for hiding CSS from legacy browsers. Thankfully, with major sites beginning to drop support of these older browsers, we can all follow in suit and do the same. At this point the drawbacks for @import outweigh the benefits.

Using LINK instead of @import does two things: allows for progressive rendering, thus lowering a page’s perceived download time, and speeds up the rendering of the DOM.

Already mentioned is that CSS renders in parallel to the rendering of the DOM. But progressive rendering only occurs up until the point of where a CSS request occurs and then rendering starts over from the top. With a slow internet connection you can see this as an unstyled page that loads, then is quickly replaced by the CSS styled content.

For this reason it’s good practice to not only LINK to your stylesheet, but to place it as early in the HEAD section of the HTML document as possible.

It’s important to note that IE treats @import like a LINK that occurs at the bottom of the page, even if @import appears in the HEAD section. Another reason IE is the bane of existence for all web designers.

If you absolutely can’t get away from using @import, here is a great BlueRobot article on the FOUC problem.

Place scripts as low as possible

Scripts are problematic to the page load process for a couple reasons. First, they block parallel downloads, meaning that while a script is downloading, nothing else can download. Scripts also prevent any elements below them in the DOM from rendering while they are downloading and parsing.

Sometimes it isn’t possible, but in many cases a script can be placed just before the part of the DOM where they are required. Doing so allows at least part of the page to render, giving the user the impression that the page is doing something. Again, reducing perceived download time is as important if not more so than reducing actual download time.

Set the Cache Controls

Most web designers are probably happy to let browser defaults handle caching, or may think that because their website has dynamic content they don’t need to bother with caching. But, why not take advantage of the built in capabilities of the browser and network to create a faster experience for your most valuable visitors? Repeat visitors and conversions.

The simplest thing you can do is set the cache using a META tag that looks like this.

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 2011 08:21:57 GMT">


Set the expires date to some far off date to be sure that caching is utilized.

It’s probably not a good idea to rely solely on this method however as it has the drawback of being ignored in many instances. For more precise control of caching, set an Expires or Cache-Control HTTP header. This involves messing your server a bit, but here is a great caching tutorial to help you get it done.

Avoid Dynamic Properties (CSS expressions)

Finally, where the previous tips have been centered on the trimming the page loading process, this tip is about trimming runtime performance.

CSS expressions are a proprietary property in IE 5-7 that allow you to assign a Javascript expression to a CSS property. It evolved as another hack in the bag of tricks to make IE work like a normal browser, for instance by faking support for the min-width CSS property. Did I mention IE is that bane of existence for all web designers?

Basically this hack was a short way to get CSS to respond to a browser event. The problem is that the Javascript expression is called on every browser event, causing it to be evaluated thousands of times during normal page interaction.

Here is a great post the was used as a reference for the above information.

http://www.meshack.com/2010/01/11/9-tips-to-slim-down-your-website/

This model saves design companies because the job is processed faster and has a clearer direction. Technology has a way of replacing positions and improving others. There are also tools like www.basecamphq.com which can track a project and eliminate the need for project coordinators and managers.

Sending work back and forth between designers and customers through sales people can be a nightmare if the salesperson has never designed or developed a website on their own before.

This is why…under a traditional model at an advertising agency, an account executive meets with customers, sells their marketing services and brings a customer’s ideas to a designer. The designer then builds the design or functionality. Not knowing all the angles why the particular design or program works well. The salesman will go off to try to explain to the client what is working. The message and approach gets diluted and time is lost on both ends.

Customers are giving a lot of positive feedback to firms that have designers do the talking. In this day in age, Big businesses need to cut cost. They are not going to high paid executives for reinsurance. They are going to the source because time is money.

By working directly with customers, designers at Digital Complexion are able to convey customers’ ideas more quickly and accurately. Digital Complexion specializes in Social Marketing, Hybrid Web Development, Digital Design and Print.

Some of Digital Complexion’s customers include the Apollo Aviation Group, Innovative American Technologies, Carmine’s Gourmet Market, Visit Palm Beach and recently added Dr. Gloria Barredo in Jupiter, Florida for a for social marketing web campaign.

What I am talking about: Social network aggregators is a relatively new breed of applications which try to consolidate all your various social networking profiles into one, with varying success.

Update: It works great. I was using http://hootsuite.com/ but it was limited to how many social accounts I could use. The cool thing is http://hootsuite.com/ is connected to ping. So if you like it you can still use their interface instead of http://ping.fm.

On http://ping.fm you have the following social networks that can mingle with each other.

MySpace Ning AIM Status Jaiku Blogger LiveJournal Bebo hi5 Xanga WordPress.com Custom URL Friendster Koornk Diigo YouAre Multiply Yammer

Flickr Utterli Laconi.ca Present.ly Vox TypePad ShoutEm StreetMavens Radar myYearbook Photobucket Posterous Yahoo Profiles Tagged MerchantCircle Yahoo Meme

Here is a great post 20 Ways To Aggregate Your Social Networking Profiles in case you want to look at more.

Robin Williams

Below are features that can make a web design look dorky. These are not just my personal opinions, but are ideas I have collected from speaking to groups around the country. Examples of many of these features and more detailed explanations of the problems and solutions are in my book, The Non-Designer’s Web Book, written with John Tollett.

Backgrounds

Default gray color Color combinations of text and background that make the text hard to read Busy, distracting backgrounds that make the text hard to read

Text

Text that is too small to read Text crowding against the left edge
Text that stretches all the way across the page
Centered type over flush left body copy
Paragraphs of type in all caps
Paragraphs of type in bold
Paragraphs of type in italic
Paragraphs of type in all caps, bold, and italic all at once
Underlined text that is not a link

Links

Default blue links
Blue link borders around graphics
Links that are not clear about where they will take you
Links in body copy that distract readers and lead them off to remote, useless pages
Text links that are not underlined so you don’t know they are links
..(If you’re not going to underline your links, please make darned sure
..that each link is perfectly clearly a link! Don’t make me wander around
..with my mouse checking to see if randomly colored text is a link!)
Dead links (links that don’t work anymore)

Graphics

Missing graphics, especially missing graphics with no alt labelsGraphics that don’t fit on the screen (assuming a screen of 800 x 600 pixels)
Large graphic files that take forever to load
Meaningless or useless graphics Thumbnail images that are nearly as large as the full-sized images they link to graphics with no alt labels

1. Clean, semantic markup
The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. Clean markup will help ensure that the browser is capable of properly displaying the website, and it will help give visitors a pleasant experience, with no unnecessary difficulties.

2. Separation of content and presentation with CSS
Alongside clean, semantic markup is the need for the separation of content and presentation. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. The most important thing for these visitors is to be able to access the content and links: presentation is secondary. A website that uses clean, valid markup, with CSS to separate the presentation from the content, is off to a great start as a mobile website.

3. Alt tags
Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them), alt tags are extremely important for usability purposes. Of course, alt tags should be used anyway, but it’s even more critical for mobile visitors.

4. Labeling form fields
Like alt tags, form field labels help make a website much more usable for mobile visitors. Imagine trying to use a form without knowing what is supposed to go where. Simple details like alt tags and form field labels can make a big difference this way.

5. Use of headings
With inconsistent and often limited styling of text on mobile browsers, headings become more significant. Mobile browsers are less likely to style text exactly how you would like it to be, but h1, h2, h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective.

6. Avoid floats if possible
Even if a mobile browser correctly displays a website that uses floats for layout, it’s unlikely the website will look good on a small screen. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up.

7. Reduce margins and padding
Most likely, your mobile website should have smaller margins and padding than your main website has for traditional visitors. Of course, this depends partly on how much of a margin and padding your website currently has, but very large amounts can make the layout awkward.

8. Pay attention to navigation
Most websites have a primary navigation menu very high on the page. This is helpful on mobile websites as well, but generally, mobile navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

9. Consider Color Contrast
Because mobile screens may not have the same appearance as desktop or laptop monitors, make sure the background and text colors provide adequate contrast so that the content can be read easily.

Article from Smashing Magazine Click Here

Here is a free restaurant website template I pulled out of the closet. It would go good with an Italian or French restaurant. The file is in PSD format with layers. Please post comments if you download.

Thanks,

Judd

Download File Here

I have been in the business for quite awhile and worked primarily in .netframework. It has many perks, however the comunnity is like the PC and Mac commercial when I compared it to WordPress. I belive for my clients, it is better to put them on the WordPress platform for one simple reason. It is cost effective. I would like to explain a few more reasons though so you can see my point. I am completely opened to hearing the otherside as well. So comments are welcome.

#1 User Friendly

The backend is very user friendly for people to understand. It is very easy to install on a hosting platform and in all most all cases, it is low cost to host.

#2 You can extend very far

There is 1000′s of themes and plug-ins availbile. There are upgrades to everything and installing the them for the CMS platform,  plug-ins or theme take 2 seconds to do.

#3 Big Sweet Community

In my experince, the community is great. The people like to share their knowledge. You can find just about any solution and ask a fellow WordPress coder. They always ping you back. There is 1000′s of instructional videos on youtube.com and docs all over the place. Google is your friend.

#4 Built Tough

WordPress have gone to great lengths to make sure every bit of the generated code is in full compliance with the standards of the W3C. This is important not only for interoperability with today’s browser but also for forward compatibility with the tools of the next generation. WordPress comes built in with very robust tools such as an integrated blacklist and open proxy checker to manage and eliminate comment spam on your blog. There is also a large quantity of plugins that can take this functionality a step further.