Как создать шаблоны для сайтов с помощью фотошопа?

шаблон сайта

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

Шаг 1 – Разработка макета

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

Шаг 2 - Создание баннера

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

Шаг 3 – Работа над фоном

Каждому хочется создать уникальный дизайн для своего сайта. У Photoshop есть множество возможностей для этого. Например, используя слои можно создать коллаж в фотошопе (как здесь: http://www.internet-technologies.ru/articles/article_1758.html), который подчеркнет индивидуальность вашего сайта. Главное подобрать изображения, которые будут гармонично сочетаться друг с другом.

Шаг 4 – Создание кнопок

Они будут скрывать ссылки, которые перенаправляют пользователей сайта на внутренние страницы. Вставьте существующие изображения кнопок и разместить их там, где необходимо шаблоне или используйте инструменты Photoshop для их создания. Выберите «Slice Tool» (пятая кнопка сверху в панели инструментов). Щелкните правой кнопкой мыши на новой кнопке и выберите «Edit Slice Options» из выпадающего меню. Откроется диалоговое окно «Параметры фрагмента». Введите адрес перехода по ссылке в поле «URL». Нажмите «OK».

Шаг 5 – Социальные сети

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

Шаг 4 – Сохранение шаблона

Нажмите кнопку «Файл» в строке меню и выберите «Сохранить для Web и устройств». Откроется окно «Сохранить». Отсюда вы можете изменить некоторые аспекты вашего шаблона, такие как цвет фона, сжатие, качество изображения, размер документа и так далее. Эти параметры хорошо обозначены и говорят сами за себя. (Вы можете просмотреть HTML код этого шаблона, нажав на кнопку «Просмотр»). Дайье название шаблону и нажмите кнопку "Сохранить". Поздравляю, вы успешно создали свой веб-шаблон. Теперь вы можете открыть его в браузере и добавить контент.

Советы и предупреждения

Photoshop создает новый образ для каждого слоя, который вы создаете, и сохраняет их в папке «Изображения». При загрузке страницы на сервер, не забудьте загрузить и эту папку.

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

Мысли
Как создать шаблоны для сайтов с помощью фотошопа?
Напишите письмо
© Галкин Вадим. 2007−2015.      Яндекс.Метрика

Портфолио

Коттеджный поселок «Медное»

Тверское городское БТИ

АН «Наш Дом»

Книги

Воспоминания папы

Учебник для заказчика сайта

Учебник для учителя

Интернет торговля

Рассылка email-писем с ePochta

Популярность покупок в Интернете сегодня

Торговля товарами из Китая — идея для заработка в Интернете

Моби-С: 1С на планшете

Мысли о веб-дизайне

Как создать шаблоны для сайтов с помощью фотошопа?

Секреты юзабилити интернет-магазинов

Изготовление пластиковых карт в Москве: как осуществляется печать изделий

О продвижении сайтов

Аудит сайта – как не дать порталу исчезнуть

Методы продвижения сайтов

Создание и продвижение сайтов