Редактор Adobe Photoshop – Иллюстрации для сайта

Большинству из нас известен редактор Adobe Photoshop. Если кто-то им не пользовался, то наверняка о нем слышал. Adobe Photoshop - это лидер в области редактирования растровых изображений.

Adobe Photoshop - многофункциональный графический редактор, разработанный и распространяемый компанией Adobe.

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

Лично я не представляю, что бы я делал без программы Photoshop. Это незаменимый инструмент и помощник любого веб-разработчика. Дизайн сайтов и редактор Adobe Photoshop это неразрывно связанные друг с другом вещи.

Дизайн сайта это его лицо. Любой пользователь, заходя на сайт, в первую очередь оценивает его дизайн, даже не задумываясь об этом. И если внешний вид сайта ему не понравился, то, есть вероятность что на этом сайте он не задержится.

Поэтому при оформлении любого сайта какие-то графические элементы создаются в редакторе Adobe Photoshop. Далее рассмотрим примеры.



Шапка сайта

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

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

То есть, сначала я создавал шапку сайта, а затем оформлял его страницы.

На иллюстрации ниже Вы видите шапку одного из моих сайтов.

Конечно, эта графическая работа не совершенна, но не так уж она и плоха, и в свое время она меня устраивала. Но суть не в этом.

Это лишь способ показать читателю, что оформление шапки для сайта делалось в редакторе Photoshop.

А вот еще одна моя работа. Здесь тоже многое сделано в Photoshop.

Графическое меню навигации

Навигационное меню сайта можно украсить и сделать неповторимым, добавив в него какой-либо графический элемент.

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

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

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

Получилось довольно не плохое графическое меню. И опять же без редактора Adobe Photoshop в подобных работах мы бессильны.

Иконка для сайта

При создании сайта для него желательно сделать иконку. Она же может являться его логотипом. Или, наоборот, из логотипа сайта можно сделать иконку. Это не так важно.

Логотип сайта обычно размещают на всех его страницах, как правило, в верхней их части.

Иконку сайта можно наблюдать, например, во вкладках браузеров или же в результатах выдачи поисковой системы Яндекс. На изображении ниже Вы видите иконки различных сайтов.

Некоторые их них довольно известны: это Авито и ВКонтакте, иконка Яндекса. Есть и другие, в том числе иконка моего сайта.

Для иконки можно использовать любое изображение, либо сделать ее самостоятельно, придав, таким образом, своему сайту индивидуальность.

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

Это простой текст, оформленный определенным образом и это простой вариант иконки для сайта.

Для тех, кто не знает, окончательный размер иконки для сайта составляет 16x16 пикселей.

Иконка для сайта это файл с именем favicon и расширением .ico. Делается иконка favicon.ico при помощи специального сервиса. Вот один из них: https://www.favicon.cc/ (скопируйте ссылку, чтобы перейти по ней).

Здесь можно в режиме онлайн создать новую иконку для сайта «Create New Favicon», либо импортировать собственное изображение, затем сгенерировать и скачать иконку «Download Favicon».

Графическое сопровождение контента

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

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

Конечно же, на веб-странице не хватало иллюстраций: с ними страница приобрела совершенно другой - более осмысленный, привлекательный и интересный вид.

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

Для этого нужно либо самому фотографировать что-либо, либо самостоятельно создавать иллюстрации в программе Adobe Photoshop, либо совмещать и то и другое.

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

Обязательные иллюстрации

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

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

Например, на этой странице к обязательным иллюстрациям можно отнести как минимум три, так как они позволяют лучше разобраться с настройками программы Adobe Dreamweaver.

Некоторые иллюстрации на текущей странице также можно отнести к обязательным (ну или к желательным): это примеры шапки сайта и графического оформления всего сайта, пример навигационного меню, изображения с иконками сайтов.

Естественно, термин «обязательные иллюстрации» носит условный характер. Размещать их на странице или нет – это личное дело каждого. Тем не менее, они желательны: с ними и страница смотрится интереснее и определенную пользу они все же приносят.

И опять же для создания таких иллюстраций нужен Photoshop, так как эта программа не только позволяет вырезать из исходного изображения нужный фрагмент или изменить его размер, но и оптимальным образом сохранить изображение именно для Web. То есть при этом можно выбрать подходящий формат иллюстрации gif, png и jpg/jpeg, качество сохраняемого графического объекта и соответственно его размер.

Делаем вывод

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

Однако из этой статьи должно быть ясно, что Adobe Photoshop действительно является незаменимым инструментом любого веб-мастера. Сейчас речь идет о тех людях, кто хочет в полном объеме самостоятельно создавать сайты, начиная от написания кода и заканчивая дизайном.

Поэтому берите на вооружение и изучайте хотя бы основы работы в редакторе Adobe Photoshop.