Design your way

Let’s face it; web designers from all around the word use a version of Adobe Photoshop more that they’ve come to realize.

The early development and design stages in Photoshop are the starting point and sometimes ending point, more often than not; a complete dismissal accidentally, but mostly intentional.

Due to this neglect in a sense to even acknowledge these facts, the communities also neglect informing others about the best steps to keep the development of the individuals work easier, quicker and overall organized.

I would like to take a few minutes and present some tips and clarifications that will save you time and money that doesn’t need to be spent on your projects. With these tips in mind, let’s hope all those painstaking hours of redoing projects over and over multiple times due to errors because of misunderstandings will disappear.

Converting PSD designs to code

Image source: psdloft.net

It might sound confusing at first, but basically PSD to HTML is the general workflow in terms of making your Photoshop file into the language websites run in.

After designing your webpage and saving it as a Photoshop Document (PSD), you convert it to a specific code (using CSS, HTML and maybe some JavaScript).

To make sure you aren’t making a living hell out of your developer’s life, design your desired website in Photoshop at a high pixel resolution. After that, slice the images and export them at a recommended 60% saved for web.

Now a very important habit that you should pick up right away is to keep yourself organized in all your Photoshop projects.

This will become very important down the line, especially if you plan on going down a career path involving the use of Photoshop. When you work either in teams of different designers and developers, or you pass your PSD files to others for viewing, it will be easier for them to look for a specific part of the file to work on.

Development and designing process

Image source: Eddie Lobanovskiy

During the Designing Process, it is understandable and common to have many layers that will go on unnamed (Layer 2 copy, Layer 5 etc.) and unused in the final product. Developers prefer not to sit through all these Junk Layers due to the amount of time wasted rummaging through them or getting confused by similar layers.

Developers/paid clients can really benefit if the designers take a few minutes to organize layers in a coherent fashion that will drastically cut the total production time in half for developers/clients.

Organizing

Image source: Jonathan Howell

It’s never wise to put everything for your projects in one layer group. Putting everything in its own layer group will help you simply delete a piece of the project you don’t want instead of the whole thing, as well as helping the developers know every piece of the project in and out.

In case you didn’t get the idea from previous statements said above or you pretty much know and have them figured out; here’s what to do when it comes to making your PSDs look nice and pretty instead of a tower of layers.

Image source: Vadim Sherbakov

Firstly, delete all layers that will not be used in the final design. Secondly, name all your layers properly. An example would be if one layer is a picture of a certain object, it would be wise to name the layer after said object.

Afterwards, group all your layers in a matter that makes sense; if a graphic and a text file are both at the top of the document, or header, than they should be group together in a header folder will the rest of the layers pertaining to that area of the layer.

Naming layer groups

Image source: Ichik Umer

Let’s take the example of the link states that make up the menu buttons. When creating these different states, make each one on its own group and they should be named according to their action.

A basic example is when you make the menu or various other buttons, naming the idle layer group as regular button, the layer group where your cursor hovers over the graphic hover button, and the group where you actually click it clicked button will really help both designers and developers with a common naming system both parties will fully understand when coding and such.

Width and height

Now when it comes to the sizing, the first thing to do is make sure your PSD is the desired final size when making your project. Doing so will help developers calibrate you PSD to finalize it at the perfect pixel ratio.

Organizing the PSD files is part of your job as designer

Image source: andsem

When it comes to the overall look of the finalized product: that is your job as the designer! A developer’s expertise is all about the coding, and though some may, very few know the fundamentals of Photoshop outside of a simple edit like fixing a typo or something similar and basic.

Since you’ve spent the most time with the document, dividing each piece of text graphic and other objects is your responsibility and you should be the most familiar with every aspect of how this should look and that should look. In the end, all of the extra time and detail you’ve put into your work will all be worth it.

After designing the project

Now that you’re finally done, it is time to have a sit down with your developer.

Yes, it’s not just a simple email the finished product and presto! The reasoning behind this planned ahead get together is for both of you to see eye-to-eye and that way both parties will have a clear vision on how everything is suppose to look, and any questions can get answered then and there; saving everyone all the time.

Now one thing to always keep in mind; everyone works differently in Photoshop. Just because one thing works for someone else, doesn’t meant its always going to work for you, and vice verse. We are all individuals, and as such one thing will feel comfortable for you, and maybe not me.

Source: http://ift.tt/1VNIklj