Навигация
Главная страница Файловый архив Онлайн ролики Мониторинг Статьи Форум Топ сайтов Авторство
Категории раздела
Эффекты [0] Работа с текстом [0] Работа с фото [27]
Дизайн/Рисование [117] Графика для сайта [28] Анимация [24]
Мини-чат
Чтобы добавить сообщение, необходимо авторизоваться.
Наш опрос
Есть ли у Вас свой сайт
Всего ответов: 905
Статистика

Онлайн всего: 5
Гостей: 5
Пользователей: 0
Главная » Файлы » PhotoShop уроки от нас » Графика для сайта

Откройте фотошоп, создайте новый документ размерами 800x700px и 72dpi.
Установите главный цвет - #131313, возьмите Paint Bucket Tool (G) и залейте весь документ.
Профессиональный сайт *
Создайте новый слой, возьмите Ellipse Tool (U), попробуйте создать элемент для заголовка сайта, сделайте овальное выделение и залейте его белым цветом.
Профессиональный сайт *
Параметры слоя:
Blending Options>Outer Glow
Профессиональный сайт *
Получили:
Профессиональный сайт *
Применяя предыдущий инструмент, пробуйте сделать следующий слой, принадлежащий к заголовку сайта. Изменение формы делаем с Convert Point Tool.
Профессиональный сайт *
Параметры слоя:
Blending Options>Inner Glow
цвет #143453.
Профессиональный сайт *
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradients parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Сделайте копию нового сделанного слоя и выберите Free Transform и изменинте его так чтобы было похоже на это:
Профессиональный сайт *
Параметры слоя:
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Создайте новый документ, размерами 20x20px и 72dpi, инструментом Rectangle Tool создайте три прямоугольника и с помощью Free Transform поверните их под углом, чтобы создать паттерн белого цвета..
Профессиональный сайт *
Профессиональный сайт *
Сохраните узор:
Профессиональный сайт *
Сделайте новый слой используя Rectangle Tool (U) и создайте широкую полоску, которая будет фоном сайта.
Профессиональный сайт *
Параметры слоя:
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Blending Options>Pattern Overlay
Профессиональный сайт *
Получили:
Профессиональный сайт *
Сделайте копию недавно созданного слоя и выберите Free Transform, переместите копию в правую сторону и смотрите на рисунок:
Профессиональный сайт *
Возьмите Rounded Rectangle Tool (U), представьте форму заголовка сайта, на которой будут его кнопки, покрасьте её в #010101.
Профессиональный сайт *
Профессиональный сайт *
Параметры слоя:
Blending Options>Outer Glow
Профессиональный сайт *
Профессиональный сайт *
Сделайте копию нового сделанного слоя и выберите Free Transform чтобы сделать её меньше немного и изменить у этой копии параметры:
Профессиональный сайт *
Параметры слоя:
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Возьмите Ellipse Tool (U) и пробуйте нарисовать вспышку на правой стороне всех кнопок, расположенных на заголовке сайта.
Профессиональный сайт *
Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Зажмите клафишу Alt, нажмите мышью между слоем вспышки и кнопочной группой, после этого вспышка будет применена в пределах заголовка с кнопками.
Профессиональный сайт *
Профессиональный сайт *
Сделайте копию нового сделанного слоя и переместите копию в лево, как показано на рисунке:
Профессиональный сайт *
Выберите Rectangle Tool (U), чтобы создать и покрасить самую низкую часть фона сайта, этим цветом #1A1A1A.
Профессиональный сайт *
Параметры слоя:
Blending Options>Outer Glow
Профессиональный сайт *
Blending Options>Bevel and Emboss
Профессиональный сайт *
Получили:
Профессиональный сайт *
Возьмите Rounded Rectangle Tool (U) чтобы создать слой где будет одна из секций сайта.
Профессиональный сайт *
Профессиональный сайт *
Параметры слоя:
Blending Options>Drop Shadow
Профессиональный сайт *
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Сделайте копию в последний раз сделанного слоя и обратитесь снова к Free Transform, чтобы сделать копию более маленькой, после изменяем её параметры.
Профессиональный сайт *
Параметры слоя:
Fill 0%
Blending Options>Stroke
Профессиональный сайт *
Получили:
Профессиональный сайт *
Потом нам придется выбрать два инструмента и создать один элемент, который будет на магистрале сайта. Выберите Rectangle Tool (U) и создайте первоначальный слой, а затем щелкните по кнопке Alt, в тоже вермя возьмите Ellipse Tool (U) и выделите 2 раза (как показано на рисунке), чтобы вырезать ненужные элементы.
Профессиональный сайт *
Профессиональный сайт * Параметры слоя:
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Теперь создайте другой элемент магистрали, который должнен быть размещен сверху и посередине. Сделать его мы должны с помощью Rectangle Tool (U).
Профессиональный сайт *
Профессиональный сайт *
Параметры слоя:
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Используйте Line Tool (U) , пробуйте сделать две вертикальных линии вдоль краев недавно созданной полосы, покрасьте их в #8D8D8D.
Профессиональный сайт *
Профессиональный сайт *
Возьмите Pencil Tool ( cool.gif чтобы подвести двойную вертикальную черту на форме, где будут кнопки, смотрим скрин:
Профессиональный сайт *
Параметры слоя:
Blending mode-Soft Light
Профессиональный сайт *
Сделайте дубликат слоя и поставьте его справа, паралельно этому.
Профессиональный сайт *
Возьмите Ellipse Tool (U) и создайте слой для логотипа сайта.
Профессиональный сайт *
Параметры слоя:
Blending Options>Outer Glow
Профессиональный сайт *
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Используя предыдущий инструмент, создайте следующий слой, также для логотипа.
Профессиональный сайт *
Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Возьмите Ellipse Tool (U), создайте ещё один слой поменьше, опять же для логотипа. Красим в #0A0F12.
Профессиональный сайт *
Параметры слоя:
Blending Options>Stroke
Профессиональный сайт *
Получили:
Профессиональный сайт *
Выберите в последний раз Ellipse Tool (U), чтобы нарисовать вспышку на логотипе.
Профессиональный сайт *
Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Зажмите кнопку Alt и нажмите мышью между слоями, после этого вспышка будет применена в пределах слоя с логотипом.
Профессиональный сайт *
Получили:
Профессиональный сайт *
Выберите Ellipse Tool (U), чтобы создать слой, для дополнения логотипа.
Профессиональный сайт *
Параметры слоя:
Fill 0%
Blending Options>Outer Glow
Профессиональный сайт *
Blending Options>Inner Glow
Профессиональный сайт *
Blending Options>Stroke
Профессиональный сайт *
Получили:
Профессиональный сайт *
Следующий шаг включает создание специальной секции, расположенной с левой стороны сайта.
Берём Rectangle Tool (U) для этой операции.
Профессиональный сайт *
Профессиональный сайт *
Параметры слоя:
Fill 0%
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Сделайте копию нового сделанного слоя и выберите Free Transform, чтобы повернуть копию и разместить её парралельно, смотрите следующий рисунок:
Профессиональный сайт *
Используя три линии , созданные из черточек , вызовите панель настройки шрифтов и установите такие параметры как на скрине..
Профессиональный сайт *
(самая низкая линия)
Профессиональный сайт *
(Высшие линии).
Blending Options>Drop Shadow
Профессиональный сайт *
Получили: Профессиональный сайт *
Вот такой у вас должен получится результат:
Профессиональный сайт *
Идем дальше...
Введите после этого названия кнопок для на загаловке сайта.
Профессиональный сайт *
Профессиональный сайт *
Напишите также заглавие логотипа сайта, как на скрине.
Профессиональный сайт *
Профессиональный сайт *
Параметры слоя:
Blending Options>Gradient Overlay
Профессиональный сайт *
Gradient’s parameters:
Профессиональный сайт *
Получили:
Профессиональный сайт *
Назовите секции сайта, смотрим скриншёты.
(about me)
Профессиональный сайт *
(portfolio)
Профессиональный сайт *
Вставьте текст в названную секцию "about me”, смотрите скриншёт:
Профессиональный сайт *
(orange text)
Профессиональный сайт *
(the rest of the text)
Профессиональный сайт *
Вставьте скриншёты наших проектов в следующую секцию "portfolio”.
Параметры слоев(смотрим скриншёты)
Blending Options>Stroke
Профессиональный сайт *
Профессиональный сайт *
Последняя стадия включает добавление авторского права сайта:
Профессиональный сайт *
Профессиональный сайт *
Просмотров 194

19.12.2011
Комментариев: 0


Всего комментариев : 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]