Sign Up to Subscribe

To get the latest and most quality design resources!

Sign Up to Subscribe

Thank you for your support!

WHAT IS MOCKPLUS?

Mockplus is a faster and easier prototyping tool to help you make prototypes by making interactions with simple drag-and-drop and working on a team project easily and effortlessly. Microsoft, Oracle, Simens, IBM, UBI, Huawei and 300+ global colleges are using it, YOU SHOULD TOO!

Start your free trial

Dummy Series: How to Make Photoshop Wireframe Easily?

Mockplus Team 40231 Views

It's a tutorial on how to begin making Photoshop wireframe. Deep into detail steps, introducing the ways to create button, storyboard and Photoshop center text.

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.

STILL HUNGRY FOR THE DESIGN?

_____

Mockplus is a desktop-based tool for prototyping mobile, web and desktop apps easily and quickly. Create interactions by simple drag-and-drop and your teamwork will be time-efficient with the collaboration features.

Free Trial
idoc close

Need help?

Join Mockplus on Slack Click here

support@jongde.com