The Site Slinger Blog

Web Development, Design, and everything PSD to HTML
By Jeremy H.

What is a PSD? The First Step to Web Design

As the top service for PSD to HTML on the Web, we throw around the term ‘PSD’ quite a bit. We’ve answered the question ‘What is PSD to HTML?‘ and provided a list of definitions of common web development terms, but now we break it down even further.

What is a PSD?

Simply put, a PSD is a Photoshop design file. Technically, it stands for Photoshop Document, which is a proprietary file type from Adobe. Adobe’s Photoshop is the software most widely used for web design and works best for the design-to-code process.

PSD files are typically opened and edited with Adobe Photoshop, but can be opened with Adobe Photoshop Elements, and even certain non-Adobe products such as Corel’s PaintShop Pro and GIMP. However, programs other than Photoshop will not be able to fully edit or even read the complex layers utilized in many PSD files. Other advanced features within a PSD design may not be properly recognized, either. We highly recommend working with Photoshop from the beginning to ensure it will be universally accessible by designers and developers who may be involved with your project.

If you’re interested in a free program to simply view PSD files as flat images (no layers), Apple’s QuickTime, which includes Picture Viewer, will do the trick, but you can’t use the program to edit a PSD file. It is purely for viewing PSD files as images.

How Can I Create a Website with a PSD?

PSD files can be “sliced” and turned into HTML code by a proficient web developer. PSD to HTML services, such as The Site Slinger, specialize in just this. We take the PSD files and hand back HTML/CSS markup that’s ready for implementation as a live site.

Sometimes other file types are used by designers. While we may be able to work with PNG, IDD, or AI file types, we highly recommend PSD files. Working form other file types can require the added step of converting designs to a PSD file.

A “good” PSD is layered, and well organized using folders and layer comps to show different pages and states. Be sure to design all animation states, and button states (click, hover, off). Read more of our web design tips and check out the other resources below. In the end, we take your design and turn it into code, producing a website that matches your design pixel-perfect.

PSD File Structure

Technical Stuff

The PSD file type supports all image modes (Bitmap, Grayscale, Duotone, Indexed Color, RGB, CMYK, Lab, and Multichannel), which is part of the reason it is so widely used. It also supports clipping paths, channels, transparency information, and multi-level layers while other formats merely present ‘flat’ images.

The PSD file type preserves a design as layered images which is extremely useful for future editing (and re-editing) of different parts of a design. Each layer can be worked on individually, without affecting the rest of the elements in a design. You can also use a feature called ‘layer comps‘ to present variations of the same design. Photoshop can convert PSD files to other formats, such as PNG, JPG etc… so you can export a design for a wide variety of uses, like web graphics.

It’s also interesting to note that Photoshop files sometimes have the extension .PSB, which stands for “Photoshop Big”. According to Adobe, “The Large Document Format (PSB) supports documents up to 300,000 pixels in any dimension. All Photoshop features, such as layers, effects, and filters, are supported. You can save high dynamic range, 32‑bits-per-channel images as PSB files. Currently, if you save a document in PSB format, it can be opened only in Photoshop CS or later.”

You can read tons more about Adobe Photoshop File Formats Specification, if you want to delve further into the technical aspects of the PSD file type.

Resources

Read further for tips and how-to’s for web design.

All you need is design to get started! get a free quote I need more details