Главная Заказать статью Связь с автором Заказать сайт Статьи Сказать спасибо

Уроки по созданию дизайна сайта в Photoshop

Обращаю ваше внимание, что сайт вы можете заказать у нас, стоимость составляет около 100$. Чтобы подать заявку и узнать подробности перейдите сюда. Также вы можете

Курс видеоуроков

Если вы ничего не знаете про создание дизайна сайта в фотошопе, то этот небольшой урок для вас. Итак, то что нам понадобится это фотошоп. Я использую Photoshop CS3 Extended 10 версии. Давайте разберем на простом примере как создать дизайн для сайта. Урок этот, конечно, далеко не единственный вариант создания дизайна сайта. Но все же для новичка очень даже сойдет. Создание дизайна также зависит от вашей фантазии и способностей в фотошоп.

Запускаем программу фотошоп. Затем идем в меню Файл - новый, либо вызываем комбинацией клавиш CTRL + N. Ширину возьмем 750 пикселей, высота пусть тоже будет 750 (если текст на странице не будет помещаться, то высота будет увеличиваться сама по себе, поэтому она не столь важна). Разрешение 72 пикс/дюйм. Жмем ОК.

Начало создания дизайна сайта

Перед нами появляется наша рабочая облать. Далее что нам потребуется - это Линейки. Для того, чтобы их включить, нужно зайти в меню Просмотр - Линейки (CTRL + R).

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

Установка линеек в фотошопе

Далее выбираем Инструмент для Прямоугольного выделения

Инструмент для прямоугольного выделения

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

Выделение шапки сайта пунктиром

Затем нужно создать новый слой. Для этого заходим в пункт меню Слой - новый - слой (SHIFT + CTRL + N). Слой переименовываем в gradient английскими буквами.

Теперь мы сделаем градиентную заливку выделенной области. Выбираем основной цвет, пусть он будет такой (код цвета 26561f)

Градиентная заливка в фотошопе

...и цвет фона (код цвета 50de53)

Градиентная заливка в фотошопе

 

return_links(1); ?>

Выбираем инструмент Градиент. В верхней панели свойств выбираем тип градиента - от основного к фоновому.

инструмент Градиент

Протягиваем линию так, как показано на рисунке и получаем следующую градиентную заливку.

Чтобы линия проходила строго вертикально или горизонтально нужно удерживать клавишу SHIFT.

Заливка шапки градиентом

Градиентная заливка шапки

Теперь сделаем низ сайта , или так называемый подвал. Сначала выделим его инструментом для прямоугольного выделения, создадим новый слой, переименуем его в gradient1 и проведем линию снизу вверх удерживая SHIFT как показано на рисунке.

Заливка подвала градиентом

Градиентная заливка подвала

Далее

Уроки по созданию дизайна сайта в Photoshop
Добавление картинки в дизайн сайта
Добавление второго изображения в дизайн нашего сайта
Усложнение дизайна сайта добавлением картинки
Изменение контрастности изображения. Работа с текстом
Нарезка готового дизайна сайта в Photoshop
Доработка сайта в Adobe Dreamweaver CS3 после нарезки дизайна в фотошопе
Продолжаем работу над сайтом в Adobe Dreamweaver CS3
Дорабатываем html-код сайта в Adobe Dreamweaver CS3
Доработка сайта в Dreamweaver - добавление колонки меню
Резиновый дизайн - заканчиваем работу над сайтом в Dreamweaver
Чтобы дизайн сайта не разъехался в google chrome и safari
Жесткий дизайн сайта
Добавляем независимую таблицу в код - создаем бордюры
Убираем ненужные параметры
Добавление бэкграунда в бордюры сайта
Не отображается бэкграунд в пустой ячейке таблицы

Выбрать хостинг
Партнерские программы заработка

return_links(); ?>



cubass - копирайтер на TextSale.ru Рейтинг@Mail.ru Rambler's Top100 PR-CY.ru

© 2009-2012 Все права защищены www.baxtop.ru | Копирование материалов сайта без обратной гиперссылки на первоисточник ЗАПРЕЩАЕТСЯ!!!