Создание дизайна сайта в photoshop

1.06.2016

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

СОЗДАНИЕ ДИЗАЙНА САЙТА

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

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

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

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

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

Но есть еще один фариант создания дизайна для своего сайта – это использование программы photoshop.

СОЗДАНИЕ ДИЗАЙНА САЙТА В PHOTOSHOP

В этой статье ознакомим Вас с базовым представлением о photoshop, как на его платформе создавать базовые вещи, к примеру, нарисовать какую-либо форму или добавить нужный текст, повернуть объект и изменить размер.

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

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

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

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

Adobe Photoshop

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

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

Первые шаги по разработки дизайна сайта

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

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

Перед тем, как приступить к созданию дизайна будущего сайта, необходимо в фотошопе создать новый документ. Его ширина рассчитывается в пикселях и должна соответствовать разрешению экрана. К примеру, задаем ширину, равную 1024 пикселя. Высоту берем произвольную, она особой роли не играет. В любом случае в браузере страница сама растянется по вертикали. При создании дизайна сайта используйте стандартное разрешение. Оно составляет 72 пикселя на один дюйм. При выборе цветового режима устанавливаем значение «RGB» на восемь бит.

maxresdefault

После чего в фотошепе при помощи специальной команды «Показать – Новые направляющие» (View — New guide) мы имеем возможность в соответствии с модульной сеткой разместить нужную нам страницу. Таким образом, мы сможем добиться точного совпадения размеров эскиза и окончательного документа. Помимо этого, в фотошопе мы сможем, по своему усмотрению использовать уже готовые сетки. Здесь присутствует достаточно количество сеток, которые подходят под различные разрешения экранов. В большинстве случаев такие сетки предоставляются абсолютно бесплатно.

Создаем фон страницы

На следующем этапе нам потребуется создать фон веб-страницы. Мы можете использовать однотонный фон. Чтобы его установить используем команду «Заливка» (Paint Bucket Tool), где имеется установленное значение «Фоновый цвет» (Foreground) и заполняем все пространство документа необходимым для нас цветом. Также Вы можете в качестве фона использовать любое изображение или понравившийся узор. Если Вы выбрали узор, то его можно установить с помощью специальной команды «Paint Bucket Tool». В этом случае должно быть установлено значение «Узор» (Pattern).

СОЗДАЕМ ЭЛЕМЕНТЫ СТРАНИЦЫ В ФОТОШОПЕ

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

Области страницы: шапка, контент, подвал
Как правило, начинают создавать элементы страницы с «шапки». Другими словами с верхнего блока. Здесь у нас будет располагаться название интернет-ресурса и его логотип. Цвет «шапки» и ее форму Вы можете выбрать по своему усмотрению (прямоугольной формы или же со скругленными углами, цвет может быть аналогичен фону или же контрастным). Высота «шапки» должна быть строго фиксированной, а вот ширину необходимо сделать на весь размер документа. Если у Вас возникнет потребность в создании прямоугольных выделений, то воспользуйтесь специальным инструментом под названием «Прямоугольное выделение» (Rectangular Marquee Tool). После этого создаем все остальные необходимые нам элементы на интернет-странице. Порядок их создания значения не имеет. Вы можете первоначально создать «подвал», а можете область, в которой будет размещаться информация об авторе сайта, можете область контента, а можно и область меню. Любая из областей может иметь индивидуальную для себя цветовую гамму и форму. Здесь уже на что способна Ваша фантазия и желание.
Кнопки и иконки
Создаем для дизайна нашего сайта кнопки и иконки. В зависимости от того, какой именно сайт Вы создаете для себя, можно выбрать различные вариации кнопок и иконок. По своему усмотрению можно сделать их веселыми. Но если сайт деловой, то лучше всего иконки и кнопки сделать строго деловыми. Чтобы создать нужные нам кнопки используем в фотошопе «Rectangular Marquee Tool». Если Вы хотите задать кнопкам на своем сайте не другую, непрямоугольную форму, то воспользуйтесь для это специальной функцией «Перо» (Pen Tool). При помощи этой же функции можно по своему усмотрению создать и иконки любой формы.

Для того, чтобы сделать надписи на иконках и кнопках, необходимо будет использовать специальный инструмент под названием «Горизонтальный текст» (Horizontal Type Tool). Если необходимо сделать вертикальные надписи, то используем «Вертикальный текст» (Vertical Type Tool). Также можно изменить и размер, гарнитуру шрифта, выравнивание текста.

Последние штрихи при создании дизайна в фотошопе

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

Чтобы сохранить разделенные части, используем команду «Save for Web&Devices». Чтобы это сделать необходимо в диалоговом окне выбрать тип файла «HTML&images», а затем сохраняем его под именем «index.html» или «index.htm». Теперь дизайн шаблона нашего будущего сайта состоит из файла, под названием «index.html» и каталога с названием «images». В последнем будут находиться разделенные наши кусочки. При необходимости редактирования файла «index.html» мы можем использовать блокнот, или любой другой редактор html.

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

ВМЕСТО ЗАКЛЮЧЕНИЯ

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

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

И напоследок, несколько слов о том, как изменить дизайн сайта.

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