The Quickest Way to Create Mockups from a Live Web Page
A mockup is used to save time at the beginning of a design process. So creating a mockup should be a fast process, especially when you already have a live site to use as inspiration.
Instead of taking a screenshot and painstakingly using Photoshop to try and match fonts and other onscreen items, why not edit the live web page before taking your screenshot? This technique will save you tons of time in creating a mockup and will even make your design look better!
This article will show you how to create a mockup from an existing web page using the Web Inspector.
Getting from a Website to a Mockup
There is usually some source of inspiration when you’re creating a website. Many times the inspiration is another site. To find out if a particular design will work for your site, it makes sense to create a mockup before building the site itself. The mockup can be used to uncover possible issues with the layout and to get client approval.
In this article, we’ll start with a free template from templated.co, but this technique will work with any live site.
I’ll show you how to change the headline, navigation, colors, and how to create mobile versions.
We’ll compare and contrast the steps in the mockup process using both Photoshop and the Web Inspector.
How to Edit the Headline
Let’s start by looking at how to edit a headline with both Photoshop and the web inspection tools.
Starting Out with Photoshop
The first step in creating a mockup with Photoshop (or a similar image editor) is to take a screenshot of the site, and then open the screenshot in Photoshop.
From this point, you can start to make edits.
Editing the Headline with Photoshop
It will take a few steps to edit the headline in Photoshop. I’ll show you an easier way in a moment.
First, it’s important to realize that in Photoshop we’re working with pixels, not live text. So to update the headline, you’ll need to
- Crop the image down to just the headline;
- Export it as an image;
- Invert the color (if necessary) and clear away clutter from the text;
- Use with a tool like whatthefont to figure out what typeface is applied;
- Find the actual font (or the closest approximation—in this case none of the suggested fonts were an exact match and all of the fonts required payment);
- Use something like the healing tool to hide the original headline;
- Figure out the size of the font (probably by trial and error);
- Match the placement of the headline;
I’m exhausted already. Wasn’t creating a mockup supposed to save time?
Starting Out the Web Inspector
Now let’s take a look at a different way to modify a headline.
Inspection tools are built into every modern web browser. Inspection tools let you run tests on and manipulate live web pages, including editing HTML and CSS (even running JavaScript code, if you’re so inclined).
For this article, I’m going to show you how to use the Google Chrome Developer Tools to edit a live site for your mockup, but you can do this in any browser.
The inspection tools can do way more than I can show in a single article. You can learn how to use inspection tools in depth in my Problem Solving for Web Professionals video course on Lynda.com.
Editing the Headline with the Inspector
Right-click on the headline and choose Inspect Element.
This will open up the web inspector. Since you right-clicked on the headline, it should already be highlighted in inspector.
To edit the headline: double-click on the text in the inspector and type a new headline.
Hit ENTER when you’re done.
Voila! A new headline. Same font family and size.
Changing Colors
Changing Colors with Photoshop
There are different ways to edit color on an existing image in Photoshop.
One way is to use Select > Color Range to create a selection, then replace the selection. This takes some careful tweaking.
Alternatively, if you have a solid block of color with white text—as we do in our example—you could create a solid color adjustment layer and using blending to show the text underneath.
These are not the only ways to accomplish this color change, but the are among the fastest (though still not very fast).
Let’s compare that to changing colors with the inspection tools.
Changing Colors with the Inspector
Right-click on the colored background and choose Inspect Element.
Look to the right at the CSS rules that have been applied.
Uncheck the background-image property to remove the gradient.
The background is now a solid color.
Double-click on the hex value for the background-color and enter a new one.
The new color is automatically applied in the layout.
Tip: You can also click on the color swatch to open a color picker.
How to Modify the Navigation
Another common task in creating a mockup is to make a custom navigation menu.
Editing the Navigation with Photoshop
The steps to change the navigation are very similar to editing the headline. All the same challenges from the headline (detailed above) are present, plus matters of alignment and spacing will have to be considered with a menu.
The steps would have to be repeated to get the right font family and size. I won’t rehash those here. Needless to say, it’s more tedious and frustrating work.
A photographic background behind the menu could also prove to be tricky.
Editing the Navigation with the Inspector
Making this change with the inspection tools requires a tiny bit of HTML knowledge.
Right-click on one of the menu items and choose Inspect Element.
Locate the container element of the menu. In this case, it’s a nav element.
Right-click on that element and choose Edit As HTML.
You can now make edits to the HTML, such as adding additional menu items.
When you’re done, hit CMD+RETURN (or CRTL+ENTER on Windows) to apply the change.
How to Add New Images
Editing the Page Images with Photoshop
This is the one thing that is actually easy with Photoshop. To change an image, simply place a new image into the document.
Scale and crop as needed.
Editing the Page Images with the Inspector
To edit an image in a live page, right-click and choose Inspect Element.
If the image is online somewhere, you can simply double-click to modify the src attribute so that it points to the new image.
If the image is on your local disk, you could use a base64 encoder to include it on the page, but this is a bit of an advanced technique.
You may also need to modify the size of the image.
How to Create Responsive Mockups
What if you’d also like to create mockups for tablet and smartphone versions of your site?
Let’s look at the two processes for creating responsive mockups. We’ll assume the site that you’re starting from is responsive already.
Adding a Responsive Mockup with Photoshop
Here’s the short explanation: You basically have repeat all the steps you used for the desktop version, more or less from scratch, starting with a new screenshot of each layout.
And you’ll probably have to do this twice: once for the tablet version, and once for the smartphone version.
Having the font faces figured out will probably save a little time, but they will likely be different sizes for each layout.
Conclusion: Photoshop is not very helpful in creating responsive layout.
Adding a Responsive Mockup with the Inspector
If you haven’t closed your browser window (or hit Reload), all of your changes will still be applied on the live site.
So all you have to do is scale down your browser window. That’s all I did in the screenshot(s) below.
In this case, I scaled down to a smartphone size (400 pixels wide).
Note that the headline, the menu navigation, the background color, and the new image are all intact.
It doesn’t get easier than that!
Where to Go Now
You don’t have to ditch Photoshop, but hopefully this article shows you how valuable the inspection tools (aka Developer Tools) are for a designer. The inspection tools can be used in collaboration with Photoshop to save you tons of time.
Continue to Solve Web Problems Faster
You don’t have to be a developer to take advantage of developer’s tools (nor do you have to do any coding).
I don’t want your web and problem-solving education to end with this article, so I’ve put together a free three-week course called Eureka! More Web Problems Solved. The email course will walk you through additional step-by-step solutions like the one in this article.
So is this how people spoof real webpages and replumb them to do other things?