What is a PSD file?
As professional web developers, many of our designs begin with a PSD file. Anyone who’s worked with any kind of graphics, or had a significant presence on the Internet, has probably heard of a PSD file, though they may be unaware of exactly what they are.
The nature of PSD files:
The answer of what a PSD file is comes in two forms. The simple answer is that these files are the native format for Adobe Photoshop projects. A final graphical design is often exported from this as PNG, JPEG or other similar standard image formats. However, in the case of web design, this is not the case.
The more complex answer refers to the nature of PSD versus the standard image formats out there. A PSD file can contain a number of complex pieces of information such as layers, caller information, vector shapes and much more – things a standard image viewer neither needs nor knows how to display.
There do exist other applications that can open, edit, and even save PSD files, though Adobe Photoshop itself is of course recommended. It has long been accepted as an industry-standard for graphical project format, and is quite extensively documented.
What makes these so powerful for website design is that the visual layout of a website can be laid out with individual components, layers, and even scalable grids without writing any HTML or other web code. This allows a designer to actually visually design their website in a familiar, graphical way. This PSD file will work the same with any graphic design program capable of viewing it, no matter the platform or particular software due to its standard nature.
This differentiates it from an actual webpage implementation, where the code may be interpreted differently across platforms and browsers. The downside is that such files do not contain any way of representing the interactivity, or logical behavior of the site. This is why a direct automatic conversion of PSD to HTML, while technically possible, isn’t practical nor very useful.
How a website is created from PSD:
This requires the services of a skilled web design professional. While there are tools that can aid in slicing a PSD and exporting HTML information from it, as a matter fact Photoshop itself can do this in limited capacity, this information has to be intelligently implemented into a proper website design.
Proficient developers whom understand Photoshop intuitively can use slicing tools to export a basic HTML layout from the PSD. As a matter of fact, they can do this from simpler image formats as well, though the layering and grid framework made available by PSD does help this go a long smoother.
From there, we use visual tools such as Adobe Dreamweaver, or a similar visual web design tool, to implement the output HTML from the image editor into a form where code such as HTML 5, JavaScript, etc. can be applied. This is the stage where logic, responsive design, etc. are applied.
When using a CMS, or content management system, like WordPress, there are extensions that can make this go even faster, with the output HTML from Photoshop being directly imported through an extension and built into a template. This doesn’t always work right, and is and advised with any site of any particular complexity.
A bit more on the complexities of PSD:
You may find yourself wondering exactly why we find PSD to be the optimal format for this. Surely, a simple JPEG or PNG laying out the design would be sufficient. As said before, it is possible to use such a format, but a lot of information is lost by such flat data.
When it comes to web design, the biggest advantage of PSD is the use of layers. Layers are a series of flat canvasses stacked one on top of the next. This allows for elements to be individual entities which can be moved around, scaled, sliced, etc. without affecting neighboring elements. This also allows elements to overlap, and seem to contain each other without the slicing cutting pieces of containers, or neighboring elements away.
We understand that creating a PSD can be a bit more complicated, but most skilled designers are very familiar with Photoshop and the creation of these documents. You can learn more about Photoshop, the intricacies of the PSD format, and how these image formats play into direct web design by filling out the contact form below. We’re here to teach you about all things web design and all things graphics.
