Главная Регистрация Вход
Приветствую Вас Гость!


Главная » 2011 » Январь » 12 » Профессиональный сайт
13:50
Профессиональный сайт

Профессиональный сайт

Professional website

Откройте фотошоп, создайте новый документ размерами 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
Профессиональный сайт *
Профессиональный сайт *
Последняя стадия включает добавление авторского права сайта:
Профессиональный сайт *
Профессиональный сайт *
Готово!
Полный размер


Автор: Adobe
Перевод: Glebash

***


[02.04.2019][DesiGn bLOg]
Как узнать - ты дизайнер или нет? (0)
[09.12.2015][Lessons PHOTOSHOP]
Рисуем анимацию в Photoshop и After Effects (2015) (0)
[23.10.2010][rastER KLipardy]
Косметика в HQ (0)
[12.02.2015][DesiGN SofT]
The Logo Creator 6.6 Final (0)
[12.02.2015][video futage]
Quicky Logo - Project for After Effects (0)
[03.12.2014][Lessons PHOTOSHOP]
Панорамная Фаст-моушен съемка своими руками (0)
[16.12.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Retouch Man (2015) (0)
[12.02.2015][video futage]
Broadcast Shapes Package - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки photoshop Выборочная коррекция (2014) (0)
[03.12.2014][Photoshop Actions]
50 Photoshop Action Scripts (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс Предметная съемка 2.0 (2015) (0)
[21.10.2015][Lessons PHOTOSHOP]
Видеокурс photoshop Art Wedding (0)
[12.02.2015][DesiGN SofT]
Room Arranger 7.5.0.421 (2014) Rus/Eng (0)
[12.02.2015][video futage]
Deep Eyes | 7 in 1 logo pack - Project for After Effects (Videohive) (0)
[22.10.2015][Lessons PHOTOSHOP]
Создание поверхности воды в photoshop (2015) (0)
[12.02.2015][DesiGN SofT]
PT Photo Editor 1.7.1 Standard Edition Rus Portable by SamDel (0)
[06.12.2015][Lessons PHOTOSHOP]
Видеокурс по съемке и обработке цифровых фотографий (2015) (0)
[12.02.2015][DesiGN SofT]
HyperSnap 7.29.02 + Portable (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеокурс удаление объектов в фотошопе (0)
[04.12.2015][Lessons PHOTOSHOP]
Tuts+ Premium - Creative Photo Effects in Adobe Photoshop (2015) (0)
 

Прикрепления:
Категория: Lessons PHOTOSHOP | Просмотров: 789 | Добавил: supermen | Теги: сайт сделать, Дизайны, посторонним вход запрещен фотошоп, Профессиональный шаблон с, сайт русской, сайт, дизайн сайта, Профессиональный сайт Photoshop
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Поиск






[11.01.2011][Veb DeSiGn]
ThemeForest - ChromeGT Business & Portfolio HTML Theme (All Colours) - Rip (1)
[14.10.2010][Lessons PHOTOSHOP]
Наложение текстуры на части тела, спецэффект (7)
[19.09.2011][Veb DeSiGn]
Шаблон флеш сайта #27090 (0)
[28.09.2011][PSD-files, исходники]
Шаблон digital world PSD825 (1)
[18.07.2013][DesiGn bLOg]
Креативная Японская техно-гжель (0)
[01.09.2013][Lessons PHOTOSHOP]
Рисуем потрет Натана (0)
[20.09.2011][Lessons Adobe Illustrator]
Крутой дизайн для скейтборда с узором из черепов (1)
[27.10.2010][Veb DeSiGn]
Шаблоны сайтов TemplatesBox PFE070, PFE071, PFE065, PFE063, PFE060 (0)
[22.09.2011][PSD-files, исходники]
WEB ELEMENTS psd (0)
[13.02.2015][video futage]
VideoHive - Futuristic Logo Reveal 8351362 (0)

Статистика


Онлайн всего: 1
Гостей: 1
Пользователей: 0
Яндекс цитирования
Rambler's Top100




[31.05.2010][Lessons PHOTOSHOP]
Создание кистей для рисования волос, меха, бород, комп.графика (7)
[11.06.2010][Lessons PHOTOSHOP]
Трехмерная надпись (8)
[17.06.2010][Lessons PHOTOSHOP]
Текст охваченный огнём, Stunning Text on Wild Fire Effect (6)
[03.12.2015][DesiGN SofT]
Sentaurus TCAD 2012 SP2 G-2012.06 SP2 на VMWare (1)
[29.05.2010][Lessons PHOTOSHOP]
Ночной город, спецэффект (2)
[13.02.2015][video futage]
VideoHive - Futuristic Logo Reveal 8351362 (0)
[12.02.2015][video futage]
Dark Circles Logo Reveal - Project for After Effects (Videohive) (0)
[03.12.2014][Lessons PHOTOSHOP]
Видеоуроки фотошоп Композиция Шубека (0)
[30.12.2012][DesiGn bLOg]
Маленькой ёлочке холодно зимой! (0)
[24.01.2013][vectOR KLipardy]
Black Vintage Cards Vector 2 (0)
[01.09.2013][vectOR KLipardy]
Stock: Website Template (0)
[29.05.2010][Lessons PHOTOSHOP]
судорга (абстракционная фантазия) (4)
[13.12.2015][Lessons PHOTOSHOP]
Вырезание объемных предметов в фотошоп (2015) (1)
[29.05.2010][rastER KLipardy]
Stock Photo: Drops, Splashes (1)
[29.05.2010][Lessons PHOTOSHOP]
Металлические трубки и провода (2)
[10.09.2011][Veb DeSiGn]
Template Monster – 11925 – Flash Template (0)
[30.12.2012][DesiGn bLOg]
Кофейные фантазии by Tomoko Shintani (0)
[09.11.2010][Styles Photoshop]
Более 150-ти стилей WEB 2.0 (1)



Пятница
19.04.2024
14:44


Copyright artpost and semantic product zanchi 2010-2011 © 2024