—»     —»   WebZap: красивые дизайн-макеты в Photoshop
  Раздел: Инструменты   Комментариев: 10  

WebZap: красивые дизайн-макеты в Photoshop



WebZap представляет собой отличный Photoshop-плагин, который помогает дизайнерам создавать высококачественные макеты веб-дизайнов быстрее, чем вы можете себе представить. Комбинируя простые action с опциями оформления, этот инструмент позволяет вам быстро и просто участвовать в процессе разработки шаблона.

WebZap: красивые дизайн-макеты в Photoshop

Вы можете ознакомиться с нашей статьей, если хотите узнать, как работает этот инструмент. Мы обещаем вам, что это лучший Photoshop-плагин для веб-дизайнеров, который вы могли видеть со времен GuideGuide.

Что такое WebZap?

Скачивая WebZap, вы получаете расширение для Adobe, которое устанавливается по двойному клику курсором мыши (работает с версиями от CS5). Как только вы осуществите процесс установки в Adobe Extension Manager, вам нужно будет открыть Photoshop и перейти в меню Window>Extensions>WebZap.

WebZap: красивые дизайн-макеты в Photoshop

Это приведет к открытию новой панели Photoshop, которая выглядит так, как показано на изображении снизу. Эта дружественная и привлекательная панель содержит в себе все свойства WebZap.

WebZap: красивые дизайн-макеты в Photoshop

Здесь все выглядит просто, и на самом деле все будет просто (для всего вам потребуется не больше одного клика), но важно отметить, что здесь тонны скрытых функций и сложностей, которые и делают расширение стоящим своей цены. Давайте перейдем к ним, и рассмотрим, как работает этот инструмент.

Разметка

Панель WebZap разделена на 4 основные вкладки: Layout, UI, Styling и Preview (разметка, пользовательский интерфейс, стилизация и предварительный просмотр). Все они представлены в виде больших иконок в верхней части.

WebZap: красивые дизайн-макеты в Photoshop

Давайте быстренько пробежимся по всем вкладкам, чтобы понять, как они работают. Начнем с разметки. Первое, что нужно сделать, решить, хотим ли мы центрировать нашу навигацию в верхней части страницы, либо расположить ее в левой части страницы. Для нашего тестового проекта мы выбрали опцию центрирования.

WebZap: красивые дизайн-макеты в Photoshop

Этот выбор влияет практически на все, что идет после него. Все опции разметки будут автоматически перестроены под формат, который вы выбрали. Мы на самом деле удивлены, насколько универсален WebZap. Кажется, будто вы каждый раз принимаете решение, которое влияет на другие опции, причем все это работает безошибочно и всегда дает вам ожидаемый результат.

Навигация

Теперь, когда мы выбрали центрированный шаблон, нам нужно двигаться дальше, и выбрать одну из 14 встроенных навигаций. Все, что вам нужно будет сделать, это кликнуть по ней. Все проще простого!

WebZap: красивые дизайн-макеты в Photoshop

Клик по навигации представляет собой нечто вроде выбора action в Photoshop. Вы сидите и попиваете кофеек, а Photoshop за вас варганит навигационное меню (на самом деле, это занимает пару секунд). Когда действие будет завершено, у вас получится нечто вроде следующего:

WebZap: красивые дизайн-макеты в Photoshop

Учтите, что это не просто муляж, который вам предоставляет WebZap. Это на самом деле полноценный PSD-файл с отдельными слоями, которые легко и просто оформить или отредактировать.

WebZap: красивые дизайн-макеты в Photoshop

Довольно интересно то, что здесь немного неправильно называть навигацией то, что мы получаем. Так как мы получаем базовую рамку целой страницы. Она включает в себя и навигацию в самом верху и подвал внизу. Насколько нам известно, подвал одинаковый для всех 14 вариантов шаблона.

WebZap: красивые дизайн-макеты в Photoshop

Как видно, мы выбрали красивый минималистический вариант с логотипом-заглушкой, поисковой строкой и пунктами навигации. Эти элементы навигации представляют собой текст и могут быть без труда изменены под ваши нужды.

Основная область

После выбора навигационного шаблона нам нужно будет выбрать «Feature», «Fold» или оба варианта. Первая опция отвечает за большой слайдер изображений с текстом или миниатюрами изображений.

WebZap: красивые дизайн-макеты в Photoshop

Опять же, нажмите на последний пункт и тогда все будет совпадать с нашим шаблоном. Помните, что на данном этапе мы произвели всего 3 или 4 клика. Все остальное было сделано автоматически.

WebZap: красивые дизайн-макеты в Photoshop

Fold

Дальше все просто как намылить, промыть, повторить. Последний раздел нашей разметки называется Fold, что гипотетически означает область, которая находится после линии прокрутки. Здесь у нас есть две разные вкладки опций, одна из которых занимает всю ширину страницы, а другая занимает лишь половину.

WebZap: красивые дизайн-макеты в Photoshop
WebZap: красивые дизайн-макеты в Photoshop

Хотим отметить, что сейчас у вас уже есть разметка целой страницы! У вас есть множество смешанных опций, из которых можно выбирать, поэтому вы можете проходить этот процесс снова и снова до бесконечности и практически всегда получать уникальные вариации.

WebZap: красивые дизайн-макеты в Photoshop

UI (интерфейс)

Сейчас у вас уже есть понимание того, как протекает процесс, поэтому давайте быстренько познакомимся с некоторыми другими функциями. Следующая вкладка, наполненная функциями, называется UI (пользовательский интерфейс). Здесь вы можете видеть различные кнопки, элементы форм и слайдеры.

WebZap: красивые дизайн-макеты в Photoshop

Здесь нам действительно нравится возможность выбирать цвет кнопки при ее создании. Это поможет вам сэкономить много времени на дальнейшем оформлении.

WebZap: красивые дизайн-макеты в Photoshop

Стилизация

В этой вкладке вы можете начать изменять дизайн. Здесь есть три раздела: Frame, Divider и Text (рамка, разделитель, текст). Все объясняется на изображении ниже.

WebZap: красивые дизайн-макеты в Photoshop

Вот что происходит, если мы перетаскиваем рамку на разметку. Обратите внимание на то, что мы выбираем любой цвет, который хотим, и даже можем без труда его изменять сколько угодно раз, используя небольшую окружность с палитрой справа.

WebZap: красивые дизайн-макеты в Photoshop

Опции замены текста здесь вполне надежные. Вы можете оформлять заголовки (h1, h2, h3 и т.д.), создавать абзацы и ссылки. Вы можете просто выбрать элемент, который хотите изменить, выбрать цвет и использовать появившееся меню замены шрифта.

WebZap: красивые дизайн-макеты в Photoshop

Предварительный просмотр

Последняя вкладка называется «Preview», которая автоматически преобразует вашу веб-страницу в привлекательный макет, который отлично сидит как в окне браузера, так и в экране мобильного устройства.

WebZap: красивые дизайн-макеты в Photoshop

Некоторые из опций могут показаться бесполезными, но никогда не будет лишним иметь под рукой полноценный набор инструментов, который позволит вам реализовать задумки, практически не затрачивая времени.

WebZap: красивые дизайн-макеты в Photoshop

Мини-набор инструментов

Последний набор инструментов, который мы хотим с вами обсудить, называется «Mini Toolset». Он находится в верхнем правом углу панели WebZap. Он содержит 4 кнопки:

WebZap: красивые дизайн-макеты в Photoshop

Первые две кнопки вполне понятны. Первая генерирует новый документ, чтобы вы могли начать разработку новой страницы, а вторая отвечает за направляющие на базе сетки 960. Третья кнопка очень удобна. Она хватает группу слоев, которую вы выбрали, обрезает её и перемещает в новый документ. Это сильно упрощает процесс резки и сохранения изображения. Даже несмотря на то, что это отдельный плагин, эта функция будет невероятно удобной.

Наконец, четвертая кнопка генерирует заполняющие абзацы, заполненные текстом-заглушкой. Как и в случае с другими пунктами разметки, у вас есть выбор из различных опций.

WebZap: красивые дизайн-макеты в Photoshop

Ну как?

Сегодня на рынке множество приложений и платформ разработки, от Keynote до шаблонов Powerpoint, которые позволяют вам быстро создавать макеты дизайна веб-страниц. WebZap – это, пожалуй, единственное приложение данного жанра, которое действительно нас поразило. Оно невероятно простое и мощное, и теперь у нас и у вас есть возможность создавать отличные дизайн-макеты. Нам понравилось, что теперь есть возможность создавать такие привлекательные шаблоны практически без усилий.

Будут ли наши сайты выглядеть одинаково?

На первый взгляд, вам может показаться, что полезность WebZap ограничена. Что будет, если применить этот инструмент к 10 проектам? Возможно, ваши сайты будут выглядеть одинаково?

В ответ мы можем вам возразить: «только если вы ленивы». Если бы это было веб-приложение, вы бы, возможно, и были ограничены в разметках, стилях и так далее. Тем не менее, не забывайте, что это плагин для Photoshop. Это означает, что вы можете сделать абсолютно что угодно с тем, что для вас генерирует WebZap.

Расценивайте WebZap как отправную точку, которая поможет вам сгенерировать идеи шаблонов, и получить мощную структуру, в которую затем уже можно будет без труда вносить изменения и получить в итоге уникальный дизайн.

Таким образом, этот плагин можно назвать Photoshop-версией Twitter Bootstrap, который используется тысячами дизайнеров день ото дня. С помощью Bootstrap, дизайнеры могут создавать отличные сайты, используя стандартные стили, а затем прилагать усилие и изменять их, превращая в уникальные выделяющиеся дизайны. Тот же принцип применим и к WebZap.

Свойства, которые нам хотелось бы видеть

Можно сказать, что мы на самом деле очень поражены этим инструментом, и на самом деле считаем его одним из лучших плагинов Photoshop, связанных с веб-дизайном. Если использовать его правильно, у нас есть шанс в значительной степени ускорить процесс разработки.

Хотя и есть некоторые свойства, которые мы ожидаем увидеть в новых версиях данного инструмента.

Опции разметки подвала

На данный момент, подвал устанавливается вместе с навигацией. Он безусловно заслуживает отдельного модуля, который позволял бы нам выбирать различные разметки.

Подсказки

Пока не прочтешь документацию от корки до корки, не сможешь узнать, что делает та или иная кнопка, если она не обозначена всплывающей подсказкой. Благо действия можно с легкостью отменить, но было бы неплохо иметь подсказки, появляющиеся при наведении на ту или иную кнопку или опцию. Особенно полезной эта функция будет в разделе Mini Toolset.

Пользовательская расстановка и стилизация

В WebZap уже есть множество опций оформления, но всегда хочется немного больше. Чем более универсальным будет этот инструмент, тем больше дизайнеров будут пользоваться им. Этот список может быть бесконечным, но лично нам хотелось бы увидеть опцию сохранения собственных разметок, цветов кнопок и так далее.

Вперед!

Если вы проводите свои дни, работая в Photoshop над очередным дизайном веб-сайта, то вам точно стоит приобрести себе этот инструмент. Он совмещает в себе простоту в использовании, которую вы можете встретить в Rapidweaver и широкий ассортимент возможностей, как при работе в Photoshop. Снимаем шляпы перед Норманом Шираном (Norman Sheeran) и UI Parade за разработку такого замечательного инструмента!

Пройдите на веб-сайт WebZap, чтобы увидеть видео-демонстрации инструмента в действии. Учитывая то время, которое инструмент позволяет вам сэкономить, стоит он всего-навсего 15$.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Photoshop, шаблоны сайтов
Опубликовал Design FactoRy   Прочитано (раз): 17825   |   Оставлено комментариев: 10
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 23 ноября 2012 @ 20:35
Написал: AlekseySh — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
WebZap можно установить на русскую версию Photoshop?
Комментарий #2: 23 ноября 2012 @ 20:44
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
AlekseySh, не пробовал, но, думаю, без проблем должно встать.
Комментарий #3: 23 ноября 2012 @ 21:03
Написал: AlekseySh — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
На русский CS6 встало без проблем.
Спасибо.
Комментарий #4: 30 ноября 2012 @ 20:15
Написал: JC — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Могу помочь всем желающим купить с 15 % скидкой. Не перепродажа, каждому клиенту даю подтверждение покупки. Подробнее по ссылке: http://jc-blog.livejournal.com/3841.html
Комментарий #5: 3 декабря 2012 @ 18:47
Написал: Максим Сергеевич — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я купил, позарился. Так тут красиво всё написано. Инструмент оказался достаточно приметивный. Красивых (новых и стильных) дизайнов на нём не сделать. Просто что-то классическое. Вариантов там очень мало. А про какие-нибудь нестандартные решения, так вообще можно забыть.
Комментарий #6: 10 мая 2013 @ 07:15
Написал: hase — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Максим Сергеевич: не кто не мешает все элементы изменить, как говорилось выше это плагин для фотошопа который закладывает ОСНОВЫ, но не как не законченный вариант.
Комментарий #7: 21 марта 2014 @ 15:27
Написал: Николай. — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте!
Я питался установит плагин через менеджер на Adobe Photoshop CS5 и Adobe Photoshop CS6, но мне постоянно выпрыгивает окно с такой надписью. http://storage7.static.itmages.ru/i/14/0321/h_1395
408512_1861033_8bfc22442d.jpg

Скажи как решит эту проблему?
Комментарий #8: 21 марта 2014 @ 15:45
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Photoshop-версия

Ну у вас, походу, конфликт версий. Версия должна быть 12 или выше (см. пример). Если все пляшет - тогда не знаю в чем проблема. Может языковая локализация, может еще что ... тут уж вам к разработчикам за советом обратиться будет нужно.
Комментарий #9: 21 марта 2014 @ 17:46
Написал: Николай. — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я вот сделал скриншот. И увидел, что у меня х32 система,может ли это быт из-за этого?
http://storage9.static.itmages.ru/i/14/0321/h_1395
416514_4358424_1a21889370.png
Комментарий #10: 10 марта 2015 @ 05:27
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
тоже зачем то купил, все красиво расписано, жаль не прочитал комментарии
в принципе для того чтобы нарисовать простой дизайн кому то - пойдет

однако это просто рисование картинок,
ак как их перевести в код? в CSS?

какие инструменты лучше использовать?

спасибо
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930