If not, what’s the best workflow to transition between Photoshop designs and actual website implementation?
By @chmianshahzaib_shouka6510
Photoshop has ways to let you design web pages and then export their assets
In brief:
The main thing is to take full advantage of layers and artboards. Design in terms of CSS layers, and implement those as Photoshop layers. For example, a rectangle of color would be its own CSS layer, so make it an independent shape layer in Photoshop. Use separate artboards for design variations, such as how you are designing versions for desktop, tablet, and mobile screen sizes.
When you’re done designing, Photoshop offers two different ways to export the design.
If you choose the command File > Export > Export As, you can export each artboard as its own document. This is useful for reviewing your website design to your client, but is not useful for coding the web site, and is not interactive in any way.
If you choose the command Layer > Export As, you can export each layer as its own separate web asset, such as JPEG and PNG files. If you designed each of them at the correct dimensions, you should be able to use those assets on the web site, referenced by the code you provide separately.
Neither method exports any code, they only export images. You must still create the website code that references those images. That code will be written in a different application, such as Dreamweaver.
Also, this is a one-way trip. Photoshop can only export images.* Photoshop has no way to read in a website and update it for you.
*Actually, the Slice feature and Save for Web (Legacy) can export code, but the feature is so old that the code may not be very useful for the way current web sites are coded. So I don’t think this counts.
... View more
AdChoices