Программы для дизайна, софт для дизайнеров. Программы для дизайна, софт для дизайнеров Лучшая программа для web дизайна
Если рассматривать программы для веб-дизайнера как некий базовый пакет основных технологических приёмов и возможностей, первое, что вспомнится даже далёкому от этой профессии человеку - это продукция компании Adobe (Photoshop, Illustrator). При этом мало кто знает, что набор программ в арсенале дизайнера заметно превышает этот перечень. А освоить веб-дизайн на деле оказывается куда сложнее, чем кажется на первый взгляд.
Программы для веб-дизайнера: необходимый минимум
В перечень навыков современного веб-дизайнера входят такие элементы, как знание языков программирования CSS и HTML, умение создавать шаблоны с "нуля" и работа с готовыми исходными материалами. Но это, скорее, общая информация. На самом же деле веб-дизайнер использует в работе массу самых разнообразных инструментов.
1) Программы для работы с растровыми изображениями
К этой категории относятся программы, позволяющие редактировать графические файлы и дополнять их необходимыми спецэффектами. Именно они позволяют ретушировать фотоснимки, кадрировать их, работать с системами фильтров и слоями, а также тонировать и корректировать цвета изображения.
Среди существующих вариантов программ для веб-дизайнера к этой категории относятся:
Удобный и эффективный инструмент для обработки фотоснимков. Позволяет производить манипуляции различной сложности. Среди недостатков - значительная ресурсоёмкость программы.
Кроссплатформенный вариант аналога привычного Photoshop. Удобный интерфейс, неплохая функциональность, простота в работе.
Paint - это графический редактор для Windows, позволяющий работать с различными типами графики. Для этой программы существует немало дополнительных плагинов, заметно расширяющих её функциональные возможности.
2) Программы для работы с векторной графикой
Эта категория программ нужна для создания надписей, кнопок, прочих элементов дизайна сайта на базе существующего клипарта или "с нуля". Также с помощью этой категории программ создаются элементы дизайна для изготовления визитных карточек, бланков, фирменной печатной продукции.
Среди программ этой категории выделяют две базовые:
И вспомогательную "light"-версию - Corel Xara с усеченными функциональными возможностями, но гораздо меньшим "весом".
3) Браузеры
Основная функция любого браузера - просмотр веб-страниц. Но современные браузеры обладают куда более обширными функциональными возможностями. В частности, в браузерах Mozilla FireFox и Google Chrome присутствует инструмент под названием Firebug, позволяющий инспектировать составные элементы страниц сайтов и получать необходимые сведения, приобретая ценный опыт, необходимый любому веб-дизайнеру.
4) Инструменты верстки страниц
Помимо создания макетов, на веб-дизайнеров чаще всего возлагаются ещё и функции верстки страниц. И в этом случае неизбежно придётся осваивать HTML-редакторы, позволяющие работать с этим языком программирования. Самый простой и удобный из существующих - NotePad++.
5) Инструменты распознавания текста в графике
Веб-дизайн подразумевает наличие подобных функциональных возможностей. Для распознавания текста на графических носителях подойдёт , вполне способная справиться с поставленной задачей.
Программы для веб-дизайнера: расширенный список
Помимо базового набора программ, веб-дизайнеру могут пригодиться и другие инструменты, позволяющие решать задачи по созданию макетов и отдельных элементов сайтов.
Для определения цвета в формате RGB для любой точки экрана существуют расширения для браузеров (для Chrome - Eye Dropper), либо специальные программы - в частности, Colormania.
Для работы с анимированными графическими элементами существует специальная программа Adobe Flash, позволяющая создавать баннеры, заставки, анимированные экранные кнопки и т.д.
А для создания изображений в GIF-формате существует очень полезная программа - GIF Animator, позволяющая преобразовывать обычную картинку в нужный формат.
Для измерения различных элементов дизайна также есть удобные инструменты - от программ Code-V-Ruler и SP Ruler до расширений к браузерам (таких как Measurelt для Chrome).
Среди полнофункциональных редакторов для веб-дизайнера можно также порекомендовать такие программы как:
BlueGriffon - условно-бесплатный редактор с достаточно широким функционалом, позволяющим создавать дизайн и верстку сайта с нуля.
OpenBEXI - HTML-редактор, позволяющий создавать веб-страницы с использованием готовых модулей - виджетов. Присутствуют и настройка CSS, и возможность добавления необходимых скриптов, и протокол FTP для загрузки полученного результата на сервер.
Brackets от Adobe - редактор, позволяющий работать с javascript, HTML и CSS кодами, имеющий массу расширений и регулярно обновляющий свои возможности.
В этой статье описан принцип выбора хорошего цифрового фотоаппарата для домашнего использования. На мировом рынке представлено большое количество разнообразных моделей, в связи с чем многие люди просто теряются при...
Веб-дизайн - одно из наиболее разносторонних человеческих занятий. С одной стороны, правила языка разметки гипертекста - HTML - крайне просты, и за пару дней любой способен выучить их основы. С другой стороны, существует масса технических тонкостей, хитростей и подводных камней, достаточных для превращения хорошей работы в бесполезный набор текста. Одновременно стоит задача удобно и наглядно разместить данные на странице - а это уже доступно далеко не всем. Наконец, сайт должен быть просто красивым, то есть программист обязан стать и художником...
Создать простую веб-страничку можно и за пять минут - а совершенствоваться необходимо годы. Кроме того, опубликованная работа открыта для всех желающих - и, в отличие от других областей программирования, в этой почти нет «секретов цеха». В таких условиях важны инструменты для дизайна - их вы и найдете на нашем DVD.
Средства веб-дизайна
Среди некоторых дизайнеров распространено мнение: «настоящие» веб-дизайнеры работают в «Блокноте». Честно признаюсь - не понимаю, как умение создавать себе дополнительные трудности связано с профессионализмом! Верю, где-то есть поклонники завинчивания гвоздей отвертками, любительницы ездить на велосипеде в туфлях на шпильке и специалисты по поеданию супа китайскими палочками, но этот текст определенно не для них.
Так из чего же состоит арсенал веб-мастера? Во-первых, это редактор с подсветкой синтаксиса и удобным вводом тегов. Подобные редакторы бывают двух типов: графических (принцип WYSIWYG - what you see is what you get) и для прямого ввода кода HTML. С помощью первых можно быстро создать веб-страницу и легко ее изменить, вторые позволяют писать правильный и компактный код, не ограничены в средствах создания. Как правило, подобные программы способны самостоятельно запускать написанную страницу в браузере и загружать ее в сеть, автоматически создавать таблицы и другие стандартные структуры тегов.
На этом список инструментов не заканчивается: для дизайнера важны средства для сжатия страниц, способные убрать лишние пробелы и другие ненужные символы. Исходный код страницы становится менее читаемым, но сокращается размер. Другое популярное средство - программы для проверки корректности веб-страниц. Даже если сайт хорошо отображается в браузерах, он может не соответствовать стандарту - а это зачастую приводит к проблемам в ближайшем будущем.
Инструменты веб-дизайнера
Выбор редакции HateML Pro
Версия: 1.105
Лицензия: свободно распространяемая
Язык: английский
Прекрасный редактор для веб-программиста, поддерживающий HTML, CSS, JavaScript, PHP, VB Script, XML и даже SQL. Программа предлагает сделать работу с исходным кодом страницы или скрипта удобной и для этого предлагает целый арсенал разнообразных средств. Особенно хорош «Инспектор тегов», позволяющий легко менять и настраивать атрибуты тегов. Отлично реализована работа со стилями, позволяющая как создавать отдельные файлы с CSS, так и встраивать стили в страницу.
В программу включено несколько вариантов внешнего вида, можно также лично подстраивать программу под свои нужды. Кроме того, есть ряд полезных мелочей: управление цветами, специальные символы, удаление избыточных знаков. К сожалению, дополнительные функции программы не всегда работают стабильно, но это не создает больших проблем.
Интерфейс: 8
NVU
Версия: 1.0
Лицензия: свободно распространяемая
Язык: русский
Отличная программа для создания веб-сайтов, позволяющая параллельно создавать страницу в графическом режиме и менять ее исходный код. Как и Firefox, эта программа выросла из проекта Mozilla, а затем получила самостоятельное развитие.
В программе есть все элементы, необходимые для веб-дизайна: таблицы, формы и даже стили. Программа следит за правильностью оформления кода, одновременно оставляя свободу для творчества.
В NVU интегрированы инструменты для проверки корректности страницы (требует соединения с сетью) и очистки страниц от избыточных символов. Кроме них есть множество разнообразных мелочей, упрощающих жизнь при написании веб-страниц.
К сожалению, развитие программы остановилось, так что ожидать новых функций не приходится.
Интерфейс: 9
Actual Drawing
Версия: 6.0
Лицензия: ознакомительная
Язык: английский
Эта платная программа содержит в себе целый комплекс разнообразных инструментов для веб-дизайна. Как легко угадать по названию, ее основа - графический редактор веб-страниц, позволяющий создать страницу из нескольких графических объектов: изображений, блоков текста, элементов меню, таблиц, форм и тому подобного. Каждый из объектов обладает атрибутами, которыми можно легко и быстро управлять.
В комплект входят 16 комплектов шаблонов, по которым можно построить сайты со стандартной структурой (а таких в сети большинство). В незарегистрированной версии программы некоторые шаблоны случайно скрываются, и для полноценного выбора приходится вызывать меню несколько раз подряд.
В программу встроено множество небольших автоматизирующих решений: преобразование изображений, изменение нескольких файлов одновременно, проверка ссылок. Приятно, что работа с программой основана на слоях: эта концепция позволяет создавать сложные сайты без нагромождения объектов.
К сожалению, работа с исходным кодом страницы практически не предусмотрена - для профессиональных дизайнеров это может стать критическим недостатком. Кроме того, это может затормозить рост для начинающего разработчика веб-страниц.
Не последний вклад в популярность программы принадлежит системе справки, в которой пошагово описаны многие процедуры, необходимые при создании сайта. Стандартная справка дополнена небольшими «рецептами», которые описывают полезные мелочи.
Интерфейс: 8
Alleycode HTML Editor
Версия: 2.2.0
Лицензия: свободно распространяемая
Язык: английский
Alleycode HTML Editor - пример HTML-редактора, ставящего во главу угла исходный код страницы. Нам предлагают работать исключительно с html, а для автоматизации ввода тегов есть целый набор кнопок для автоматического ввода тегов. Разработчики учли необходимость работы не только с основными тегами, но и с формами, и с фреймами, и с таблицами. Поддерживается и PHP.
Отдельно стоит сказать о работе со стилями. В Alleycode HTML Editor в отличие от многих других средств есть мастера работы с CSS, заготовки для создания стилей: разработчики явно рассчитывают, что дизайнеры будут основывать свою работу именно на стилях.
К сожалению, бросается в глаза недостаток разнообразных полезных мелочей и возможности проверять код на простейшие ошибки.
Интерфейс: 7
Amaya
Версия: 9.55
Лицензия: свободно распространяемая
Язык: английский
Масштабная программа для графической разработки веб-страниц, уделяющая особое внимание соблюдению разнообразных стандартов. Дизайнерам пригодится большой набор разнообразных тегов и их атрибутов. Хорошо налажена работа со стилями и с XML. К сожалению, интерфейс программы не слишком удачен, не всегда продуманы мелочи, так важные при ежедневной работе с программой.
Интересно и второе предназначение программы: Amaya позволяет легко записывать математические выражения, а затем использовать их в других программах и выкладывать в сеть.
Интерфейс: 7
Arachnophilia
Версия: 5.3
Лицензия: свободно распространяемая
Язык: английский
Простой редактор без принципиальных отличий от многих других средств, характеризующийся стабильной и надежной работой, а также полным набором базовых функций: подсветки кода, удобным вводом цветов (по правой кнопке мыши), набором готовых тегов, мастером создания таблиц, автоматическим поиском и удобным вызовом разных браузеров. Кроме того, программа позволяет проверять HTML на корректность, а также автоматически структурировать код для его лучшего понимания.
К сожалению, последние версии программы пока уделяют мало внимания стилям, что не позволяет назвать «Арахнофилию» универсальной программой для веб-дизайнеров.
Интерфейс: 9
Matrix Y2K Website Studio 2005
Версия: 1.7.7
Лицензия: свободно распространяемая
Язык: английский
Полноценный инструмент для веб-дизайна со всеми характерными для класса программ функциями: предпросмотром, набором тегов, удобным вводом элементов. В то же время поддержка стилей явно недостаточна, кроме того, ощущается явный недостаток специальных средств для автоматизации.
Matrix Y2K будет полезна в первую очередь программистам на PHP и, судя по всему, для них предназначена. Если программа вам по душе, есть смысл зайти на сайт: в ближайшее время ожидается новая версия «студии».
Интерфейс: 7
MAX’s HTML Beauty++
Версия: 2.0.0.2004
Лицензия: свободно распространяемая
Язык: английский
Разработка этой программы была заморожена еще в 2003 году, и именно это обуславливает важнейшие недостатки программы, например, недостаточную поддержку стилей. Тем не менее нельзя не отметить отличный интерфейс Beauty++: с виду она похожа на обычный редактор, но позволяет легко и наглядно изменять теги, добавлять атрибуты и в целом менять веб-страницу. Кроме того, программа помогает проверить правильность написания кода.
Интерфейс: 9
Enersoft SiteGenWiz Platinum
Версия: 1.6
Лицензия: свободно распространяемая
Язык: английский
Необычная программа, предназначенная для создания не отдельных веб-страниц, а целых сайтов. Сначала дизайнер должен построить структуру будущего сайта, затем выбрать дизайн, модифицировать его по своему вкусу и внести специфичные для сайта данные. Наконец, последний этап работы - генерация сайта. Разумеется, отдельные страницы можно дорабатывать и после этого.
SiteGenWiz нельзя рассматривать как универсальный инструмент создания сайтов, а для начинающих пользователей он может быть даже вреден: если пользоваться исключительно им, то творческое начало может попросту исчезнуть. Тем не менее опытный веб-дизайнер сможет значительно упростить свою работу, а дополнительные настройки помогут создать неповторимый сайт.
Интерфейс: 8
Virtual Mechanics Site Spinner
Версия: 1.6
Лицензия: свободно распространяемая
Язык: английский
Цель этой программы - помочь людям, которые только изучают HTML: программа позволяет вводить фрагменты HTML-кода и сразу же просматривать результат.
Интерфейс: 7
EasyNeatly
Версия: 1.0
Лицензия: свободно распространяемая
Функции этой программы крайне узки: она позволяет структурировать и очищать файлы стилей - CSS. Собственно, официальное название программы - «Аккуратные таблицы каскадных стилей CSS». У EasyNeatly нет даже графического интерфейса, ее приходится запускать либо при помощи контекстного меню explorer, либо из командной строки! Тем не менее программа выполняет полезную и редко встречающуюся функцию: она либо сжимает файл стилей для дальнейшего перемещения в сеть, либо структурирует его для удобного редактирования.
Интерфейс: 1
Total Validator
Версия: 1.14
Лицензия: свободно распространяемая
Язык: английский
Цель программы проста - максимально сжать HTML страницы перед загрузкой в сеть. Лишние пробелы, другие ненужные символы, избыточная информация - все это программа стирает, сокращая размер кода на 5-20%. В программе реализованы простые, но нужные мелочи: создается запасная копия изменяемых страниц, возможно сжатие и отдельных файлов, и целых папок.
Интерфейс: 8
Просмотр веб-страниц
Firefox
Версия: 11.5
Лицензия: свободно распространяемая
Язык: английский
Известный браузер, не получивший широкого распространения в странах СНГ, но достаточно популярный за океаном. 11 версия обладает широким набором функций: блокировкой рекламы, автоматическим заполнением форм, сохранением профиля в сети, чтением RSS и тому подобное. Широкий набор функций позволяет разработчикам браузера надеяться на рост популярности Avant Browser, так что для полноценного сайта необходим тест и в этой программе.
Интерфейс: 7
Netscape Navigator
Версия: 9.0 beta
Лицензия: свободно распространяемая
Язык: английский
Живая легенда мира интернет-просмотрщиков, проигравшая когда-то «великую битву браузеров» Internet Explorer. Не так давно разработчики заявили о возвращении знаменитой программы, но прежней популярности добиться уже не удалось. Новая версия обладает стандартным набором функций, характерных для современных браузеров.
Разработчики планируют вернуть популярность программе благодаря новой социальной сети: по их задумке пользователи смогут советовать друг другу сайты прямо через браузер, и с помощью такого «народного голосования» можно будет определить лучший сайт в сети. Впрочем, эта идея - дело будущего.
Интерфейс: 7
Opera
Версия: 9.22
Лицензия: свободно распространяемая
Язык: русский
Популярный веб-браузер, долгое время бывший абсолютным лидером среди платных интернет-просмотрщиков. Конкуренция со стороны Mozilla превратила Opera в бесплатную программу, которая сразу же завоевала симпатии.
В отличие от Firefox, требующего установки многих дополнений, «Опера» уже в поставке включает множество разнообразных функций: почтовый клиент, torrent-клиент, загрузку графики по желанию, настройку внешнего вида, менеджер загрузок и многое другое.
К сожалению, для «Оперы» характерны утечки памяти, так что для ее эффективной работы желателен объем оперативной памяти не меньше гигабайта.
Интерфейс: 9
Maxthon
Версия: 2.0.2
Лицензия: свободно распространяемая
Язык: английский
Популярная надстройка над Internet Explorer, добавляющая в этот браузер множество новых функций и улучшающая его интерфейс. Maxthon по функциональности практически не уступает Opera и Firefox: в нем есть вкладки, управление загрузкой графики, настройка внешнего вида, защита от потери данных при зависании, улучшенная работа с формами, группы ссылок и многое другое. Одновременно с этим сохраняются преимущества Internet Explorer: тесная интеграция с операционной системой и нетребовательность к ресурсам.
Интерфейс: 9
В данном разделе я планирую рассматривать не только программы для создания дизайна сайтов, а и любой другой софт, с которым так или иначе сталкивается веб дизайнер в своей работе. Самая популярная программа для дизайна это, наверное, фотошоп, но, как говорится, не им единым. Есть еще много нюансов и направлений в веб дизайне, где можно использовать специфический софт — верстка, шрифты, работа с браузерами, фтп и т.п.
Вообще использование программ для веб дизайна позволят не только «хорошо сделать свою работу», но зачастую это хорошая возможность сэкономить немного времени, автоматизировать и упростить какие-то процессы. Радует, что в последнее время подобных решений и программ для дизайнеров появляется все больше — обо всех новинках и старом проверенном софте я и буду рассказывать.
Дизайнеры — это те люди, которые находятся в постоянном поиске чего-то нового: интересных источников вдохновения, специализированных онлайн-сервисов, офлайновых программ по типу CSS редакторов, а также всевозможных хитростей/скриптов, помогающих ускорить и улучшить рабочий процесс. Вы наверняка слышали про один из самых крупных программных продуктов для данного браузера — встроенные инструменты разработчика Chrome Devtools, однако вместе с тем можно найти десятки и сотни более мелких, но весьма полезных приложений. Именно о…
Эффективность любого веб-ресурса во многом зависит от степени успешности его взаимодействия с пользователем, т.е. юзабилити и удачного UI/UX дизайна. Если сайт сложен в использовании, то его посетители с высокой долей вероятности найдут и выберут что-то другое. Однако если юзер получит положительное впечатление, то он не только будет пользоваться этим продуктом сам, но и станет рекомендовать его знакомым. В данной статье мы рассмотрим лучшие инструменты для создания хорошего юзабилити….
Когда возникает необходимость правки/улучшения фотографий, то далеко не каждый пользователь сможет решить задачу с помощью профессионального софта по типу Photoshop. Без дополнительных знаний или поиска информации в Google тут, к сожалению, не разобраться. Однако в качестве альтернативы советуем попробовать более простые фоторедакторы, которые как раз созданы для быстрой и легкой обработки графических изображений. Один из самых популярных таких инструментов — Movavi. Ранее про него уже рассказывали в…
Современные графические редакторы давно ушли от старых десктопных версий и запустили собственные онлайн-сервисы и разные мобильные приложения. Так, например, недавно мы рассматривали более 10-ти полноценных и самодостаточных программ дизайна на Андроид, есть аналогичный софт под iOS, можно вспомнить векторный редактор Vectr и многое другое. Корпорация Google решила не отставать от подобных тенденций и запустила свое онлайн веб-приложение для рисования на страницах браузера — Canvas Chrome. Не смотря…
Водяной знак – это прозрачный логотип или эмблема на изображениях и фотографиях. Дизайнеры и фотографы размещают их на своих работах для защиты авторских прав. Вы также могли встречать их в разных интернет-магазинах. Сегодня рассмотрим программу Visual Watermark для быстрого и простого добавления добавления вотермарков на фото.
Данная задача возникает когда вы, например, хотите перевести вашу древнюю семейную фотоколлекцию в цифровой формат, сохранив снимки на компьютере либо заново их распечатав. Увы, со временем исходный вариант изображения может подпортиться: появляются изгибы, потертости, трещины и прочие артефакты. В общем, тут не обойтись без дополнительной обработки. Теоретически, в качестве программы для восстановления фотографий могут сгодиться многие графические редакторы, но для выполнения этой работы потребуются специальные…
Долгое время инструменты создания/редактирования векторной графики были труднодоступными для вебмастеров, блогеров и контент-маркетологов. Во-первых, специальное ПО зачастую стоило дорого, а во-вторых, являлось слишком сложным для рядовых юзеров (не дизайнеров). Сейчас ситуация получше — можно найти разные аналоги Иллюстратора в свободном доступе, не сильно уступающие оригиналу. Об одном из них сегодня поговорим — это программа Vectr. Используйте данный бесплатный векторный редактор на обычном ПК или в…
Мы обсуждали Wordpress в основном с точки зрения шаблонов, но у системы есть еще одно большое преимущество — модули. Из-за них многие вебмастера, зарабатывающие деньги в сети, выбирают эту CMS для реализации своих задумок. Сегодня поговорим о плагине Wp-Loaner, который будет полезен тем, кто занимается кредитными партнерскими программами в CPA (Cost Per Action) нише. Вкратце рассмотрим возможности инструмента и настройки внешнего вида отображаемых данных в нем. Если…
Существует несколько интересных альтернативных Фотошопу программ для обработки фото на компьютере. Они позволяют легко редактировать снимки, придавая им уникальность и индивидуальность, как после использования профессионального софта. Об одном из таких решений под названием ФотоМАСТЕР мы сегодня расскажем. Основные преимущества программы перед Photoshop: Максимально простой / удобный интерфейс. Вам не нужны профессиональные навыки работы с графическими редакторами. Если что-то будет непонятно, то на официальном сайте есть бесплатные обучающие…
Андроид — наиболее популярная мобильная ОС, которая установлена на миллионах устройств по всему миру. Поэтому не удивительно, что под нее есть достаточно много игр, утилит, приложений, в том числе и разных Android Apps для дизайнеров. Вы можете использовать их на средненьких китайских смартфонах, топовых девайсах по типу Google Pixel 2 XL или планшетах Samsung с пером S Pen. Данная статья будет своего рода логическим продолжением подборки…
Каждый день в сети появляется все больше программ, которые предлагают использовать дизайнерам. Особенно много среди них планировщиков задач, инструментов по созданию ментальных карт и прочих модных фич, они появляются практически каждый день, просят невероятных денег и затем умирают естественной смертью от жадности.
Я всегда очень скептически отношусь к подобным новинкам и жду какое-то время их естественного отбора и отмирания, прежде чем бросаться изучать новый сервис. Это может оказать настоящей головной болью, особенно если вы только начинаете работать и еще не до конца понимаете зачем вам нужна та или иная программа.
На самом деле список программ и сервисов, которыми я пользуюсь для создания веб-дизайна, графического дизайна и координации задач не такой уж большой и каждый его пункт однозначно прошел проверку временем.
Топ-10 программ для веб-дизайнера и графического дизайнера:
1. Adobe Photoshop
Хотя он открывается далеко не первым при создании веб-дизайна, но пусть он как самый популярный будет первым пунктом. Фотошоп используется для интерфейсов бог знает сколько времени, я его использую уже не меньше 10ти лет и программа становится только лучше. В нем огромное количество возможностей, но веб-дизайнеры используют его для рисования интерфейсов, создания растровой графики, обработки фотографий. Графические дизайнеры примерно для таких же целей.
P.S. Я уже несколько лет жду момента, когда фотошоп заменят векторные программы. Первыми его конкурентами являются Sketch, Adobe Illustrator и чуть-чуть Indesign. Они действительно удобны в работе с интерфейсами, но беда в том что верстальщиков, которые умеют работать с этими программами можно посчитать по пальцам в России и все они работаю в крупных компаниях. Так что если вы фрилансер и вы не знаете кто будет верстать ваш макет, фотошоп это по-прежнему универсальный и лучший вариант. Может быть через пару лет это изменится.
2. Adobe Illustrator
Уже упомянутый выше Illustrator конечно же уже захватил часть веб-дизайна. А именно вся векторная графика: иконки, векторные текстуры, логотипы, векторные иллюстрации создаются именно в нем. А потом при помощи этой же программы экспортируются в масштабируемую веб-графику SVG.
Для графического же дизайнера иллюстратор программа номер один. Потому что все логотипы, фирстили, простая печатная продукция, не требующая постраничной верстки (визитки, например) также создаются в иллюстраторе.
А еще в нем собираются презентации и гайдлайны для клиентов.
P.S. Конечно, это не панацея. Если у вас есть задача сделать флаер вообще без текста и только с фотографиями, то логичнее его будет нарисовать в фотошопе, т.к. это растровая графика.
3. Coggle.it
В поиске адекватного инструмента для майндмаппинга я испробовала с десяток сервисов. Конечно, больше всего мне понравился mindmeister. Но после создания одной карты он запросил с меня довольно дорогую подписку с оплатой каждый месяц и я решила, что оплачивая каждый месяц пакет Adobe Creative Cloud и я так уже достаточно честный человек и стала искать бесплатный инструмент.
Coggle не ограничивает в количестве карт, их можно расшаривать другим плзователям, сохранять в картинках и выглядят они достаточно симпатично и удобно. Но он почему-то настаиввает на том, чтобы ваши карты были открытыми и их по идее может посмотреть кто угодно.
P.S. Если вы не знаете что такое mind map - это очень удобный и универсальный инструмент для разработки концепций, проектирования карты сайта, пользовательских сценариев. Как раз с него обычно начинается веб-дизайн. Как-нибудь я опишу этот способ подробнее.
4. InvisionApp
Очень удобный инструмент для прототипирования. Я создаю с его помощью серый дизайн и даже использую для презентации уже готовых макетов. Можно не только сразу проработать всю структуру сайта и расставить ссылку, но и расставить такие приятные мелочи как sticky меню или сделать глобальную навигацию. Минус в том, что Invision снова платный и предлагает только один бесплатный прототип. Если вы не ведете по 5 проектов одновременно, этого бывает достаточно.
Есть совершенно бесплатная альтернатива Marvel App, но его функционал намного проще и работать с прототипами все-таки сложнее.
5. Pinterest
Это он-лайн сервис, популярный в узких кругах дизайнеров. Здесь очень удобно составлять мудборды для проектов и хранить референсы. Мудбордами можно делиться, вести совместные, к тому же на этом ресурсе шикарная база дизайнерских работ, которой больше нигде нет.
P.S. Мудборды и референсы - это еще один инструмент создания концепций, но уже визуальных. Ищите примеры работ и составляете из них доску настроения, включающую шрифты, цвета, стиль, которые помогут вам для вдохновения в конкретном проекте.
6. Evernote
Я использую бесплатную версию, ее возможностей вполне хватает. В Evernote очень удобно хранить брифы, заметки, ссылки, вести органайзер. Это записная книжка по сути, синхронизируется с несколькими вашими устройствами, можно делиться заметками или блокнотами. Многие в нем работают, поэтому очень удобно и для командной коммуникации тоже.
7. Adobe InDesign
Он так далеко внизу только потому, что я не часто занимаюсь полиграфией. но вообще это очень популярная программа для верстки многостраничной продукции. Буклетов, каталогов, брошюр, листовок, книг. Если вы хотите работать в полиграфии, знать ее обязательно, вместе с фотошопом и иллюстратором, конечно, т.к. графика все-таки рисуется в них, а вот текст верстается в индизайне.
8. Toggl
Тайм треккер для внутреннего использования. Он не такой продвинутый как TimeDoctor, который снимает скриншоты с экрана и отправляет их клиенту каждый 3 минуты. Но toggl помогает правильно распределить время, сосредоточиться и посчитать сколько же времени вы тратите на ту или иную работу. Поработайте с ним годик и вы будете легко оценивать по часам любой проект и соответственно будете называть стоимость не наугад, а понимая сколько на самом деле ваших усилий для конкретного проекта понадобиться.
9. Trello
10. Adobe Lightroom
Редко, но все же использую для быстрой обработки фотографий. Фотошоп, конечно, обладает всеми возможностями лайтрума, но если у вас есть пакет из сотни фотографий для проекта и все они сыроваты, вы можете их быстро прогнать через лайтрум и получить очень приятные фото для эскизного макета, к примеру.
Топ-5 приложений для коммуникации с клиентом:
Я честно признаю, что работа дизайнера наполовину состоит из коммуникации с клиентом. Многие конфликты фрилансеров и клиентов возникают из-за отсутствия нормальной коммуникации, вы неверно поняли задачу и неверно ее решили, по большей части это даже бывает вина фрилансера. Поэтому я настраиваю все свои устройства на мгновенные push-уведомления и устанавливаю те мессенджеры, которыми пользуются мои клиенты, чтобы всегда в любых обстоятельствах быть на связи.
1. Skype
Конечно же скайп, несмотря на то что он в последнее время становится все более дряхлым и хромоногим. Но пока ни одна программа его не может заменить. И все звонки и видеоконференции ведутся через него.
2. Telegram
Я верю, что телеграм скоро умрет. Но возможно я к нему слишком строга, довольно много клиентов уже полюбили телеграм и конечно мне пришлось тоже его установить.
3. Вконтакте, facebook
Даже если вы ненавистник соцсетей, вам придется ими пользоваться. Потому что ими пользуются ваши клиенты и иногда коммуникация ведется через них. Наиболее популярен facebook, конечно, он традиционно используется для рабочих контактов и вакансий. А вот Вконтакте изредка, но все же бывает. Но кстати я использую вконтакте как журнал, настроив его на полезные группы, очень удобно бывает искать вдохновение.
4. Mail клиент
Общение по почте я стараюсь вести только официальное, т.е. с крупными клиентами если нужна документальная переписка и можно было спустя год найти нужное письмо. Общаться там по мелким вопросам неудобно, конечно.
5. Viber, WhatsApp
Я питаю личную ненависть к этим приложением, но все дело в спаме и в том, что они одно время не прислали мне пару важных уведомлений. Я их удаляла и ставила раз 5=) Пока что меня не заставили их поставить обратно.
Дополнительные программы:
А еще очень важно изучать что-то новое. Лет пять назад ни один веб-дизайнер и не подумал бы изучать моделирование в 3д, чтобы повысить свою квалификацию. А сейчас мы видим десятки сайтов, использующих в своей основе 3д, а иногда еще и анимированное. Это одна из причин, по которой я перестала разделять работу графического дизайнера и веб-дизайнера и стараюсь изучать все, что может быть полезно в моей работе.
1. Adobe After Effect
Использую для анимации. К примеру, анимации иконок, видеороликов, презентации анимационных сайтов.
2. Adobe Premier
Изредко использую для монтажа, чаще это ролики для ютуба или что-то для портфолио.
3. Cinema 4D
Работаю в нем с 3д объектами или анимационными роликами. Вообще очень полезная вещь для дизайнера: с этой программой можно очень быстро и легко создавать потрясающе красивые вещи для чего угодно: будь это веб или фирстиль.
Хорошему веб-дизайнеру для профессиональной разработки макетов необходимо владеть навыками работы с различными программными инструментами. И это касается не только графических редакторов. В данной статье мы перечислим основные категории программ с их главным назначением именно для целей создания дизайна сайта .
Программа обработки растровой графики
Это важнейшая категория программ, которую необходимо освоить на достаточно высоком уровне. В идеале достаточно одной. Их основное назначение - редактирование графических файлов и создание самых разнообразных эффектов. Для этого класса программ в первую очередь следует освоить следующие понятия и действия:
- Гармоничная тоновая и цветовая коррекция;
- Ретушь фото;
- Инструмент кадрирования;
- Отличия структуры и работы с различными форматами графики;
- Грамотная работа с фильтрами;
- Использование слоев.
Самыми распространенными программами здесь можно назвать:
- Adobe PhotoShop - это абсолютный лидер среди графических программ подобного рода. Однако она требует достаточно больших объемов ресурсов компьютера.
- Paint.net - хорошая альтернатива фотошопу. Удобный интерфейс, где все под рукой и возможность его расширить с помощью сторонних плагинов. Работает под Windows.
- GIMP - что расшифровывается как «GNU image manipulation program». Это давно известная кроссплатформенная замена фотошопу также с мощным функциональм. Есть версия GIMPShop более приближенная к интерфейсу Photoshop.
Программа обработки векторной графики
Владение данным видом программ также будет существенным плюсом для веб-дизайнера. Они позволяют с помощью клипарта или из ничего создавать кнопки, изображения, надписи и другие элементы. При этом работа с векторной графикой принципиально отличается от работы с растровой, поэтому осваивать их необходимо по отдельности. Для тренировки можно создать в векторе себе визитки, бланки или брошюры - будет полезный плюс от изучения редактора. Здесь необходимы следующие навыки:
- Работа с графическими объектами: их наложение, группировка, создание необычных фигур;
- Навыки работы с кривыми и узлами кривых;
- Владение направляющими и работы с сеткой;
- Понимание цветовых моделей -RGB, HSB, CMYK
- Умение разместить текст на любой кривой;
- Владение эффектами;
- Градиенты и заливка, в том числе и фрактальные.
Основными представителями этого класса программ являются Corel DRAW и Adobe Illustrator. Они приблизительно равномощные по своим возможностям и используют последние достижения в области векторной графики. Однако обе эти программы достаточно тежеловесные. Более легком вариантом является Corel Xara, однако за легкость приходится платить отсутствием возможности выполнения некоторых эффектов и команд.
Программы просмотра web-страничек
Это наши привычные браузеры. Их в настоящее время достаточно много и выбрать действительно есть из чего. В стандартном наборе наиболее популярной операционной системы Windows в комплекте идет браузер Internet Explorer , однако он считается далеко не идеальным и большинство пользователей интернета предпочитают устанавливать другие продукты. Который из них лучше, сказать сложно - все современные браузеры содержат много полезных инструментов и функций, однако наибольшей популярностью пользуются Google Chrome и Mozilla FireFox. Для дизайнера они понадобятся не только для серфинга в интернете в целях поиска картинок для сайта. В них имеется специальный инструмент инспектирования элементов веб-страниц - Firebug , который позволяет много полезных сведений о строении сайта.
Простой текстовый редактор
Если ваша цель - не просто научиться отрисовывать макеты, но и программировать их для создания полноценного сайта , то здесь понадобятся знания HTML и CSS верстки. Ознакомление хотя бы с их основами будет большим плюсом для понимания строения сайтов. Для этого можно пользоваться самым простым редактором с подсветкой HTML тегов - NotePad++ .
Программы распознавания текста
Достаточно часто текст представлен в виде картинки, однако это не такая большая проблема, когда под рукой есть инструмент распознавания текста. Здесь можно порекомендовать использовать FineReader , по возможности последней версии.
Некоторые специальные программы
Некоторые эффекты или действия нельзя или очень сложно выполнить в перечисленных программах, поэтому понадобятся некоторые дополнительные программки, например:
- Colormania - полезный и легкий инструмент, который позволяет в один клик определить цвет в формате RGB любой точки экрана монитора. Можно также воспользоваться расширением для браузера, например Eye Dropper для Chrome.
- Adobe Flash - известный инструмент для создания баннеров и другой анимации для сайтов, например, интерактивных кнопок, мультяшных персонажей и много других вещей.
- Линейка - позволяет замерить размер любых нужных вам элементов. Программных решений здесь множество, например SPRuler, Code-V Ruler. Можно также воспользоваться подобным расширением браузера, таким как MeasureIt (Coogle Chrome).
- GIF Animator - простая программа для создания анимированных картинок в формате gif. Хотя эту работу вполне можно выполнить и в Photoshop.
По мере накопления опыта у вас будут появляться свои любимые и привычные инструменты для работы. Это лишь рекомендуемый перечень к использованию. Не стоит их все сразу устанавливать. Для начала работы вполне достаточно иметь один из визуальных редакторов и браузер, но заняться плотным изучением из возможностей и освоением практической работы.
