WebZap is a Photoshop extension that lets you create website mockups quickly. You can create the most common layouts in minutes and all the layers are editable. This is one of the best Photoshop plugins we’ve tried and we’ll show you why. Check out this review of WebZap and see why you’ll want one.



[vc_column_text width=”1/1″ el_position=”first last”]

What is WebZap?

WebZap is a Photoshop addon that lets you create web layouts fast. In fact, we were able to create a wireframe/mockup of our layout in minutes! This is one of our favorite Photoshop plugins for web designers and we’ll show you why.

[/vc_column_text] [vc_video link=”https://vimeo.com/52345557″ size=”740×416″ width=”1/1″ el_position=”first last”] [vc_separator width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]

Easy Installation Through Adobe Extension Manager

Installation is easy and WebZap does it right by doing it through Adobe Extension Manager; a convenient way to add/remove extensions for your Adobe products. This also means that you need Photoshop CS5 or newer to use WebZap. Once you have WebZap installed, you can access it from the Window > Extensions > WebZap menu. WebZap appears as a panel in Photoshop.

[/vc_column_text] [vc_gallery type=”nivo” interval=”0″ onclick=”link_no” img_size=”full” images=”4709,4710,4713″ custom_links_target=”_self” width=”2/3″ el_position=”last”] [vc_separator width=”1/1″ el_position=”first last”] [vc_column_text width=”1/1″ el_position=”first last”]

The WebZap Panel

[/vc_column_text] [vc_single_image image=”4693″ img_size=”full” img_link_target=”_self” width=”1/1″ el_position=”first last”] [vc_column width=”1/3″ el_position=”first”] [vc_column_text width=”1/1″ el_position=”first last”]

1.  Select a layout. There are two types of layouts you can pick from and it is mainly based on where you want your navigation to be located (top or left).

[/vc_column_text] [/vc_column] [vc_column width=”1/3″] [vc_column_text width=”1/1″ el_position=”first last”]

2. The Layout tab lets you add a navigation, a feature area, and content.

[/vc_column_text] [/vc_column] [vc_column width=”1/3″ el_position=”last”] [vc_column_text width=”1/1″ el_position=”first last”]

3. Once you have your layout designed, the UI tab lets you add buttons, forms, and sliders easily. All of the items will appear as vector layers which means you can change the size and shape using Photoshop’s path tools.

[/vc_column_text] [/vc_column] [vc_column width=”1/3″ el_position=”first”] [vc_column_text width=”1/1″ el_position=”first last”]

4. The styling tab allows you to change the color, font, and other style features.

[/vc_column_text] [/vc_column] [vc_column width=”1/3″] [vc_column_text width=”1/1″ el_position=”first last”]

5. Finally, when you’re done with your layout, you can preview it with these auto-generating mockups.

[/vc_column_text] [/vc_column] [vc_column width=”1/3″ el_position=”last”] [vc_column_text width=”1/1″ el_position=”first last”]

4. This toolset area lets you create a new blank page, add layout guides based on the 960 grid system, snip your design into smaller parts, and create placeholder text layouts.

[/vc_column_text] [/vc_column] [vc_separator width=”1/1″ el_position=”first last”] [vc_column_text width=”1/1″ el_position=”first last”]

Creating a Layout

I started WebZap skeptical about how useful it’ll be. But I was wrong. WebZap created a template with a logo, navigation, and fake-content automatically with just one click. All their templates conforms to the 960 grid system and the template elements are organized into groups with editable layers.

You start off by choosing whether you’d like to create a template with the menu on the top or on the left. Once that is selected, WebZap will present you with 14 header or 9 sidebar navigation styles to choose from. Next, you choose the feature area. Finally, you complete it with a content layout to show in the fold. In 3 simple steps, you’ve created yourself a homepage layout.

[/vc_column_text] [vc_single_image image=”4726″ img_size=”full” img_link_target=”_self” width=”1/1″ el_position=”first last”] [vc_video link=”https://www.youtube.com/watch?v=3kl-zrHjb4I” size=”740×416″ width=”1/1″ el_position=”first last”] [vc_separator width=”1/1″ el_position=”first last”] [vc_column_text width=”1/1″ el_position=”first last”]

Editing the Layout

WebZap comes with a good number of premade layouts/styles and it doesn’t stop there. The layouts are organized into layer groups with vector shape and text layers. This means you can easily edit text and alter shapes (ex. backgrounds, buttons, etc.) nondestructively. One caveat is that if you rename the layer groups, WebZap will not update the content when you select a new style. This is because WebZap relies on the layer group names for identification. Instead, you will get a new layer group with the new content.

Subscribe
Notify of
guest
9 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Maidul Islam

wow.. Fantastic steps.. I really like it. keep up :-)

les

Nice review but I disagree that it’s a “must-have”.

I got this but still rather design from scratch using a 960 grid PSD.

Rits

I agree!

Justin Hodges

Can you add a picture as the background?
Like when I put this theme into wordpress will it be fully editable

Linda McPherson

I don’t think so. It’s more of a visual template creator, you need to code it to HTML for yourself.

Guest

Is there a free trial?

dennytang

Don’t think there’s a free trial :(

roflcopter

Lol it’s 15 bucks, cmon …

Joshua

$15 is $15 man

Free Photoshop Actions

Sign up to our weekly newsletter and get 10 free Photoshop Actions.

Special FX Photoshop Actions