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

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

Нам понадобятся

• Заливки
• Социальные иконки
• Иллюстрации

Шаг 1: Создание документа

Создайте новый документ  размером 1400px на 1750px в  Photoshop.

Включите линейки и направляющие, если они не включены.

• Линейки: Ctrl + R
• Направляющие: Ctrl + ;

Также нам пригодится информационная панель ( Info  Panel), когда мы будем измерять что-то линейками, чтобы видеть все значения . Перейдите в Окна-Информация (Windows – Info), чтобы открыть её.

Ширина сайта будет 960px. Создадим первую вертикальную направляющую, для этого нажмите Вид-Новая направляющая ( View – New Guide),  и установите значение 220px. Добавим ещё одну вертикальную направляющую со значением 1180px

Шаг 2: Создание фона

Залейте  фон цветом #d8e4d6.  Загрузите текстуру.  Теперь выберите Инструмент «Заливка» (Paint Bucket Tool(G))  и установите вид заливки узор (Pattern).

Выберите заливку как на рисунке. Создайте новый слой над слоем с фоном и заполните его заливкой и  установите режим наложения слоя Мягкий свет  (Soft Light).

При помощи Инструмента  "Прямоугольник" (Rectangle Tool(U))  создайте новое выделение размером 100% на  330px , заполните его цветом #23353e.  Расположите его в  самом верху страницы.

Добавьте стили: 

• Обводка (Stroke): #1a272e

Внешняя тень (Drop Shadow): #fff

Перейдите в Фильтры-Преобразовать для смарт-фильтров ( Filter – Convert for Smart Filters),  затем снова в Фильтры-Шум-Добавить Шум  (Filter – Noise- Add Noise), чтобы добавить шум.

Шаг 3: Создаём хедер

Хедер включает в себя лого и навигацию. Обязательно дайте названия слоям и рассортируйте их по группам.

Сначала сделаем заливку. Создайте новый документ 15px на 15px с прозрачным фоном. Используя Инструмент «Карандаш»( Pencil Tool (B) ) нарисуйте цветом #1a272e форму как на рисунке.

Перейдите в меню Редактирование – Определить узор (Edit – Define Pattern)  и сохраните узор под названием zigzag. Выберите Инструмент «Прямоугольник» ( Rectangle Tool (U)) размером 100% на 20px, создайте прямоугольную область, расположите  её вверху и заполните только что созданным узором.

Используя Инструмент "Прямоугольная область« (Rectangular Marquee Tool (M)), создайте выделение 100% на 15px  и заполните его заливкой, которую мы создали при помощи инструмента „Заливка“  Paint Bucket Tool (G).

Добавьте стили 

• Внешняя тень (Drop Shadow): #fff

Получим такой результат:

Логотип

Для логотипа будем использовать шрифт Lobster Two, Вы можете найти его на Google Fonts.  Выберите Инструмент Текст (Text Tool(T)), установите  размер шрифта 36pt и цвет#fff.

Добавьте стили 

• Внешняя тень (Drop Shadow): #000

Навигация

Для создания навигации будет использовать шрифт  Museo, который Вы также сможете найти на  Google Fonts.  Выберите Инструмент „Текст“ (Text Tool (T)), шрифт  Museo 700  размером 16pt и  цветами  #fff и #67b256 и добавьте ссылки для навигации ( home, portfolio, blog, contact).

Шаг 4: Создаём слайдшоу

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

Миниатюры изображений

Создадим слой для миниатюр изображений. Выберите Инструмент „Прямоугольник“ ( Rectangle Tool(U))  размером 960px на 300px .

Добавьте стили 

• Обводка (Stroke): #fff

Теперь нужно добавить тень для создания эффекта объёма. Для этого нарисуйте форму , используя инструмент „Перо“ (Pen Tool(P))  как показано на рисунке ниже.

Заполните эту форму чёрным цветом #000. Выберите  Фильтры-Размытие-Размытие по Гауссу  (Filter – Blur – Gaussian Blur).

Снова выберите Выберите  Фильтры-Размытие-Размытие в Движении( Filter – Blur – Motion Blur).

Установите прозрачность 50%.

Описание

Выберите Text Tool(T)  и добавьте текст как показано на рисунке ниже.

Переключатели

Чтобы создать правую и левую стрелку используйте Инструмент «Прямоугольная Область» ( Rounded Rectangle Tool(U)) с радиусом 10px. Создайте формы, как на рисунке ниже:

Соедините эти две формы и сделайте им  размер 13px на 21px.

Добавьте стили 

• Внешняя тень (Drop Shadow): #fff

• Внутреняя тень( Inner Shadow): #000

Перерытие цветом ( Color Overlay): #cce7df

Копируйте стрелку и отразите её по вертикали.  Изменитe  цвет   Color Overlay на #fff  и разместите её так, как показано на рисунке.

Теперь у нас есть левая и правая стрелка. Теперь выберите Инструмент « Эллипс" (Ellipse Tool) размером 19px by 19px и цветом #cce7df.  Добавьте стили Внутренняя тень (Inner Shadow) и Внешняя тень ( Drop Shadow) такие же, как у стрелок.

Создайте круглое выделение Ctrl + Click .  Перейдите в Выбрать — Модификация- Сжатие (Select – Modify – Contract). Уменьшите на  5px и заполните #fff.

Добавим стили 

• Внешняя тень Drop Shadow: #000

Сгруппируйте круги, которые мы только что создали и копируйте группу  2 раза. У одного круга установите цвет #67b256.

Шаг 5: Добавим текст

Давайте сделаем новую заливку. Создадим документ 20px на 20px с прозрачным фоном . Используя Инструмент Карандаш ( Pencil Tool(B) )цветом #9b9b9b создайте форму, как показано на рисунке ниже.

Назовите как-нибудь заливку. Создайте новое выделение 960px на 20px и заполните его только что созданной заливкой. Дублируйте слой и измените у копии  Color Overlay на  #fff.

Используя Инструмент «Текст« (Text Tool(T)) создадим такой текст.  Добавьте тексту тень #fff.

Создайте новое выделение размером 40px под текстом и создайте пунктирные линии  так, как мы делали ранее . Вырежите  участок посередине. У Вас должно получится как на рисунке ниже.

Теперь откройте Инструмент „Форма“  ( Shape Tool(U))  и выберите такую же форму, как на рисунке ниже .

Добавьте форме такой же цвет и тень, как у пунктирных линий.

Шаг 6: Описание услуг

В этом разделе добавим информацию о услугах  и создадим кнопку читать далее (read more). Эта секция состоит из 3-х колонок, по  300px каждая, расстояние между ними будет 30px.  Добавьте направляющие.

Теперь выберите Инструмент «Текст» ( Text Tool(T) ) и добавьте заголовки и описание, как показано на рисунке ниже.

Выберите Инструмент «Прямоугольник со скругленными углами" (  Rounded Rectangle Tool (U)) с  радиусом 3px,  цветом #67b256. Создайте кнопку размером 90px на 25px.

Добавьте стили 

• Внутреняя тень (Inner Shadow): #fff

• Обводка (Stroke): #fff

Получим следующий результат:

Продублируйте два раза то, что получилось:

Шаг 7: Примеры работ

В этом разделе мы разместим  примеры работ. Используя Инструмент «Текст« (Text Tool(T)), добавьте текст размером  60px под кнопкой читать далее (read more).

Выберите Инструмент «Прямоугольник» (Rectangle Tool(U)) и создайте слой для этих изображения размером  300px на 150px. Разместите его на  30px ниже хедера.

Добавьте стили 

• Внешнее свечение (Outer Glow): #000

Обводка (Stroke): #fff

Продублируйте слой дважды и разместите как на рисунке.

Step 8: Делаем отдел для отзывов

Создайтe форму 90px на 90px белого цвета (#fff) используя Инструмент «Прямоугольник« (Rectangle Tool(U)). Добавьте  внешнее свечение, с такими же параметрами, как ранее . Расположите, как показано на рисунке.

Добавьте текст и ссылки на сайт используя Инструмент «Текст»  Text Tool(T)  с параметрами, которые указаны ниже.

Шаг 9: Создаём футер

Футер будет содержать 4 раздела (обо мне, последние новости, последние публикации на «Твиттере" и   правовая информация). Сначала создадим основной слой, сделайте всё так же, как в случае с хедером. Используя Инструмент «Прямоугольник"  (Rectangle Tool)  цветом #23353e, поместите секцию 80px ниже секции с отзывами. Затем перейдите в Фильтры-Преобразовать в  смарт-фильтры ( Filter – Convert for smart filters) , после в  Фильтры- Шум-Добавить Шум и установите значение 0,5% ( Filter – Noise – Add noise 0.5%).

Создайте выделение используя  Инструмент  «Прямоугольная область"  (Rectangle Marquee Tool(M)) и заполните его заливкой zigzag. Отразите его по вертикали, чтобы получился следующий результат.

Секция футера будет разделена на 3 колонки. 1-ая колонка для раздела обо мне (about), 2-я для последних новостей (latest news), и 3-я  — для последних публикаций на Твиттере ( latest tweets).

Обо мне

Измените цвет заголовка на  #fff  и добавьте тень цветом  #000 и размером 1px. Для основного текста, мы будем использовать текст Droid Sans размером 13pt и цветом #a4afb4 (добавьте ему такую же тень, как у заголовка).

Создайте слой для изображения размером 130px на 160px.

Добавьте стили 

• Внешнее свечение (Outer Glow): #000

Обводка ( Stroke): #fff

Продублируйте дважды,  и  используя  Ctrl + T,  поверните одну копию немного вправо, а вторую-немного влево.

Последние новости

Параметры текст такие же, как выше .  Для даты и категории используйте цвет #667983 и размер 11pt.  Для линий  — цвета #0f161a, #37515e.

Продублируйте кнопку read more (читать далее), измените её цвет на #286065. Установите цвет текста #fff и цвет тени#0f161a.

Измените стили слоя 

• Обводка Stroke: #0f161a

Мы получим следующий результат: 

Последние публикации на «Твиттере"

У текста будут такие же параметры, как ранее . Измените  цвет ссылок на #67b256.

Копирайты

Используйте Инструмент «Прямоугольник" ( Rectangle Tool(U) )  цветом #1a272e и размером  100% на 70px, чтобы создать отдел для правовой информации и разместите его в самом низу.  Добавьте шум точно так же, как для хедера и футера.

Добавьте следующие стили 

• Внутренняя тень (Inner Shadow): #fff

Используя  Инструмент «Текст" (Text Tool(T)) , выберите шрифт Droid Sans  размером  12pt  и цветом #667983. Добавьте тень размером 1px. Поместите текст в левом углу. Скопируйте логотип  и поместите его в правом углу.

Должен получиться такой результат!

Ссылка на источник: 1stwebdesigner.com



Комментарии