is_реклам: BRC centre - ремонт газобаллонного оборудования в Киеве - звоните +380671345151 . Интрнет магазин Shoes-sportмужские кроссовки стоимость - (044) 498-62-06 звоните уже

пошук, категорії та ін. показати ▼

Малюємо мокап сайту-фотогалереї в Photoshop

Малюємо мокап сайту-фотогалереї в Photoshop
автор опубліковано

Фотогалерея на сайті це чудовий шанс показати відвідувачам свої фотографії і роботи. Вона ідеально підійде усім фотографам, а також тим, хто хоча гарно і надовго зберегти свої фотографії в інтернеті. Часто такі фотогалереї це повноційний персональний фотосайт, який може стати вірним помічником для пошуку нових клієнтів. На цьому уроці Ви дізнаєтеся, як створити мокап сайту-фотогалереї в Adobe Photoshop. Очікуваний час виконання — 3 години.

Якщо Ви маєте якість питання щодо цього уроку, пишіть їх у коментарях.

Результат роботи

Клікнувши на кожному зображенні в пості, Ви можете переглянути його у збільшеному вигляді.
gallerymockupresult

Крок 1

Найперше, що потрібно зробити, це створити новий документ розміром 1020px на 1200рх.
gallerymockup01

Крок 2

За допомогою інструменту Paint Bucket (Заливка) заповніть фоновий шар кольором #1F2329.

Крок 3

Використайте інструмент Rectangle Marquee (Прямокутне виділення), щоб зробити виділення як на малюнку і залийте його будь-яким кольором.
gallerymockup03

Крок 4

Створіть новий шар. Клацніть правою кнопкою миші на новоствореному шарі в палітрі Шари, встановіть наступні параметри накладання
gallerymockup4a

gallerymockup4b

gallerymockup4c

Крок 5

Для логотипу додайте деякий простий текст в лівій частині заголовку, колір: #FFFFFF. Розмістивши текст, додайте наступні параметри накладання текстовому шару
gallerymockup5

Крок 6

Ваш текст буде виглядати дещо схожий на цей
gallerymockup06

Крок 7

При бажанні можна додати піктограму до заголовку. Тут можна завантажити набір іконок. Знайдіть іконку, яку ви хотіли б використовувати, додайте ЇЇ до заголовку. Використайте той самий ефект тіні, що і для тексту на попередньому шарі
gallerymockup07

Крок 8

Додайте деякі посилання до хедеру майбутнього сайту. Використовуючи інструмент Text із шрифтом Georgia, додайте деякі пункти меню, як показано на малюнку
gallerymockup08

Крок 9

Іконку RSS можна знайти в наборі, завантаженому на кроці 7.

Крок 10

Для надання ефекту об'єму для меню сайту, намалюйте тонку лінію між посиланнями, яка розділить їх. Для цього створіть новий шар і за допомогою інструменту Rectangle Tool (Прямокутник) намалюйте прямокутник шириною 1px і заповніть його білим кольором.
gallerymockup10

Крок 11

Для цього шару встановіть наступні параметри накладання
gallerymockup11a

gallerymockup11b

gallerymockup11c

Крок 12

Продублюйте прямокутник кілька разів, і розмістіть його між усіма посиланнями. Коли закінчите, отримаєте щось на кшталт
gallerymockup12

Крок 13

Користуючись інструментом Rectangle Marquee (Прямокутне виділення), виділіть область, як зображено на малюнку і залийте її кольором #18191B
gallerymockup13

Крок 14

Користуючись інструментом Text, напишіть текст подібним до того, що на зображенні. Цей текст символізує перелік категорій на майбутньому сайті. Іконку-стрілку можна знайти в Iconic Icon Pack, завантаженому на кроці 7.
gallerymockup14

Крок 15

На цьому етапі, розпочнемо малювати слайдер. Для цього, за допомогою інструменту Rounded Rectangle (Скруглений прямокутник) з радіусом 10px та заливкою білого кольору (шістнадцятвий запис якого, звісно ж #FFFFFF), намалюйте прямокутник, схожий на наступний
gallerymockup15

Крок 16

Використайте інструмент Rounded Rectangle (Заокруглений прямокутник) з радіусом заокруглення 10px, щоб зробити прямокутник, схожий на той, що на наступному зображенні. Растерізуйте цей шар, а потім виділіть праву частину фігури і виконайте команду Правка -> Очистити, щоб видалити частину заокругленого прямокутника. Ви повинні мати щось на кшталт:
gallerymockup16

Крок 17

Для цього шару встановіть наступні параметри накладання
gallerymockup17

Крок 18

Відкрийте набір Iconic Icon Pack знову і знайдіть стрілку яка використана нижче. Помістіть її як показано на малюнку
gallerymockup18

Крок 19

Повторіть кроки 16—18 для правої сторони, і ви отримаєте щось, схоже на це
gallerymockup19

Крок 20

Залишається додати фото в нашу галерею. З допомогою інструменту Rectangle Marquee або інструменту Rectangle намалюйте прямокутник, схожий на наступний і залийте його будь-яким кольором
gallerymockup20

Крок 21

Для цього шару встановіть наступні параметри накладання
gallerymockup21a

gallerymockup21b

Крок 22

Вставте мініатюрне зображення або фото для слайдів. Залиште 5px прямокутника видимого позаду зображення. Тепер зробимо місце для назви зображення. Виділіть область, схожу на наступну і заповніть її кольором # 1F2329
gallerymockup22

Крок 23

Знизьте непрозорість цього шару до 73%, а потім встановіть наступні параметри накладання
gallerymockup23

Крок 24

Додайте текст для опису і повторіть цей процес. Ваш слайдер буде виглядати наступним чином
gallerymockup24

Крок 25

Розробимо макет області контенту. Використайте інструмент Rounded Rectangle з радіусом заокруглення 10px
gallerymockup25

Крок 26

Для мініатюр фотографій використайте ті ж параметри накладання, що і мініатюр слайдера. Єдине, що зміниться, це колір заголовку. Іконку-лайк серце візьміть з набору Iconic Icon Pack. Колір тексту #0C57C6. Для фону назви, створіть прямокутник кольору #1F2329, і знизьте непрозорість цього шару до 9%
gallerymockup26

Крок 27

Додайте нумерацію сторінок галереї та футер. Для нумерації сторінок використайте колір #FFFFFF. Активну сторінку обведемо прямокутником кольору #FC4F83. Для тексту праворуч використайте колір #6A7278. Для футеру повторіть дії, які виконувалися для категорій в кроці 14. Коли закінчите, ваш мокап головної сторінки сайту-галереї буде виглядати схожим на цей
gallerymockupresult

Автор уроку Matthew Heidenreich. Переклад та скріншоти Насті Павлюк.

схоже за тегами

Залишити коментар:

Яндекс цитирования UA TOP Bloggers