Какими программами пользуется графический дизайнер
Программы для дизайнера: советы начинающим
Тема этой небольшой статьи — результат многочисленных вопросов по поводу выбора программ для тех, кто собирается работать в сфере компьютерного дизайна. Понятно, что хороший специалист должен уметь работать с различными программными инструментами, но краткость человеческой жизни, к сожалению, не позволяет изучить их все. Голова не резиновая, а кошелек не бездонный — полезные истины для ступающего на порог компьютерных курсов.
Первое с чего надо начать изучение чего бы то ни было — это прийти к четкому пониманию целей и задач, которых вы хотите добиться. В какой сфере дизайна вы будете реализовывать свой творческий потенциал, дома или в студии, какого уровня сложности будет ваша работа? Попробую предположить несколько возможных вариантов.
Дизайнер интерьера
Пожалуй, самый распространенный вариант в современной российской действительности. Для интерьерщиков характерно многообразие выполняемых задач: создание и выпуск проектной документации, трехмерная визуализация, обработка растровых изображений. Конечно, во многих архитектурных студиях существует некое разделение труда: дизайнер разрабатывает концепцию интерьера, визуализатор делает трехмерку, чертежник выпускает чертежи. Но, особенно в условиях экономического кризиса, работодатели все больше предпочитают универсальных специалистов ради экономии бюджета. Таким образом, джентельменский список программ для дизайнера интерьера будет примерно таким:
- ArchiCAD, AutoCAD — для создания проектной документации;
- 3ds Max, V-Ray — для создания фотореалистичных трехмерных изображений интерьера;
- Adobe Photoshop — подготовка текстур, обработка фотографий;
- Adobe Acrobat Professional — для создания и редактирования альбомов чертежей в формате PDF;
- XnView, Irfan View, ACDSee — любой из просмотрщиков фотографий.
Визуализатор интерьеров и экстерьеров
Упрощенный вариант дизайнера интерьеров. Получается исключением программ для работы с чертежами: визуализатору они могут понадобиться только для конвертации файлов, полученных от заказчика. Заниматься только трехмерной визуализацией не рекомендуется, поскольку гораздо выше спрос на людей, которые могут что-то придумать сами и разбираются в чертежах.
3D анимация и разработка персонажей
Специфика работы предполагает моделинг и текстурирование, создание анимации, обработку видео. Возможный список кандидатов на изучение:
- Maya, 3ds Max, V-Ray — моделирование, анимация, рендер;
- Adobe Photoshop — подготовка текстур, обработка изображений;
- Adobe Premiere, Adobe After Effect — создание и постобработка видеоряда;
- XnView, Irfan View, ACDSee — любой из просмотрщиков фотографий.
Дизайнер-полиграфист
В полиграфической индустрии, как и во многих других сферах деятельности, существует множество специализаций. Не вдаваясь в подробности приведу список необходимых программ:
- Adobe Illustrator, Corel Draw — редакторы векторной графики;
- Adobe InDesign, QuarkXPress — верстка макетов;
- любая программа для просмотра фотографий.
Веб-дизайнер
Создание сайтов предполагает разработку макета, подготовку графики, верстку, загрузку файлов на сервер. Примерный список того, что надо знать:
- Adobe Photoshop — создание макета, обработка изображений;
- Adobe Dreamweaver — верстка страниц;
- Adobe Flash — создание флеш-сайтов и презентаций, анимация;
- любой FTP — клиент для работы с файлами на сервере;
- любая программа для просмотра фотографий.
Конечно, это далеко не все возможные варианты, буду рад, если специалисты в своей области добавят комментарии с дополнениями.
Теперь по поводу сертификатов, которые выдают слушателям курсов. Больших плюсов, если вы собираетесь работать по найму, эти сертификаты вам не дадут. В большинстве случаев, человек, который берет вас на работу смотрит на ваши реальные навыки работы. Это очень хорошо видно по портфолио и по манере работать за компьютером. Если было показано чужое портфолио, то в первые же дни работы станет понятно, что вы не способны это сделать. В случаях, если вы все же считаете, что сертификат очень нужен, проверьте будет ли он от школы или же от компании-производителя программного обеспечения. Например, сертификат Autodesk будет иметь вес по всему миру, а бумажка от школы скорее всего нет.
Сертификат об окончании авторизованных курсов Autodesk
Читайте статьи и уроки на ту же тему:
Программы для дизайнера: советы начинающим: 17 комментариев
просматривал программы 3 ди макс и архикад — все это сложно и нужно учиться работать в них не один месяц. А простых программ для чертежей и дизайна не нашел (чтобы разобраться за пару часов и за 3 — 4 дня слепить что-то удобоваримое для себя).
Одна моя знакомая все чертежи делает в Corel Draw, говорит, что удобно. Недавно делал обзор еще одной сравнительно простой программы Autodesk Homestyler — программа для онлайн-проектирования. Попробуйте.
по работе плотно связан с проектированием и визуализацией. занимаюсь открытиями магазинов. мой коллега все ТЗ готовит в Кореле 🙂 я считаю это кошмаром! но главное результат! 🙂 из простых редакторов есть SketchUp от Google очень простой 3Д редактор с достаточно большими возможностями! даже V-Ray под него есть. Для Эскизной Визуализации или подготовки ТЗ для строителей или проектировщиков ТО ЧТО НАДО 🙂
Согласен, что инструментарий SketchUp подходит для быстрых эскизов, но проблема в том, что он еще не получил широкого распространения среди проектных организаций, поэтому люди работают в других заслуженных программах.
Компас 3Д — в ней можно делать чертежи, 3д модели, спецификации и сборки. к ней также есть библиотеки с различными изделиями по ГОСТам.
С компасом не работал, так понимаю, что это конкурент автокада. Напишите о преимуществах и недостатках, если вы с ним знакомы.
На самом деле все намного проще чем вы думаете!!)) архикарп и автокад достаточно простые программы, главное разобраться и понять базовые инструменты! Если вам для интерьера то тут одной программы не хватит, прочитайте Нойферта для начала, чтоб понимать что вы строите в программе!)))
Большое человеческое спасибо за статью.
В последнее время появилось несметное количество разной литературы о программном обеспечении, не знаешь за что же первое хвататься. А у вас лаконично и просто все изложено 😉 Я работаю веб-дизайнером и пользуюсь Corel Draw и Adobe Photoshop каждый день. Но на освоение подобных программ у меня ушло кучу времени. А вот, неопытным или начинающим юзерам я бы предложила инструменты и из этой статьи: http://templates.motocms.ru/blog/osnovi-dizaina/instrumenty-dlya-nachinayushhix-web-dizajnerov-7-populyarnyx-prilozhenij/ . Полезные вещи!
Для начинающих юзеров, я бы вам рекомендовал поставить ссылки на сайты программ.
А почему автор ничего не сказал про AutoCAD
Сказал — ArchiCAD, AutoCAD в списке для дизайнеров интерьера.
Работал в архикаде, в 3д максе, в автокаде, в последнем только в 2д. Недавно открыл для себя программу
скетчап от гугл. Сформулирую общие критерии выбора основной программы для объемного дизайна (это выстрадано). Качество графики — это не главное!
1. программа должна позволять свободно думать в своей среде и легко вносить на ходу поправки, не чувствуя себя придатком компьютера. Иначе придется отдельно думать на бумаге (или в другой программе) , потом переносить в компьютер и постоянно повторять этот цикл, что не всегда удобно.
2. Между рабочим видом и визуализацией не должно быть большой дистанции ни по времени ни в качестве. Иначе постоянно переключаешься с эскизного вида на визуализацию, чтобы составить цельное представление о проекте.
3. Поменьше понтов и заумных настроек. Задача дизайнера — работа со своим проектом, а не настройка опций.
4 Основной принцип создания и редактирования объемов разработанный авторами определяет все.
Если его идея тупая или гениальная, это способно наложить отпечаток на всю работу в программе и на результат.
Исходя из этого:
В архикаде реализован принцип собирания из деревянного конструктора
где очень много типов фабричных деталек, между собой они сопрягаются только так как задумано разработчиком. (Для чувства свободы приложена еще лучковая пила). Для эффективной работы
нужно проштудировать все параметры сотен объектов, многие из которых все равно без программирования
желаемым способом не меняются (чтобы убедиться в последнем, каждый раз нужно время). Принцип, положенный в основу серьезно ограничивает и требует от дизайнера массы действий определяемых логикой
программы, а не проектирования. Очень многое оказывается невозможно, потому что не было задумано.
Крайне трудно вводить изменения.
При этом приятный вид рабочей среды и симпатичная архитектурная визуализация без излишеств (подходит,конечно не на все случаи жизни).
В 3д максе не деревянный сортамент деталей, а как бы один дутый пластик. Соответственно дикое количество инструментов по его обработке и приведению в божеский вид. Можно вроде все, но пользование программой
походит на пользование ножницами в перочинном ноже — всего слишком много вокруг болтается и мешает. Очень большая дистанция между качеством рабочего вида и визуализации. Понтов просто море!
Общий принцип работы логичнее чем в архикаде, но из-за универсальности и некоторой заумности программы много неудобств.
В автокаде принцип 3д построений задумывался, похоже для избранных инженеров и недостаточно очеловечен, чтобы так взять его и освоить, да еще и с удовольствием. Двухмерное же черчение в основном
очень универсально и удобно для рабочей документации и эскизного проектирования. Программа закрепощает мыслительный процесс не более, чем чертежный кульман, изменения вносятся легко.
Ну и напоследок о программе гугл скетчап. Если одним словом назвать общий принцип «отрехмеривания» программы, то для архикада это будет слово «деревянный», для 3дмакса «заумный», а для скетчапа вспоминается
слово «гениальный». Не до конца разобрался еще в возможностях программы и в организации сложных проектов, но пока убедился, что все основные
построения делаются наглядным рисованием линий в 3д пространстве, которые автоматически превращаются в плоскости, и вытягиванием плоскостей, и вся работа сводится к разнообразному манипулированию 2мя — 3мя инструментами. Настроек минимум, понтов 0, интерфейс аскетичный, как
будто его разработали монахи. Визуализации как таковой нет, рабочая картинка представляет собой вполне качественный эскиз. Абсолютная естественность при внесении изменений. Процесс больше
всего походит на выклеивание макета из бумаги, а как известно — бумага — признанный материал для серьезного архитектурного макетирования. По моему это наиболее удобная программа для выражения своих идей и быстрой их трансформации.
Никита, спасибо за грамотный комментарий! Согласен, что надо бы освоить SketchUp, осталось только найти время).
Программы для веб-дизайнера: где рисовать сайты?
Перед тем, как читать дальше, настоятельно рекомендую убедиться в том, что вы правильно понимаете, что такое “веб-дизайн”. Ведь это не вёрстка и не программирование. И точно не создание сайта под ключ. Поэтому программы Dreamweaver, Muse, Webflow и прочие автоматически отпадают.
Также хочется отметить, что для рисования сайтов НЕ подходят графические программы:
- Illustrator – лучше всего подходит для рисования векторных иллюстраций и последующей продажи на фотобанках;
- InDesign – оптимальный софт для дизайна и вёстки различной полиграфии.
Хорошему веб-дизайнеру, как и художнику, без качественных инструментов труда работать очень сложно. Если пейзажист, к примеру, использует кисти и краски, то создатель эффектных сайтов – специальные программы. Одни модернизируются, другие постепенно уходят в небытие.
Лучшая программа для веб-дизайна: Photoshop (фотошоп)?
На самом деле начинающему веб-дизайнеру для рисования первых простых сайтов «по уши» хватит фотошопа и его возможностей.
Если вы ещё не знакомы с этой программой, то обучение веб-дизайну стоит начать именно с неё.
Также есть множество аналоговов фотошопа. Даже существуют онлайн-версии, где функционал урезан до безобразия, много рекламы и постоянные глюки. Такие сайты подойдут лишь школьникам для редактирования своих фото. Давайте разберём плюсы и минусы использования программы Photoshop для рисования сайтов:
Плюсы:
- Все заказчики и верстальщики привыкли к файлам в формате PSD, поэтому у вас не возникнет сложностей, которые могут возникнуть, если вы будете рисовать сайт в иллюстраторе или CorelDraw.
- Изучить Photoshop не сложно, ведь изначально программа затачивалась под обработку фотографий, поэтому веб-дизайнеру не нужно знать весь её функционал.
- Для программы Photoshop есть много полезных плагинов, скриптов, стилей, шаблонов и прочих “примочек”, которые помогут ускорить процесс разработки дизайна сайта.
Минусы:
- Программа платная. Разумеется вы можете скачать Photoshop с торрентов и быть пиратом, но это уже на вашей совести.
- Программа особо не развивается в сторону веб-дизайна. Вполне возможно, что конкурирующий софт в скором времени просто превзойдёт её по функционалу и удобству.
Sketch – будущее веб-дизайна?
Также набирает популярность программа Sketch. Но эта программа заточена исключительно под дизайн интерфейсов, а это лишь небольшая часть всех заказов на рынке и эти заказы совершенно не для “новичков”. Вы сможете установить её себе на компьютер только если у вас будет операционная система MAC OSx.
Для того, чтобы научиться рисовать удобные сайты, необходимо “переболеть” отрисовкой “гениальных творений” состоящих из миллиона картинок и цветов, неудобных и непонятных никому кроме вас. Через это проходят все начинающие веб-дизайнеры за исключением тех, кто раньше занимался вёрсткой или программированием, т. к. они уже намучались с такими горе-дизайнерами и никогда не сделают подобных шедевров.
Sketch не перестаёт радовать новыми функциями. Сервис развивается буквально на глазах и по праву считается одним из лучших на сегодня помощников для веб-дизайнера. Как минимум радует тот факт, что ресурс вобрал всю логику CSS 3. Продолжая развиваться в этом направлении, он обещает светлое будущее в сфере декоративного оформления веб-страниц. Sketch – создана для тех, кто стремится к совершенному цифровому дизайну.
Инструменты веб-дизайнера, актуальные для 2016-2017 годов.
Pixate
Удобный сервис для визуального прототипирования. Веб-версия позволяет создавать анимацию для мобильных устройств на базе iOS и Android. А настольное приложение для Windows и Mac. В Pixate много разноплановой встроенной анимации и интерактивных жестов. Также есть библиотека скриптов. Для продвинутых дизайнеров, которым мало шаблонных инструментов, предусмотрена возможность создания авторских программ на JavaScript. Сервис постоянно развивается, что сделало его ТОП-овым для западноевропейских и американских веб-дизайнеров. В среде отечественных специалистов он только набирает популярность.
Affinity (for Mac OSx)
По мнению профессиональных веб-дизайнеров, этот редактор вскоре заставит забыть о Photoshop. И не только потому, что его стоимость на порядок ниже популярного аналога. Его функционал объективно превосходит софтверную легенду. Программа работает с CMYK и LAB, поддерживает PSD и обработку RAW. Особенно впечатляет работа с векторной графикой, качественное масштабирование и ещё некоторые “фишки”. Инструмент заточен только под «яблочную» ОС и становится всё более популярным в профессиональной среде.
Avocode
Программа полностью совместима с Photoshop. Позволяет превратить эскиз сайта (в формате psd или sketch) в интерактивную страницу. Незаменима для тех, кто занимается вёрсткой и разработкой мобильных приложений. Используя Avocode с исходниками удастся работать непосредственно через веб-интерфейс или десктоп-приложение.
Antetype
Многофункциональная среда для разработчиков пользовательского интерфейса самого разного формата с учётом правил UX дизайна. Ресурс радует объёмной библиотекой виджетов и гибкой отзывчивостью. А встроенный учебник образцов проектов позволяет быстро приступить к работе даже новичку. Среди плюшек Antetype можно обозначить возможность настроить свойства экрана, стиль, ресурсы, истории.
Современному веб-дизайнеру необходимо смотреть на несколько шагов вперед, чтобы оставаться на плаву и удерживать свою репутацию в быстро изменяющемся IT-пространстве. В 2016 многие веб-дизайнеры начнут переходить на новые и усовершенствованные инструменты для веб-дизайна. О них мы расскажем на бесплатном интенсиве по веб-дизайну.
А вы используете хоть один из этих инструментов в своей работе? Может есть другие альтернативные варианты? Пишите в комментариях!
Перед тем, как читать дальше, настоятельно рекомендую убедиться в том, что вы правильно понимаете, что такое “веб-дизайн”. Ведь это не вёрстка и не программирование. И точно не создание сайта под ключ. Поэтому программы Dreamweaver, Muse, Webflow и прочие автоматически отпадают.
Также хочется отметить, что для рисования сайтов НЕ подходят графические программы:
- Illustrator – лучше всего подходит для рисования векторных иллюстраций и последующей продажи на фотобанках;
- InDesign – оптимальный софт для дизайна и вёстки различной полиграфии.
Хорошему веб-дизайнеру, как и художнику, без качественных инструментов труда работать очень сложно. Если пейзажист, к примеру, использует кисти и краски, то создатель эффектных сайтов – специальные программы. Одни модернизируются, другие постепенно уходят в небытие.
Лучшая программа для веб-дизайна: Photoshop (фотошоп)?
На самом деле начинающему веб-дизайнеру для рисования первых простых сайтов «по уши» хватит фотошопа и его возможностей.
Если вы ещё не знакомы с этой программой, то обучение веб-дизайну стоит начать именно с неё.
Также есть множество аналоговов фотошопа. Даже существуют онлайн-версии, где функционал урезан до безобразия, много рекламы и постоянные глюки. Такие сайты подойдут лишь школьникам для редактирования своих фото. Давайте разберём плюсы и минусы использования программы Photoshop для рисования сайтов:
Плюсы:
- Все заказчики и верстальщики привыкли к файлам в формате PSD, поэтому у вас не возникнет сложностей, которые могут возникнуть, если вы будете рисовать сайт в иллюстраторе или CorelDraw.
- Изучить Photoshop не сложно, ведь изначально программа затачивалась под обработку фотографий, поэтому веб-дизайнеру не нужно знать весь её функционал.
- Для программы Photoshop есть много полезных плагинов, скриптов, стилей, шаблонов и прочих “примочек”, которые помогут ускорить процесс разработки дизайна сайта.
Минусы:
- Программа платная. Разумеется вы можете скачать Photoshop с торрентов и быть пиратом, но это уже на вашей совести.
- Программа особо не развивается в сторону веб-дизайна. Вполне возможно, что конкурирующий софт в скором времени просто превзойдёт её по функционалу и удобству.
Sketch – будущее веб-дизайна?
Также набирает популярность программа Sketch. Но эта программа заточена исключительно под дизайн интерфейсов, а это лишь небольшая часть всех заказов на рынке и эти заказы совершенно не для “новичков”. Вы сможете установить её себе на компьютер только если у вас будет операционная система MAC OSx.
Для того, чтобы научиться рисовать удобные сайты, необходимо “переболеть” отрисовкой “гениальных творений” состоящих из миллиона картинок и цветов, неудобных и непонятных никому кроме вас. Через это проходят все начинающие веб-дизайнеры за исключением тех, кто раньше занимался вёрсткой или программированием, т. к. они уже намучались с такими горе-дизайнерами и никогда не сделают подобных шедевров.
Sketch не перестаёт радовать новыми функциями. Сервис развивается буквально на глазах и по праву считается одним из лучших на сегодня помощников для веб-дизайнера. Как минимум радует тот факт, что ресурс вобрал всю логику CSS 3. Продолжая развиваться в этом направлении, он обещает светлое будущее в сфере декоративного оформления веб-страниц. Sketch – создана для тех, кто стремится к совершенному цифровому дизайну.
Инструменты веб-дизайнера, актуальные для 2016-2017 годов.
Pixate
Удобный сервис для визуального прототипирования. Веб-версия позволяет создавать анимацию для мобильных устройств на базе iOS и Android. А настольное приложение для Windows и Mac. В Pixate много разноплановой встроенной анимации и интерактивных жестов. Также есть библиотека скриптов. Для продвинутых дизайнеров, которым мало шаблонных инструментов, предусмотрена возможность создания авторских программ на JavaScript. Сервис постоянно развивается, что сделало его ТОП-овым для западноевропейских и американских веб-дизайнеров. В среде отечественных специалистов он только набирает популярность.
Affinity (for Mac OSx)
По мнению профессиональных веб-дизайнеров, этот редактор вскоре заставит забыть о Photoshop. И не только потому, что его стоимость на порядок ниже популярного аналога. Его функционал объективно превосходит софтверную легенду. Программа работает с CMYK и LAB, поддерживает PSD и обработку RAW. Особенно впечатляет работа с векторной графикой, качественное масштабирование и ещё некоторые “фишки”. Инструмент заточен только под «яблочную» ОС и становится всё более популярным в профессиональной среде.
Avocode
Программа полностью совместима с Photoshop. Позволяет превратить эскиз сайта (в формате psd или sketch) в интерактивную страницу. Незаменима для тех, кто занимается вёрсткой и разработкой мобильных приложений. Используя Avocode с исходниками удастся работать непосредственно через веб-интерфейс или десктоп-приложение.
Antetype
Многофункциональная среда для разработчиков пользовательского интерфейса самого разного формата с учётом правил UX дизайна. Ресурс радует объёмной библиотекой виджетов и гибкой отзывчивостью. А встроенный учебник образцов проектов позволяет быстро приступить к работе даже новичку. Среди плюшек Antetype можно обозначить возможность настроить свойства экрана, стиль, ресурсы, истории.
Современному веб-дизайнеру необходимо смотреть на несколько шагов вперед, чтобы оставаться на плаву и удерживать свою репутацию в быстро изменяющемся IT-пространстве. В 2016 многие веб-дизайнеры начнут переходить на новые и усовершенствованные инструменты для веб-дизайна. О них мы расскажем на бесплатном интенсиве по веб-дизайну.
А вы используете хоть один из этих инструментов в своей работе? Может есть другие альтернативные варианты? Пишите в комментариях!
Обзор инструментов и приложений для веб-дизайна: базовые программы, работа с цветом и другими элементами
С каждым днем появляется все больше программ и приложений для создания дизайна сайтов. В этой статье мы расскажем про базовые инструменты, которые может использовать дизайнер в своей работе, расскажем об основных преимуществах и недостатках программ и покажем, как выбрать инструмент для лучшей работы.
Базовые программы
Обычно дизайн сайтов делается в специализированных программах (если дизайнер не пользуется конструктором сайтов). Рассмотрим основные приложения для дизайна, которые популярны у веб-дизайнеров.
Семейство Adobe
Несмотря на растущую популярность, более легких для освоения программ, продукты Adobe до сих пор занимают лидирующую позицию на рынке.
Adobe Photoshop – базовое приложение, которое предназначено как для обработки изображений, так и для создания дизайна в целом. Так как Photoshop до сих пор является самым популярным продуктом среди дизайнеров, верстальщиков и разработчиков (в основном от дизайнеров требуется предоставить макет в формате .psd), владение этим инструментом важно для полноценной работы над проектом.
Из недостатков программы выделяют следующие:
- Сложность в освоении. Photoshop имеет достаточно сложный интерфейс со специальными инструментами, поэтому дизайнеру нужно потратить достаточно большое количество времени на обучение.
- Не предназначен для проектирования интерфейсов напрямую. Несмотря на универсальность программы, многие функции для создания дизайна достаточно трудоемки, в отличие от более современных аналогов.
- Программа платная. Дизайнерам придется платить разработчикам приложения один раз в год.
Adobe Experience Design (Adobe XD) – относительно новая программа линейки Adobe, специально предназначенная для проектирования интерфейсов. Приложение поддерживает векторную графику и верстку, есть возможность работать с сетками, стандартными блоками и типографикой.
Кроме Adobe Photoshop и Adobe XD у компании есть еще несколько продуктов, которые используются дизайнерами:
- Adobe Illustrator – программа для создания векторных изображений, например, логотипов, иллюстраций и так далее.
- Adobe After Effects – приложение для создания анимации. В основном используется для демонстрации дизайна или разработки анимированных элементов.
- Adobe InDesign – приложение, которое используется для верстки как полиграфии, так и интернет страниц.
Продукты Adobe – популярные инструменты для веб-дизайнеров, которые используются разработчиками по всему миру. Несмотря на довольно большую стоимость программ и сложность интерфейса, дизайнеры с успехом пользуются приложениями и создают дизайны сайтов различной сложности.
Sketch
Sketch – относительно новый графический редактор, который постепенно вытесняет Photoshop с рынка веб-дизайна. Так как Sketch был разработан специально для проектирования интерфейсов, он также достаточно популярен у веб-дизайнеров. С помощью программы можно относительно быстро создать макет современного сайта, не прибегая к сложной обработке изображений.
В основном Sketch рассчитан на создание сайтов блочной структуры – в программе можно создавать блоки, кнопки, формы и прочее одним движением мыши. Есть возможности для глубокой работы с типографикой, модульными сетками. Главный недостаток программы – ограниченная совместимость с ОС. Sketch разработан специально для Mac OS и не имеет аналога для Windows.
Figma
Еще одна программа на рынке, которая является главным конкурентом Sketch – графический редактор Figma. Данное приложение работает как на Windows, так и на Mac OS, поэтому быстро стало популярным среди веб-дизайнеров. Одно из главных преимуществ программы – возможность работать напрямую через браузер и сохранять результаты своей работы в облаке.
Figma также предназначена для проектирования интерфейсов. В программе есть возможность настраивать модульные сетки, создавать простые и сложные элементы, работать со шрифтами и прочее.
Это три основные программы, которые используются дизайнерами при создании макетов. Выбирая приложение для работы, нужно учитывать следующие нюансы:
- специфика дизайна. В основном современные сайты имеют блочную структуру, которую удобнее реализовывать с помощью простых элементов. В таком случае Sketch и Figma подходит большинству дизайнеров. Однако если макет включает в себя сложную обработку изображений, без Photoshop не обойтись;
- технические возможности разработчиков. Часто верстальщики работают с форматом .psd и не используют другие программы кроме линейки Adobe. В этом случае дизайнерам приходится подстраиваться под других специалистов и выбирать нужное приложение, исходя из возможностей разработчиков;
- удобство пользования. Сложность интерфейса – одна из особенностей работы с линейкой продуктов Adobe. Так как инструменты не предназначены напрямую для проектирования интерфейсов, у дизайнеров возникают сложности при создании макетов, в отличие от специализированных программ Sketch или Figma.
Также нужно упомянуть и конструкторы сайтов. Некоторые разработчики не хотят тратить много сил и времени на создание уникальных ресурсов и прибегают к специальным конструкторам, которые позволяют сделать сайт на основе уже существующего шаблона. Такие приложения популярны среди небольших компаний, у которых нет бюджета и сформированного бренда. О том, что лучше выбрать – конструктор сайтов или уникальный дизайн, мы рассказывали в этой статье.
Графика
Каждый дизайнер при создании макетов использует не только стандартные блоки и типографику, но и различную графику: иллюстрации, фотографии, иконки и другие изображения. Есть несколько способов создать графику для дизайна и один из них – купить или скачать бесплатно изображения со специализированных ресурсов. Рассмотрим некоторые из них.
Платные стоки
Shutterstock и depositphotos – самые популярные стоковые ресурсы на сегодняшний день. Изображения на данных стоках качественные, редко встречаются на других сайтах, поэтому дизайнер сможет создать уникальный макет на основе стоковых изображений. Однако, данные ресурсы платные – необходимо оформить подписку.
Преимущества таких ресурсов – наличие лицензированных и качественных изображений для дизайна. На бесплатных стоках, как правило, качество картинок хуже, также их часто используют на других сайтах. Мы проводили эксперимент в нашем блоге и анализировали, как используют картинку со стока в дизайне различных сайтов. Результаты эксперимента можно посмотреть в этой статье.
Бесплатные стоки
Однако, бесплатные стоки – отличный инструмент для тех, у кого нет большого бюджета на дизайн и нет специальных требований к макету.
1. Pixabay
Сервис Pixabay – сайт, на котором представлены бесплатные изображения достаточно хорошего качества.
На сайте представлено более 1 миллиона изображений, которые можно использовать в дизайне без указания авторства. Есть как векторная, так и растровая графика.
2. Unsplash
Бесплатный ресурс с атмосферными фотографиями, которые также можно использовать бесплатно.
Картинки разбиты по категориям, можно создавать собственные коллекции и загружать фотографии самостоятельно.
3. Freepik
Ресурс с множеством векторных изображений. В основном на сервисе представлены различные иконки, иллюстрации, есть шаблоны для логотипов.
Чтобы использовать бесплатные изображения и при этом создать уникальный и интересный сайт, нужно учитывать следующее:
- лучше не использовать изображения в первоначальном виде. Например, изменить тон и насыщенность картинки с помощью фильтров, взять только часть изображения и так далее;
- следить за качеством изображения. На бесплатных стоках можно найти как качественные картинки с гармоничной композицией и хорошим разрешением, так и непрофессиональные фото с размытым фокусом;
- находить интересные сюжеты. Часто на стоках можно встретить изображения неестественно улыбающихся людей, картинки с рукопожатиями и прочие фотографии, которые настолько часто встречаются, что вызывают у пользователей отторжение. Лучше искать интересные и необычные картинки, которые могут запомниться посетителям сайта и гармонично дополнят макет.
Конечно, самый лучший вариант для дизайнера – нанять профессионального фотографа и сделать уникальные снимки для дизайна сайта. Однако, если такой возможности нет, можно воспользоваться альтернативой в виде стоковых фото.
Работа с цветом
Работа с составляющими дизайна также важна для создания стильного и удобного для пользования макета. Есть некоторые инструменты, которые помогают дизайнерам подобрать правильные цвета, типографику или эффекты для макета. Рассмотрим некоторые из них.
Иногда дизайнеры подбирают оттенки интуитивно, но в большинстве случаев пользуются различными сервисами, которые помогают найти нужные сочетания. Например, сервис Adobe Color, который позволяет выбрать оттенки из цветового круга с помощью различных цветовых схем:
Кроме того, в данном сервисе есть интересная функция – извлечение цветов из изображения. Например, дизайнер может взять любую фотографию или иллюстрацию и посмотреть, какие цвета используются на картинке. Кроме того, некоторые дизайнеры вдохновляются произведениями искусства и берут цветовые сочетания из полотен известных художников:
Больше о произведениях искусства в веб-дизайне можно прочитать здесь.
Еще один интересный подход – брать удачные цветовые сочетания из уже существующих работ. Например, сервис Dribble предоставляет возможность выбрать определенный цвет и посмотреть, как он сочетается с другими цветовыми оттенками:
Типографика, анимация и 3D
Что касается типографики, есть сервисы, которые помогают дизайнерам подобрать шрифтовые пары или, например, определить шрифт на изображении. Так работает один из самых известных сервисов, посвященных шрифтам WhatTheFont:
Дизайнер может загрузить изображение с надписью и сервис определит используемый на нем шрифт, если он есть в базе.
Также дизайнерам важно уметь создавать макеты, где присутствуют анимационные элементы – движение всегда привлекает внимание пользователя, поэтому анимация является одним из инструментов повышения конверсии сайта. Мы уже говорили про программу Adobe After Effects, которая часто используется разработчиками для презентации и создания анимационных элементов.
Однако если дизайнер не пользуется сложными приложениями, есть другой выход – найти анимационные элементы на различных сервисах и показать их разработчикам. Так фронт-эндеры будут знать, что именно имел в виду дизайнер и смогут воплотить его идеи в жизнь. Один из таких сервисов – CodePen, где представлены различные анимации уже с открытым кодом:
Такой подход позволит достигнуть взаимопонимания между специалистами и облегчит задачу разработчикам.
Некоторые веб-дизайнеры занимаются не только проектированием интерфейсов и рекламной графикой с помощью 3D моделирования. Есть довольно сложные для освоения программы, которые позволяют создавать различные 3D модели и использовать изображения в веб-дизайне. Одни из самых популярных программ 3D моделирования – AutoDesk 3Ds Max и Cinema4D.
Владение программами 3D моделирования является дополнительной компетенцией для веб-дизайнеров, однако иногда данный навык бывает полезным при создании эффектной рекламной графики, экстерьеров и интерьеров зданий, а также 3D типографики (подробнее об этом элементе дизайна можно прочитать в этой статье).
Студия IDBI использует множество различных инструментов для создания дизайна сайтов. Мы можем разрабатывать как сложные интерфейсы с глобальной обработкой изображений и созданием новых, так и легкие сайты с минималистичным дизайном. В работе мы используем и традиционную линейку Adobe, и более современные продукты. Наши работы можно посмотреть в разделе «Портфолио».
Источники:
http://kleontev.ru/repetitor/designer-advices/
http://geekbrains.ru/posts/top_programms_for_design
http://idbi.ru/blogs/blog/instrumenty-i-prilozheniya-dlya-veb-dizayna