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

Эта статья окажется особенно полезной для начинающих веб дизайнеров.

Давайте начнем обзор инструментов для веб дизайнера, стремящегося к совершенству.

Итак, хотелось бы начать обзор инструментария веб дизайнера-верстальщика с основного, с тех программ, без которых просто не обойтись.
Во-первых, у веб дизайнера должен быть Adobe Photoshop. Честно говоря, сложно себе представить, как веб дизайнер может вообще обойтись без этой программы (если Вы знаете как – напишите, будет очень интересно). Не стану во всех подробностях описывать все преимущества и полезности этой программы для веб дизайнера. Скажу только то, что она дает действительно колоссальные возможности для веб дизайна и позволяет воплотить практически любой замысел веб дизайнера или заказчика. Но самое главное – чтобы воспользоваться этими колоссальными возможностями нужно учиться работать в этой программе. А учиться работать в ней можно практически бесконечно. С повышением Вашего мастерства будет расти и цена на Ваши уникальные веб дизайны.
Adobe Illustrator – еще одна достаточно полезная программа от Adobe. Скажу сразу – обойтись без нее можно, но бывают ситуации, когда она может очень сильно помочь при разработке дизайна веб сайта. Например, заказчик хочет, чтобы Вы сделали веб сайт его компании и Вы с радостью соглашаетесь. Но компания новая и дизайна логотипа у нее еще нет. В общем он говорит Вам – «мне нужен уже готовый продукт – сайт с логотипом». А рисовать логотип в Photoshop не самое приятное занятие, к тому же, Photoshop – это в первую очередь растровый редактор. Вот и получается, что: либо как-то выкручиваться из ситуации надо, либо говорить заказчику – закажи, мол, логотип у другого веб дизайнера. Но в таком случае он может и весь сайт заказать сразу у другого дизайнера. Заказчику не интересно: какие программы у Вас есть, каких нет, с какими Вы трудностями столкнетесь в своей работе. Ему интересен только результат, потому что он платит за него деньги. Так вот, Adobe Illustrator – это векторный редактор, научившись работать в котором можно рисовать свои дизайны логотипов, иконки и многие другие вещи. Нужно понимать, что слово векторный – это очень важное слово для логотипа. Векторный – значит никаких квадратиков-пикселей при увеличении уже не будет, а при любом размере дизайн логотипа будет смотреться четко, ярко и красиво. Кстати говоря, в Adobe Illustrator есть еще и очень неплохой инструментарий для веб дизайнера, который помогает создавать 3D объекты.
Плавно переходим к верстке.
Adobe Dreamweaver – редактор для создания кода веб страницы. Без него тоже можно обойтись. Например, код можно создавать даже в «Блокноте»… если знаешь как. Что касается меня – я очень люблю Dreamweaver. Он очень удобен, а особенно для тех, кто только учится верстке веб страниц. Все удобства тоже перечислять не буду. Но вот на мой взгляд самые основные: подсветка кода, подсказки при написании кода, различные меню, которые помогут быстро и правильно создать дизайн формы, таблицы и много чего еще, визуальный режим (в нем можно предварительно смотреть, что у Вас получается) и много, много чего еще. В общем очень удобно и очень приятно работать.
Хочется только предостеречь Вас! Старайтесь все-таки время от времени прописывать код руками, а не только жать на кнопочки типа «Создать таблицу», «Создать форму» и т. д. А то ведь в один прекрасный момент может получиться так, что нужно будет писать код, а Dreamweaver рядом не будет… а вдруг Вы не вспомните как. Все-таки настоящий верстальщик должен уметь написать и в простом «Блокноте».
Здесь хочется добавить еще то, что продукты корпорации Adobe являются не самыми дешевыми, но если Вы собираетесь серьезно заниматься веб дизайном, версткой или сайтостроением в целом, то они очень ускорят и облегчат Ваш труд, а также вскоре окупятся и помогут Вам зарабатывать деньги.
Это то, что касалось программ платных. А теперь я расскажу Вам о некоторых бесплатных ресурсах, которые могут Вам пригодиться в создании веб дизана.
Практически каждый раз при дизайне нового веб сайта перед веб дизайнером стоит задача подобрать такое сочетание цветов для веб сайта, которое бы смотрелось красиво и гармонично. Задача не из легких, если конечно Вы не окончили художественную школу, или просто не имеете дар подбирать такие сочетания от природы. Так вот для всех остальных – существует очень неплохой веб ресурс, помогающий подобрать нужную цветовую гамму для веб дизайна Вашего сайта. Принцип работы с ним прост и интуитивно понятен. После того, как Вы попадаете на страницу этого ресурса, введите код Вашего предполагаемого основного цвета в маленькое окошко под цветовым кругом. После этого можно переключать режимы: «Моно», «Контраст» и т. д. В правой части экрана Вы будете видеть квадратики с подходящими цветами, а также сможете посмотреть коды этих цветов. Кроме того, под цветовыми квадратами есть две ссылки: «Пример темной веб страницы» и «Пример светлой веб страницы». Что Вы там увидите, я думаю Вы уже догадались. В общем пользуйтесь. Очень хороший ресурс.
Продолжая тему цветов, расскажу Вам еще об одном инструменте. Этот инструмент загружается в браузер Firefox и работает в нем. Называется он ColorZilla. После того, как Вы добавите его себе в браузер, справа вверху в Вашем браузере появится иконка пипетки. И теперь для того, чтобы узнать цвет любого элемента на веб странице будет достаточно щелкнуть на пипетку, а потом на интересующий элемент. Код цвета будет скопирован в буфер Вашего компьютера и после этого нажатием клавиши Ctrl + V Вы можете вставить его куда угодно. Таким образом, Вы будете экономить немало времени при создании веб дизайна.
Еще один инструмент, который может помочь в некоторых ситуациях, называется MeasureIt . Это линейка, которая будет измерять нужное Вам расстояние в пикселях. У меня например была такая ситуация: заказчик веб сайта не вполне знал, чего он хочет, и поэтому мы пробовали различные варианты веб дизайна пока не пришли к варианту, который его устраивал. Нравилось все, только нужно было под меню навигации в шапку вставить слайдер, который будет листать картинки. К тому моменту все было уже сверстано. Для того, чтобы все выглядело аккуратно ширина слайдера должна была совпадать с шириной навигации. С этим инструментом выяснить нужную ширину в пикселях (а также, кстати, и высоту) вообще не составило труда. На все это ушло времени – пара секунд, не больше. Думаю каждый веб дизайнер должен взять этот инструмент на заметку.
И еще один очень важный инструмент, о котором хотелось бы рассказать в этой статье. Называется он Firebug и многим, наверное, уже знаком. Но если Вы слышите о нем впервые, обязательно добавьте его в свой веб браузер. После того, как Вы его добавите, в верхнем правом углу браузера появится иконка жучка. И поверьте мне, этот жучок будет Вам очень сильно помогать. Нажав на него, вы можете просматривать html-код любой вашей (и не только)веб страницы и не выходя из браузера редактировать стили элементов Вашей веб страницы. Это очень экономит время и помогает в работе. Кстати говоря, это только одна из функций жучка. Кроме всего прочего он очень поможет тем, кто работает с java script. С ним гораздо проще отслеживать всевозможные ошибки.
Вообще в браузере Firefox много различных дополнений. Я рассказала Вам о том, чем активно пользуюсь я сама и что помогает мне при создании веб дизайнов.
Пишите: Какими инструментами пользуетесь Вы? Что помогает Вам? В какие ситуации Вы попадали и как из них выходили?
Давайте делиться своим опытом и своими историями!
Надеюсь статья была полезна для Вас! Используйте эти веб инструменты и создание веб дизайна станет проще, быстрее и увлекательнее.