Обучение веб-дизайну с нуля — пошаговое руководство для начинающих (десять этапов). Программы для веб-дизайнера

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

Вообще использование программ для веб дизайна позволят не только «хорошо сделать свою работу», но зачастую это хорошая возможность сэкономить немного времени, автоматизировать и упростить какие-то процессы. Радует, что в последнее время подобных решений и программ для дизайнеров появляется все больше — обо всех новинках и старом проверенном софте я и буду рассказывать.

Когда возникает необходимость правки/улучшения фотографий, то далеко не каждый пользователь сможет решить задачу с помощью профессионального софта по типу 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. Данная статья будет своего рода логическим продолжением подборки…

Для выполнения базовых задач по редактированию фотографий, например, ретуширования, улучшения резкости и цветопередачи нет смысла использовать громоздкий софт по типу Photoshop. Эффективнее в таких случаях работают более узкоспециализированные продукты. Они, как правило, не содержат лишних функций, требуют меньше ресурсов, а также обладают максимально простым интерфейсом. Сегодня на примере одного из подобных решений мы наглядно вам это продемонстрируем. Речь пойдет о фоторедакторе Movavi Photo Editor. Новичкам…

Ранее на сайте мы рассматривали сторонние сервисы создания гиф анимации, однако большинство из них запросто может заменить обычный Фотошоп. Анимированные GIF файлы с его помощью делаются достаточно легко и быстро. Они, как правило, состоят из нескольких изображений (кадров), которые при пошаговой смене и образуют финальный результат. Сегодня постараемся максимально детально рассмотреть данный вопрос от А до Я: импорт картинок в гифку; настройки GIF анимации в…

Вместе с WEB движущимся семимильными шагами (адаптивным дизайном, CSS препроцессорами, постпроцессорами и другими вещами) может оказаться проблемой попытка не отставать от чего-то нового и полезного.
Ниже Вы найдете 14 инструментов, 7 для веб-дизайнеров и 7 для веб-разработчиков, которые помогут веб-сайту перерасти из концепции в действительность.

Для веб-дизайнеров

1. Adobe Creative Cloud

Разумеется, что Photoshop и Illustrator являются двумя важными инструментами для любого веб-дизайнера. Вместе с Creative Cloud у вас будет доступ к обоим из них, и плюс к некоторым другим инструментам, таких как: Typekit, InDesign и Kuler. Все инструменты Creative Cloud очень хорошо взаимодействуют друг с другом, и должны иметься у любого дизайнера.

2. UI Faces

Поскольку поиск нужных картинок для макета может быть трудоемок, UI Faces собирает аватары через Twitter и делает их доступными для использования в вашем дизайне.

3. 0to255

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

4. Google Fonts

Типографика в WEB проделала длинный путь со дней Arial, Courier и Georgia. Google Fonts это огромная библиотека свободных, готовых шрифтов которые могут быть загружены на стадии макета.

5. Samuel L. Ipsum

Поклонникам фильма "Змеиный полёт ", я представляю «Samuel L. Ipsum» (Сэмюель Л. Ipsum). Это Lorem Ipsum генератор цитат. Имейте в виду, существует три варианта на выбор: цитаты ненормативной лексики ладена из фильмов Джексона, чистые цитаты из фильмов Джексона и обычные ol’ lorem ipsum.

6. Responsive Sketch Pad

Шаблоны пользовательского интерфейса Responsive Sketch Pad ваш хороший спутник, когда вы находитесь на этапе предварительного планирования. Точечная сетка упрощает придерживание линий и визуализиацию сайта в браузере и на мобильном устройстве.

7. Macaw

Этот инструмент еще не выпущен, но он уже выглядит довольно интересным предложение. Macaw обещает ту же гибкость, что и редактор изображений, но при этом будет происходить написание семантического HTML и лаконичного CSS.

Для веб-разработчиков

1. Coda 2

Это мой любимый из-за его «все-в-одном» редактор кода, FTP клиент и встроенный MySQL редактор. Coda 2 также включает в себя справочную библиотеку по программированию и визуальный CSS-редактор.

2. CSS Pre-processor

В зависимости от того, что вы разрабатываете, здесь вам поможет руководство. SASS требует, чтобы работал Ruby (встроен в любой Mac) и и на базовом уровне делает тоже что и LESS , другой препроцессор. Оба являются отличными инструментами и предлагают экономящие время функции, такие как вложенные правила, смешивания, переменные и логику.

3. Front-end Framework

Снова, есть два отличных предложения которые рассмотрим. Вместе Twitter Bootstrap и Zurb’s Foundation поможет сделать прототипирование и разработку для современного WEB быстрее и проще. Оба пакета это адаптивная сеточная система с элементами стилей и javascript по умолчанию, для реализации богатого WEB.

4. Browserstack

Это фаворит из всего набора. Browserstack позволяет вам тестировать завершенный дизайн в любом браузере и на любой конфигурации, о которой вы могли только подумать. Это удобный инструмент, если вы все еще должны поддерживать IE7 и IE8 в ваших проектах.

5. Pingdom

Раскройте DNS и проблемы загрузки с Pingdom. Вы увидите, сколько времени забирает загрузка различных ресурсов на вашем сайте вместе с общим показателем производительности.

6. Chrome Developer Tools

Если вы используете один из инструментом входящим в Chrome Developer Toolkit , то пусть это будет называться веб-инспектор. Вместе с инспектором вы сможете быстро диагностировать проблемы и внести изменения в разметку. Вы также можете эффективно использовать консоль для логирования и взаимодействия с JavaScript.

7. MAMP Pro

С легкостью крутите сайты локально. MAMP Pro позволяет легко установить и администрировать Apache, MySQL и среду разработки PHP. Если вы работаете над большим количество сайтов для клиентов, вам необходимо иметь такой сервер.

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

Как говорят разные маститые дизайнеры, «мозг и руки - это главные наши инструменты». И все же, они немного лукавят. Разве можно создать дизайн веб-сайта, не пользуясь никакими программами и инструментами? Конечно, мозг - это мощный биокомпьютер, который позволяет за считанные секунды нарисовать сложную картинку и идеальный сайт, но, увы, только лишь в своем воображении.

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

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

Что такое растровая и векторная графика?

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

Главным достоинством растровой графики является возможность создавать любой по сложности рисунок, применяя при этом любое количество всевозможных полутонов, плагинов и фильтров. Растровый формат GIF позволяет достаточно легко создать анимацию.

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

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

Чтобы понять, к какому типу графики относится то или иное изображение, обратите внимание на его расширение:

растровая графика - JPEG, BMP, PICT, GIF, TIFF, PSD, JPG, PNG, PCX;

векторная графика - EPS, PSD, CMX, CDR, SVG.

Выбор графического редактора

Растровые редакторы (Adobe Photoshop, Corel-Paint, Irfan View, GIMP, Krita и др.) представляют графику в пикселах, количество которых по ширине и высоте задается при создании изображения. Увеличение размеров уже созданных растровых изображений нежелательно - это может привести к искажениям и неровностям графики;

векторные редакторы (Xara, Corel DRAW, Adobe Illustrator, Sketch и др.) предусматривают создание линий и фигур по определенным математическим алгоритмам, благодаря чему векторные изображения можно сколько угодно масштабировать без потери качества и идеальной четкости контуров. Векторные программы для веб-дизайна рекомендуется применять для создания логотипов, эмблем и т. п.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Adobe прочно удерживает свои позиции

Наиболее популярным графическим редактором для работы с растровой графикой уже многие годы является Adobe Photoshop. Изначально, это приложение разрабатывалось для обработки и ретуши фотографий, но потом он вышел за уготовленные ему рамки и стал удобным инструментом для работы с web-графикой.

Не все знают, но в Photoshop можно работать и с векторной графикой, например, создавать векторные объекты или добавлять их из других программ, например, Adobe Illustrator. Последний редактор является все же более предпочтительным для работы с векторами. В нем вы можете создавать любые изображения для веб-сайта, мобильных устройств, видео, печати, анимации и т. д. Интерфейс Adobe Photoshop:

Sketch - программа будущего?

Это векторная программа для веб-дизайна, заточенная исключительно под дизайн интерфейсов в операционной системе MAC OS. Эту прогу рекомендуется использовать уже «видавшим виды» дизайнерам по двум причинам:

если вы новичок в веб-дизайне, то для начала вам стоит научиться делать обычные, растровые творения, состоящие из множества картинок и цветов, а потом уже переходить к серьезной векторной графике;

стоимость самых дешевых вариантов Apple (на которые ставится MAC OS), начинается от 60 000 руб. Сама программа Sketch стоит $99,99. Будучи новичком, вряд ли вы получите какие-то выгоды от таких инвестиций

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

для отрисовки контента Sketch не использует собственные ресурсы - эта задача возложена на встроенные функции MAC OS X: Core Animation, Quartz Extreme, QuickTime, ColorSync, Core Image, OpenGL. Благодаря этому, самая навороченная версия проги занимает всего 42 Мб памяти (поклонники увесистого Фотошопа, не падайте в обморок);

файлы можно экспортировать в любые форматы, от PNG до SVG;

в одном документе можно отрисовать десятки экранов приложений, без ущерба производительности;

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

Интерфейс Sketch:

В заключение

Для того чтобы разобраться в существующем многообразии приложений и веб-программ для веб-дизайна, совсем не обязательно посещать какие-то специальные курсы. В сети имеется немало видеороликов и комплексных видеоуроков, которые «расшифруют» каждый инструмент и детально объяснят каждое действие в графическом редакторе. Это позволит вам в дальнейшем максимально широко применять свои знания и умения на практике.

Для начала вам будет «по уши» хватать инструментария Photoshop, однако, в ближайшие несколько лет, у этого монополиста могут появиться серьезные конкуренты, например, программа веб-дизайна Sketch. Поэтому не стоит жестко связывать себя многолетними привычками с определенными инструментами. Рассматривайте альтернативные варианты, все время учитесь чему-то новому, осваивайте новые приложения.

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Представляем вам подборку бесплатных сервисов для дизайнера. Это первый вариант, в дальнейшем планируем расширять, добавляя новые разделы и инструменты.

Шрифты

• Google Fonts – всеми любимая библиотека шрифтов. Позволяет подобрать и скачать разные шрифты на все случаи жизни.
• 1001 Free Fonts - библиотека шрифтов. Имеет удобную навигацию – шрифты отсортированы как по алфавиту, так и по типам. Имеется раздел русских шрифтов.
• Fontstruct – онлайн конструктор шрифтов. Очень простой инструмент, позволит создать собственный шрифт. Рисовать можно не только стандартными квадратами, но и другими фигурами – точки, закругленные углы и пр. Для начинающего идеальный инструмент, чтобы попробовать и увидеть типографику в действии.
• Font Squirrel – одна из самых больших библиотек шрифтов. Кроме этого можно загрузить рисунок и получить названия шрифтов, используемых на нем. Есть магазин шрифтов, и даже магазин одежды с логотипами.
• Type light – полнофункциональный редактор шрифтов. Позволяет создавать, редактировать и конвертировать шрифты OpenType, TrueType и PostScript. Необходимо скачивать и устанавливать. Бесплатная версия имеет ограниченный функцуонал по сравнению с бесплатной. Но для создания простого шрифта хватает.
• What Font is – онлайн сервис для подбора шрифтов сайта. Загружаем файл шрифтов, указываем url сайта и выидим как загруженный шрифт будет выглядеть на сайте. Удобнцый сервис.
• 1001 Fonts – библиотека шрифтов (более 15000). Удобная навигация – шрифт можно выбрать по размеру, типу, теме, дизайну и т.д. Меню позволяет настроить вывод, что дает возможность увидеть каждый шрифт в разных опциях: размер, начертание и т.д.
• Font Flame – онлайн сервис подбора пары сочетаемых шрифтов. Действует очень просто – на главной странице предложен листок с двумя надписями, сделанными разными шрифтами. Понравилось – жмите «Love», нет – «Hate». Потом выбранные можно просмотреть еще раз. Клик по названию шрифта открывает Google Fonts.
• Typecast – выбор шрифта для прототипа. Можно просмотреть как шрифт будет выглядеть на любых устройствах. Необходимо обозначить разные типы текста – заголовки, кавычки и т.д. Можно выбрать гарнитуру, размер, начертание, установить отступы. Вы увидите вашу будущую страницу в тех шрифтах, которые установили. Большой плюс – выбор макета (одна колонка или несколько, разные расположения блоков).
• Wordmark - позволяет подобрать шрифт, установленный на компьютере пользователя, для текста, логотипа или заголовка. При вводе текста в поле показывает его различными шрифтами. Можно выбрать размер, регистр, отображение черно-белое или наоборот. Понравившиеся варианты публикуются в триттере или на фейсбуке – по выбору пользователя. Можно отправить на email.

Стоки фотографий

• Unsplash – постоянно пополняемый сток фото. Коллекции разделены на темы. Можно найти все что угодно, от «Афроамериканцы» до «Природа». Каждая фотография имеет свою оценку, можно посмотреть лучшие или новинки.
• FoodiesFeed – фото еды. Изображения разбиты по категориям. Можно выбрать лучшие, эксклюзивные, иконки, мокапы и пр.
• Free Refe Photos - огромный список изображений «Real life». Главным образом пейзаж и фотографии природы. Неудобная навигация, все фото на главной странице, появляются при скроллинге.
• Little Visuals – качественные фото ландшафтов и зданий. Можно скачать архивом лучшие фото, выложенные за неделю. Фотографии обозначены хештегами, но не разбиты по категориям.
• Gratisography – огромная библиотека бесплатных фото. Все фото разбиты на шесть тем: люди, гримасы, города, предметы, природа и животные. Можно искать по словам.
• Death to the Stock Photo – сток фотографий. Просто посмотреть и выбрать нельзя. Они делают подборку за месяц и дают ее скачать после ввода email. Архив весит около 11 Мб. На почту присылают лучшие фото и ссылку на скачивание.
• Superfamous – большая коллекция фото с необычного ракурса. Набор небольшой, но интересный.
• The Pattern Library – шаблоны и текстуры. Набор достаточно велик, шаблоны необычны. Сменяются прокруткой, причем постепенно. Можно увидеть как шаблон будет выглядеть на весь экран или на его часть.
• New Old Stock – винтажные фото из архивов. Бесплатных фото немного, но регулярно появляются новые.
• Pexels – большое количество фото на все случаи жизни. Разбиты по темам, очень удобно искать.
• Jay Mantri - большой набор фотографий. Классификации как таковой нет, можно посмотреть по месяцам.

Стоки графики

• Brusheezy – бесплатные кисти, шаблоны, текстуры и прочее для фотошопа. 12 категорий, в каждой из которых подкатегории. Выбор огромен.
• Iconfinder – иконки, как платные, так и бесплатные. Скачать можно в форматах ICO, PNG, ICNS, SVG.
• Brushez – большая коллекция кистей для фотошоп. Кроме них еще векторные примитивы, формы, шаблоны, стили. Каждый раздел разбит на подразделы. Например, для кистей более 20 категорий.
• Vecteezy – бибилотека векторной графики, включая изображения и иллюстрации. Большое количество категорий и огромное – графики.
• Iconbird - русскоязычный сервис по поиску иконок. Можно ввести тему и получить набор иконок, а можно просматривать по категориям.
• Icons8 - русскоязычный сервис, предлагающий более 42000 иконок по разным тематикам.

Инфографика

• Vizualize – онлайн сервис для создания инфографики «О себе». По сути, создает графическое резюме.
• Canva – простой инструмент для создания любого дизайна. Позволяет оформить презентацию, плакат, запись в соцсетях, книги, письма, материалы и многое другое. Все делается на основании шаблонов, меняется текст. Но шаблонов очень много, есть из чего выбрать.
• Easelly – создание инфографики на основании шаблонов. Встроенный онлайн редактор позволяет менять оформление, размещать дополнительные жлементы, менять текст.
• Infogram – онлайн сервис для создания инфографики и интерактивных диаграмм. Не все функции доступны, придется покупать аккаунт.
• Visage – простой инструмент для создания любого визуального контента (диаграммы, инфографика, изображения для блога и пр.). Множество шаблонов, простой редактор. Некоторые функции платные.
• Gliffy – онлайн сервис для создания диаграмм. Редактор действует по принципу Microsoft Visio.
• Visme – онлайн инструмент для создания презентаций и инфографики. Более 1000 шаблонов. Редактор позволяет добавлять текст (заголовки, списки, кавычки и обычный), анимированный текст и виджеты. В бесплатном аккаунте можно скачать как JPG файл.
• Piktochart – создание высококачественной графики – презентации, инфографика или печатный материал. Выгружается PNG, JPG разных размеров.
• Drawio – удобный онлайн сервис для создания диаграмм. Можно сохранять в dropbox и подобные сервисы, можно на диск.
• Venngage – простое создание инфографики, плакатов, отчетов, материалов для соцсетей и пр. В бесплатной версии дает только ссылку на публикацию. За скачивание надо платить.
• Cacoo -онлайн сервис для рисования диаграмм и карты сайта. Пожалуй, самый лучших по возможностям. Большое количество инструментов и шаблонов. Экспортировать можно в PNG, PDF, SVG, PPT и др.
• Creately – онлайн сервис рисования диаграмм. Доступны только для публикации. Скачивание платное.
• Lucidchart - онлайн сервис создания диаграмм и чертежей. Есть возможность импортировать диаграмму Microsoft Visio. Экспортируется в PDF, PNG и JPG. Имеется платный функционал.

Цвета

• Color Hunt – подбор сочетаний цвета. Можно подбирать до четырех цветов. Есть готовые решения для выбора.
• TinEye – анализирует сайт и выводит список ресурсов, на которых используется картинка с сайта.
• ColorZilla – позволяет создавать цвета и градиенты. Выводит css свойства для них.
• Adobe Color CC – создание цветовых схем.
• Colicious – нажимайте на пробел и генерируйте новый цвет.
• Colorscheme - подбор цветовых схем. Есть версия на английском и на русском. Позволяет подобрать цвета к сайту. Имеет тонкую настройку, показывает код цвета. В конечном итоге позволяет просмотреть страницу в выбранной цветовой гамме. Самый большой плюс – просмотр гаммы с точки зрения отклонения цветовосприятия. Также позволяет выбрать разные цветовые модели. Сохраняет в палитру Gimp, CSS,PNG и т.д. Имеет конвертер цветов для перевода из одной цветовой модели в другую.
• Paletton – инструмент для создания комбинаций цветов. Ничем не отличается от Colorscheme.
• Pictaculous – анализирует палитру изображения PNG, JPG или GIF. Загружайте изображение и получите набор всех цветов, которые в нем присутствуют.
• Hex Color Tool – инструмент выбора цвета. Ползунками настраивается цвет, можно выбрать яркость. Затем выбранный цвет сохраняется. Можно подобрать палитру.
• (Un)clrd – плагин для браузера, который удаляет все цвета и оставляет сайт в черно-белом цвете.
• BrandColors - самая большая коллекция официальных фирменных цветовых кодов. Выбираете название бренда и скачиваете названия его цветов, в том числе и в css- файл.
• Colortyper - подбор цветов с необычного ракурса. На экране показываются разноцветные символы, которые пересекаются. Результат пересечения – новый цвет. Выглядит интересно.

Вдохновение

• Dribbble - Самое многочисленное сообщество дизайнеров. Работы, сообщества, общение – здесь можно найти все что угодно.
• Freebbble – шаблоны и дизайны из Dribbble. Что-то можно скачать бесплатно, что-то купить. Можно найти шаблоны для CMS, конструкторов, иконки, мокапы, сверстанные шаблоны сайтов и многое другое.
• Muzli - Ежедневное вдохновение дизайна. Ресурс для дизайнеров с примерами самых необычных работ.
• Awwwards – лучшие разработки дизайнеров. Организован как сообщество, где можно проголосовать сайт. Выбираются сайт дня, месяца, года и пр. Большое количество дизайна, видео, разработок.
• Design You Trust - сообщество дизайнеров, совместно использующее последние тенденции, новости, портфолио, дизайны и творческие объявления.
• Really Good Emails - огромная коллекция хорошо разработанных электронных писем. Выбираете шаблон и получаете его код html, css и js. Можно менять текст, рисунки и пр.
• Fubiz – публикации из области дизайна и креатива. Можно найти фотографии, дизайн, графику, видео и др. Все разбито по категориям.
• Designspiration – коллекция дизайнов в стиле Pinterest. Огромное количество идей и примеров – типографика, логотипы, письма и многое другое.
• Behance – коллекция портфолио от профессионалов. Можно оставить вакансию или резюме.
• Mobile-patterns – библиотека скриншотов iOS и Android. Все разбито по разделам. Можно найти много идей.
• One Page Love – галерея лучших дизайнов web-страниц. Можно купить шаблоны и темы. Есть и бесплатные.
• Uispace - ресурс для дизайнеров. Можно бесплатно скачать psd, sketch, шрифты, мокапы и пр.

Графические редакторы

• DAZ 3D - 3D моделирование. Регистрируетесь и скачиваете дескопное приложение.
• Gimp – бесплатный аналог фотошопа. Позволяет настроить модульную сетку, создать направляющие, работать со слоями, добавлять эффекты и пр. Является неплохой бесплатной заменой фотошопу. Является расширяемым - можно скачать дополнительные плагины.
• Blender - 3D моделирование, анимация, рендеринг, звук, видео. Позволяет создавать игры. Быстро развивающийся редактор, очень популярен.
• Aviary – онлайн сервис редактирования фотографий. Много возможностей, в том числе «Эффект красных глаз», изменение размера и пр.
• Pixlr – онлайн редактор фотографий и редактор графики отдельно. Последний похож на фотошоп. Сохраняет на диск.
• BeFunky – онлайн сервис редактирования фотографий. Эффекты, рамки, графика, ретушь и многое другое. Есть русскоязычный интерфейс.
• Inkscape – полноценный редактор векторной графики с открытым исходным кодом. Поддерживает возможности формата SVG - работу с фигурами, контурами, текстом, векторизацией растровой графики и др. Кроме обработки векторных изображений, позволяет создать шаблон сайта и нарезать его – модульная сетка присутствует. Дает возможность рисовать фоны, баннеры, векторные логотипы и др.
• IconEdit2 – очень простая программа для рисования иконок. Имеет фильтры. Позволяет экспортировать изображение для Android и Apple. Можно настраивать глубину цвета, поворачивать и корректировать иконку. Поддерживает полупрозрачность, несколько изображений в один файл ICO и сглаживание во всех инструментах рисования.
• Falco GIF Animator - программа для создания покадровой анимации и анимированных иконок. На ресурсе можно скачать много разных программ.
• Krita – профессиональный десктопный редактор с открытым исходным кодом. Доступен для разных ОС.
• Boxy-SVG - редактор векторной графики, подобный Adobe Illustrator, Sketch и Inkscape.
• Photopos - многофункциональная программа, с функциями редактора фотографий, графического редактора и приложения для создания компьютерной графики.
• 5Dfly - бесплатное приложение пакетной обработки фотографий. Умеет создавать слайд-шоу под PowerPoint. Отдельно можно скачать конвертер в PDF.
• PaintStar - бесплатный редактор изображений. Интерфейс очень похож на Paint, но возможностей больше. Слои, например.
• PhotoScape – простой редактор фотографий. Имеет функции настройки яркости и цвета, баланс белого, коррекция подсветки, рамки, воздушные шары, мозаичный режим, добавление текста, рисование изображений, обрезка, фильтры, удаление эффекта красных глаз, расцветка, кисть, клон-марка, кисть эффекта и пр.

Если рассматривать программы для веб-дизайнера как некий базовый пакет основных технологических приёмов и возможностей, первое, что вспомнится даже далёкому от этой профессии человеку - это продукция компании 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 кодами, имеющий массу расширений и регулярно обновляющий свои возможности.

• 

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

•