Игра на «Морской Бой» на JavaScript: «Простая Игра» и «Игра для Двоих»
Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Интернет-магазин под ключ

Статьи для сайтов!!!
Главная Дополнительно Adobe Photoshop Табличная верстка

Дизайн сайта. Редактор Adobe Photoshop

Шапка сайта
Графическое меню
Логотип и иконка для сайта
Графическое сопровождение контента. Уникальный контент
«Обязательные» иллюстрации
Подведем итог...


Логотип Adobe Photoshop

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

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

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

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

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

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

 

Шапка сайта

Я считаю, что основной составляющей дизайна этого сайта является его шапка.

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

 

шапка сайта шапка сайта

 

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

Я бы не смог создать подобные графические элементы без знания Photoshop!

А вот шапка другого моего сайта:

шапка сайта

 

Согласитесь, что без нее сайт www.buildpupil.ru о Строительстве и ремонте своими руками с точки зрения дизайна был бы гораздо менее привлекателен!


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

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

В качестве примера давайте снова обратимся к сайту www.buildpupil.ru о Строительстве и ремонте своими руками.

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

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

Получилось вот такое графическое меню.

 

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

 

На мой взгляд неплохо, во всяком случае мне нравится!

Опять-таки без редактора Adobe Photoshop Вы здесь бессильны!


Логотип и иконка для сайта

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

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

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

 

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

 

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

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

Вот увеличенный вариант одной из моих иконок:

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

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

Возможно, что-то подобное можно сделать, используя, например, редакторы Microsoft Word и Paint. Но я считаю, что в Photoshop это делать гораздо удобнее. К тому же в редакторе Photoshop Вы сможете создать более сложную и оригинальную иконку для своего сайта, такую, которая не под силу другим редакторам.

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

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


Графическое сопровождение контента. Уникальный контент

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

Возьмем для примера эту страницу моего сайта.

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

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

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

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

Уникальностью также должны обладать и графические изображения. Добиться этого довольно сложно, даже имея навыки работы в Photoshop! А без них и говорить не о чем!

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


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

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

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

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

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


Подведем итог...

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

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

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


Adobe Dreamweaver Adobe Photoshop Табличная верстка
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru