Программное обеспечение для web дизайна. Программы для веб-дизайнера. Серверная платформа и программная среда

Приветствую вас у себя в блоге. Сегодня я решил подготовить полезную подборку для дизайнеров. Я посетил самые популярные сайты для веб-мастеров и нашел 50 лучших инструментов, которые помогут в создании дизайна.

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

Я немного дополнил этот список от себя и разбил на категории. Теперь представляю его вашему вниманию.

Базовые программы

Конечно, ни один веб-разработчик пока не может обойтись без стандартного набора от Adobe, через который и ведутся все работы. Сейчас конец 2016 и многие профессионалы утверждают, что набирающая популярность программа Sketch , вот уже несколько лет вытесняющая привычный для многих Photoshop, вот-вот уже сделает это. В 2017 все мы будем активно изучать именно эту программу.

Это даже несмотря на то, что ее еще нет на русском языке и подходит она только для Mac OS. Большинство профессионалов утверждают, что для дизайна интерфейсов она подходит куда лучше, чем фотошоп.

Если говорить о других продуктах Adobe, то изучать их или нет – решать вам. И тем не менее они все еще присутствуют в списках.

• Illustrator как лучший инструмент для работы с векторной графикой и создания иллюстраций.
• InDesign, как оптимальная утилита для полиграфии.
• Adobe Muse как идеальная платформа для создания

Помимо продукции Adobe профессионалы рекомендуют обратить внимание на другие марки и их продукты. Macaw признается одной из самых популярных программ для веб-дизайна. В отличие от Sketch она подходит для Виндовс и позволяет программировать без знания кода. Она сама автоматически генерирует . Скачать ее можно бесплатно прямо с официального сайта. Правда только на английском языке.

Издание Creative Bloq в качестве альтернативы Adobe Muse предлагает посмотреть другой современный сервис Pinegrow , он подходит для рисования любого сайта с последующим автоматическим преобразованием картинки в код. Этого же можно добиться и на Jetstrap.

Ну а если вам нужно поработать с приложениями, то в этом вам скорее поможет Foundation for Apps .

Банк графики

Любому дизайнеру нужна графика. Если рисовать все самому, то это займет много времени. Некоторые элементы можно заказать у кого-то другого, а можно приобрести или забрать уже готовые картинки с банков. Тырить хороший дизайнер никогда не станет, а вот скачать с хорошего сайта – почему бы и нет.

К примеру, на endlessicons.com можно найти иконки, а на coverr.co видеообложки.

На freepik.com и IconStore можно найти много бесплатных изображений. Векторов и даже PSD-макетов. От себя могу предложить Photoshop- master и Pixabay .

Stripemania.com – быстро сгенерирует графику. Добавляете свои цвета и получаете полосатую картинку. Хотите создать свой анимированный фон ? С этим поможет справиться сайт gradient-animator.com . Он не только покажет в режиме реального времени результат, но и создаст код, который останется только вставить на сайт.

Findguidelin.es это сборник, на котором можно найти иконки и всю информацию для дизайнеров о популярных брендах: WatsApp, Facebook, Вконтакте и так далее.

Конструктор логотипов и фавиконов

Меня удивило, но на многих популярных и престижных сайтов для дизайнеров можно найти ссылку на сервис, помогающий . На Нетологии, к примеру, предлагают withoomph.com или designrails.com . Я предпочитаю Логастер .

Для быстрого создания можете воспользоваться порталом www.favicon.cc . О нем я кстати уже писал. Хорошая штука.

Работа с цветом

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

Сервис Material Palette предлагает выбрать два цвета, а всю остальную схему она достроит за вас: шрифты, разделители и так далее.

На 0to255 можно посмотреть различные оттенки, хотя у вас есть и русская альтернатива – Яндекс.

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

Работа со шрифтами

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

Чтобы подобрать идеальное сочетание шрифтов специалисты рекомендую воспользоваться сервисом: canva.com/font-combinations или typewolf.com .

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

А в онлайн-редакторе на сайте prototypo.io вы можете немного его изменить и сделать уникальным.

Завершающий этап

Когда проект готов, нужно проверить как все будет выглядеть в стандартных браузерах с компьютеров и на экране мобильного телефона. Resizemybrowser.com поможет сделать это быстро.

При помощи сервиса dunnnk.com вы можете вставить свой скриншот в тысячи изображений телефонов и компьютеров и посмотреть как ваш сайт будет выглядеть на разных гаджетах с нескольких ракурсов.

Очень полезный список располагается на сайте webdesignerschecklist.com . Все ли вы сделали верно, можно ли сдавать проект? Просто расставьте галочки и удостоверьтесь, что ничего не забыли. Жаль, но сервис подойдет только для тех, кто владеет английским.

Если помимо дизайна вы занимаетесь еще и версткой, можете встроить в код утилиту tota11y . Она подсветит ошибки.

Ну и не забывайте, про развитие. Думаю, что любому дизайнеру будет полезно выбрать курс по недостающим знаниям от команды Photoshop-Master .

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

Ну вот и все. До новых встреч и удачи.

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

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

Программы и приложения

1. okayNav

Создание анимированного выпадающего меню для сайта.

2. CSSCO

Набор фотофильтров, создатели которых вдохновлялись приложениями VSCO и CSSGRAM.

3. Resizer

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

4. Descartes Styling for Programmers

Библиотека для создания CSS-стилей с помощью Javascript.

5. CSS vs. JS

Поможет выбрать элементы из CSS и JS.

6. Substance

Библиотека JavaScript для редактирования веб-контента.

7. PostCSS.parts

Поисковик по каталогам PostCSS плагинов.

8. WordPress SQL

Сниппет экономии времени для WordPress.

9. Qards

Инструмент WordPress для создания целевых страниц и промо-сайтов без кода. Подойдет для срочных проектов.

10. Atomic

Приложение прототипирования без кода.

11. Hamburgers

Коллекция отличных анимированных иконок-гамбургеров.

12. List.js

Легкий и быстрый JavaScript, который добавляет поиск, сортировку, фильтры и гибкость HTML.

13. Styleguide Toolbox

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

1. Анимированные иконки от mo.js (Codrops)

Хотите добавить немного анимации на сайт? Скачайте очень полезный инструмент по их созданию от авторов мощной библиотеки анимированной графики - mo.js. Будьте готовы увидеть несколько очень неожиданных анимаций.

2. The New Web Typography (Robin Rendle)

Небольшое эссе о веб-типографике от Робина Рендла - английского веб-дизайнера и писателя, который сейчас работает над CSS-Tricks.

3. Silver (Marc Andrew)

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

4. Почему вы должны перестать использовать IE10, IE9 и IE8 (Lubos Kmetko)

Microsoft в начале 2016г. объявил о прекращении выпуска обновлений для старых версий Internet Explorer. Любош Клеметко объясняет, почему лучше не пользоваться старыми непроверенными браузерами.

5. Как сделать свою первую JavaScript-диаграмму (Rohit Boggarapu)

Даже если вы никогда не делали JavaScript-диаграммы, вполне возможно, что вам это понадобится в будущем. Поэтому не проходите мимо советов от Рохита.

6. Эффективный адаптивный дизайн (Ben Callahan)

Полезные техники и приемы из реальных проектов по разработке адаптивного дизайна от автора книги Responsive Process Бена Каллахана.

7. Гит для дизайнеров (Daniel Fosco)

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

8. Необычный анимированный SVG леттеринг (Codrops)

Посмотрите, как можно оживить ваш сайт и сделать его динамичнее.

9. Гид по DPI для дизайнеров (Sebastien Gabriel)

Если вы начинающий дизайнер, вам точно нужно прочитать о DPI, что непременно поможет вам в будущем.

10. Последние тренды в веб-типографике (Eric Karkovack)

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

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

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

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

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

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

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

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

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

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

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

Программа обработки растровой графики

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

• Гармоничная тоновая и цветовая коррекция;
• Ретушь фото;
• Инструмент кадрирования;
• Отличия структуры и работы с различными форматами графики;
• Грамотная работа с фильтрами;
• Использование слоев.

Самыми распространенными программами здесь можно назвать:

1. Adobe PhotoShop - это абсолютный лидер среди графических программ подобного рода. Однако она требует достаточно больших объемов ресурсов компьютера.
2. Paint.net - хорошая альтернатива фотошопу. Удобный интерфейс, где все под рукой и возможность его расширить с помощью сторонних плагинов. Работает под Windows.
3. 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 , по возможности последней версии.

Некоторые специальные программы

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

1. Colormania - полезный и легкий инструмент, который позволяет в один клик определить цвет в формате RGB любой точки экрана монитора. Можно также воспользоваться расширением для браузера, например Eye Dropper для Chrome.
2. Adobe Flash - известный инструмент для создания баннеров и другой анимации для сайтов, например, интерактивных кнопок, мультяшных персонажей и много других вещей.
3. Линейка - позволяет замерить размер любых нужных вам элементов. Программных решений здесь множество, например SPRuler, Code-V Ruler. Можно также воспользоваться подобным расширением браузера, таким как MeasureIt (Coogle Chrome).
4. GIF Animator - простая программа для создания анимированных картинок в формате gif. Хотя эту работу вполне можно выполнить и в Photoshop.

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