Mockplus - Design Faster. Collaborate Better.

Subscribe to our blog

To get the latest and most quality design resources!


Best wireframing and prototyping tool for APP and Web design.

Get Started for Free

One platform for design, prototype, hand-off and design systems.

Get Started for Free
Start prototyping and collaboration
Blog > Design and Prototyping tools > Dummy Series: How to Make Photoshop Wireframe Easily?

Dummy Series: How to Make Photoshop Wireframe Easily?

May 12, 2017

Top designers prefer Photoshop to design wireframes, as it's among the best wireframe tools. But it doesn't mean PS is a convenient prototype tool to all green hands. On the contrary, it`s pretty tricky for most design beginners, since it requires much experience to play well. To help these starters quickly learn, we prepare this guideline and provide detail steps on how to create wireframes.

We always find fresh designers in front of PS screen asking:

"How can I make concept drawing for a web page with Photoshop?",

"Is there any way to prototype storyboards in PS?",

"How to center Photoshop text?"...

If you are one of those, set your mind at ease, since we are about to demonstrate you the quick solutions.

How to Create Designs in Photoshop?

In this section, we are going to provide methods to create wireframes in Photoshop according to various requirements.

Before start, you must ask yourself, what kind of page you would like to design, what makes it different from other websites, and what ingredients are a must. Then use a pencil to draw these thoughts on papers and turn ideas into wireframe visually. Lastly, apply Photoshop to build digital wireframe.

Photoshop Wireframe - Scratch Button

1.To draw a button with PS, keystroke "Shift+U", or right-click rectangle tool.

Photoshop wireframe - Use Rectangle tool to draw button

2.Drag and drop to draw the button. In properties, you can adjust the width, height, and separately curve angle degrees.

Photoshop wireframe - Adjust corner curve degree

3.Select "T" or keystroke "Shift+T" to input any text above button.

Tip on Photoshop Center Text: Photoshop won`t automatically center anything. It leaves to us to manually center photoshop text vertically and horizontally. To change text horizontal position in the textbox, press [Advanced...] in Properties panel. In next panel, use "Set the baseline shift" blanket to modify its vertical position.

Photoshop center text

Besides, Storyblock is another crucial component in wireframe, which contains text, image and shows important info. Next, we will talk about how to make the storyboard in PS.

Photoshop Wireframe - Build Storyboard

Storyboard is a content block, mainly containing text, image to demonstrate info. Basically, we mix use "Rectangle" tool & "Text" tool to scratch storyboard from nothing. Line by line, text after text. After works, you will see a similar storyboard block just like below one.

Alert: Make sure the layers are in right sequence. Or the wireframe will not show right.

Create a storyboard

After assembling all components in PS, creating the banner, left guidance, menu, key content section with storyboards and footer, you've half-finished wireframe. Rest is all about: check, learn, modify, assess and repeat until the prototype is satisfying. A good designer always works hard to ensure his wireframe architect is better to go.

Drawbacks In Using Photoshop Wireframe

Photoshop wireframe tutorial explains how to create wireframes in details. Unluckily, we still find it inconvenient in many aspects. Such as we can be stuck with manually changing the baseline shift, to center objects. Also, it`s a bit complex to create storyboards, and drawing those lines is quite time-consuming and annoying. The worst of the worst: we must calculate all X and Y positions for every element when creating a wireframe.

Easier Wireframe with Mockplus

Differed from Photoshop, Mockplus as an intuitive prototyper is a professional mockup software. It keeps delightful features in rapid prototyping and easiness. Drag and drop, input values, that`s all it needs to create any wireframe. Inside its toolbox, there are numerous off-the-peg components, so any designers can directly use them instead of creating them from zero. For wireframe displays, it supports more ways, such as allowing users to generate QR codes or online HTML. Likewise, it supports exporting html file. Cloud Sync in Mockplus enables users to access to their prototype projects anytime, anywhere, which Photoshop wireframe can`t compete with. It`s way user-friendly in wireframe and UI design.

In case you want to give it a shot, here is the link to Mockplus Free Download.

The professional edition supports 7 days try. In these days, you can free explore all Mockplus features.

Summer ye

In- house content editor, specialize in SEO content writing. She is a fruit lover and visionary person.