Create Mockups in an Instant with Photoshop CC

Have you tried all the features of your Adobe Photoshop CC? Among the many benefits that Photoshop CC provides, did you know that through its updated functions and features, it’s now easier and quicker to create a website prototype? Our designers at MicroCreatives use Photoshop CC and it is especially useful when we need to create a quick website mockup to show to a client or to share with the developer who will build the website. Aside from the rapid prototyping features of the software, Creative Cloud also allows for easier collaboration.


Some prototyping methods using Adobe Photoshop CC:


GuideGuide Extension

GuideGuide extension

GuideGuide is an extension for Adobe Photoshop and one of the most installed at that. GuidGuide helps save design time and makes it easier for designers to work with guides. Just enter the required margin widths, gutter width, and the number of columns, then click the “Add guides” to generate the grid. GuideGuide is available for download at $10 for Photoshop CC and newer.


Navigation Elements

To create menu items, duplicate your type by selecting and dragging the layer by holding the “Opt/Alt” key. Select all the navigation text and click the “Distribute Vertical Centres” button in the “Tool Options” bar to align text layers vertically.



Before adding images to your design, make sure to convert them into Smart Objects so you can replace or update them easily later on. The placeholders can be used as vector masks, then add the image as a new layer and duplicate the vector mask to link to the new layer. Alternatively, you can also use the “Paste Special>Paste Into” function. Photoshop CC also features Adobe Generator, allowing designers to create image assets in an instant. Just go to “File>Generate>Image Assets” then add a file suffix in the “Layers” panel to export the selected layer to a folder.



In Photoshop CC, you can add effects using “Layer Styles” by dragging the FX icon to a new layer (if using the most recently used Layer Style). Another useful Photoshop CC feature for rapid prototyping is “Isolate Layers” when you only want to edit specific layers. Just select them then go to “Select>Isolate Layers”. This tool reduces clutter so you can work only on the layers that need to be edited.


Copying a Layer’s CSS

Adobe Photoshop CC is not just for design. It can also copy a layer’s CSS attributes in order to generate an HTML prototype. Perform “Ctrl+right-click” on the layer and select “Copy CSS Style” to copy the code and paste it into a new document in Edge Code CC, Dreamweaver, or Muse.


Do you have other tips when creating website mockups in Photoshop CC? Share them with our readers in the comments below!