[/vc_column_text] [vc_single_image image=”4728″ img_size=”full” img_link_target=”_self” 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”]

Adding UI Elements

Asides from creating quick web layouts, WebZap also lets you create quick buttons, forms elements, and sliders. There are the 3 common button shapes, 15 form elements, and 5 slider styles. Adding them is as easy as clicking. To edit them, you need to know how to edit layer styles and vector paths. Some UI elements let you customize the colors while others don’t.

[/vc_column_text] [vc_gallery type=”nivo” interval=”10″ onclick=”link_no” img_size=”full” images=”4734,4735″ custom_links_target=”_self” 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”]

Styling the Template

In the styling tab, you can change the style and color for the frame, dividers, and text. They’re all perfect albiet the text styles. This area lets you customize the font styles for the header tags (h1, h2, h3, etc.) and it works great as it is, but we wished they used the new paragraph/character styles feature found in Photoshop CS6.

[/vc_column_text] [vc_gallery type=”flexslider_fade” interval=”10″ onclick=”link_no” img_size=”full” images=”4742,4743,4744″ custom_links_target=”_self” 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”]

Creating Mockups

Once you’re happy with your design, you can create mockups of your template in the preview tab. WebZap comes with 8 Apple-centric mockup styles:

  • 6 desktop browser mockups in different angles
  • 1 smartphone mockup
  • 1 tablet mockup

[/vc_column_text] [vc_gallery type=”image_grid” interval=”0″ onclick=”link_image” images=”4749,4750,4751,4752,4753,4754,4755,4756″ custom_links_target=”_self” width=”1/1″ el_position=”first last”] [vc_column_text width=”1/3″ el_position=”first”]

Getting around the flattened mockups

While these are easy to use, we don’t see ourselves using it much. We’re hoping that in future updates, WebZap will come with more customizable mockups. The mockups are a flattened image but it is very easy to get around. Simply undoing a step (Ctrl+Z) will reveal a Smart Object. Double-clicking that Smart Object will reveals the layers.

[/vc_column_text] [vc_single_image image=”4757″ img_size=”full” img_link_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”]

Additional Tools

WebZap comes with additional tools that let you create a new 1100x1550px document (1), add layout guides based on the 960 grid system (2), snip layers/groups for easier PSD to HTML conversion (3), and generate Lorem Ipsum text layouts (4).

[/vc_column_text] [vc_single_image image=”4761″ img_size=”full” img_link_target=”_self” 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”]

Verdict: A must-have Photoshop extension for Web Designers

WebZap feels and works like a Photoshop action set organized in a panel. It comes with the most common layouts and creates them in editable vector shape and text layers.  It’s so easy-to-use that any beginner will figure it out, but you still need to understand the basics of the 960 grid system and how to edit vector shapes & styles. WebZap isn’t meant to replace your web design process – it’s meant to compliment it. Use WebZap to a quick wireframe then refine it with your own Photoshop skills.

We wished WebZap had an option to use Photoshop CS6’s Paragraph/Character styles instead of their own system and we’re hoping for to see more layout styles and UI elements in their future updates.

The best part about WebZap is that you can mix navigations, headers, content, and amazingly fast. This lets you play around with different layouts to find one that fits your project or generate several layout mockups in minutes so that your client can pick a layout and let you focus on the design. All of this for only $15

[/vc_column_text] [vc_cta_button title=”Buy Now” href=”https://webzap.uiparade.com” color=”btn-warning” size=”btn-large” icon=”none” target=”_self” position=”cta_align_right” call_text=”Get WebZap – $15″ width=”1/1″ el_position=”first last”]

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