Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Дизайн портфолио


Загрузите эти файлы:
PSD файл
Иконки
Шрифт Univers Ultra Condensed
Univers Light Condensed
960 Grid System

В этом уроке мы будем использовать 960 Grid System. Загрузите и распакуйте архив. Откройте файл “960_grid_12_col.psd” (папка templates). Когда откроете файл, увидите 12 красных полос. Эту сетку мы и будем использовать. Вы можете скрыть красные полосы через иконку глаза слоя “12 Col Grid” в палитре слоёв.
В этом уроке мы будем создавать фигуры определённого размера. Перейдите в меню Окно»Инфо (Window > Info). Когда вы будете создавать фигуры, то размер будет видно. Также нам понадобятся направляющие. Чтобы их активировать, перейдите в меню Просмотр»Показать»Направляющие (View > Show > Guides).

Шаг 1: Настройте документа
Откройте файл “960_grid_12_col.psd”. Перейдите в меню Редактирование»Размер холста (Edit > Canvas Size) и настройте, как показано ниже.
Залейте фон цветом #333333. Кликните правой кнопкой на фоновом слое и выберите Преобразовать в смарт-объект (Convert to Smart Object). Примените фильтр Добавить шум (Add Noise Filter):

Дизайн портфолио


Шаг 2: Создание фона шапки сайта
Создайте новую группу и назовите её “header”. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте фигуру цветом 1200х140 пикселей цветом #30a0b8. Назовите этот слой “header bg”. Кликните правой кнопкой на нём и выберите Преобразовать в смарт-объект (Convert to Smart Object). Примените фильтр Добавить шум (Add Noise Filter):

Дизайн портфолио


Шаг 3
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру высотой 4 пикселя цветом #33b9d6. Назовите слой “top bar” и расположите его над слоем с предыдущим прямоугольником.

Дизайн портфолио


Шаг 4: Создание треугольного узора
Создайте новый документ размером 20х8 пикселей. Приблизьте изображение. Инструментом Перо (Pen Tool) нарисуйте чёрный треугольник. Скройте фоновый слой. Потом перейдите в меню Редактирование»Определить узор (Edit > Define Pattern):

Дизайн портфолио


Шаг 5: Применение узора
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 1200х10 пикселей. Установите Заливку (Fill) слоя – 0%. Назовите этот слой “top pattern”. Примените стиль Наложение узора (Layer Style - Pattern Overlay):

Дизайн портфолио


Шаг 6: Изменение цвета узора
Нужно изменить цвет треугольников и примените другие стили. Преобразуйте слой “top pattern” в смарт-объект. Примените к нему следующие стили:

Отбрасывание тени
Внутренняя тень: Режим – Мягкий свет
Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление основы, Режим тени – Умножение
Наложение цвета: #33b9d6.

Дизайн портфолио


Шаг 7: Создание копии узора
Сделайте копию слоя “top pattern”. Назовите её “bottom pattern”. Расположите её на самом верху группы “header”. Измените цвет стиля Наложение цвета на #30a0b8.

Дизайн портфолио


Шаг 8: Создание текстуры для шапки сайта
Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение верхней части. Создайте новый слой (Create New Layer) и залейте его цветом #aaaaaa. Снимите выделение (Ctrl+D) и назовите этот слой “texture”. Преобразуйте его в смарт-объект.
Нужно, чтобы текстура была применена только к области шапки сайта, но не к фону и другим элементам. Для этого сделайте выделение слоёв “header bg” и “bottom pattern” (Ctrl+Click). На слое “texture layer” перейдите в меню Слой»Слой-маска»Показать выделение (Layer > Layer Mask > Reveal Selection).
К слою “texture” примените фильтр Добавить шум (Add Noise Filter) со значением, показанным ниже. Потом примените фильтр Потом примените фильтр Потом примените фильтр Мокрая бумага (Water Paper Filter). Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light):

Дизайн портфолио


Шаг 9: Название сайта
Инструментом Горизонтальный текст (Horizontal Type Tool) напишите название сайта на левой стороне шапки. Используйте направляющие, чтобы определиться с расположением слоя. Цвет текста - #e3eef2, шрифт “Univers Ultra Condensed”. К текстовому слою примените стиль Отбрасывание тени: Режим – Линейный затемнитель.

Дизайн портфолио


Шаг 10: Создание навигационной панели
Создайте новую группу (Create New Group) и назовите её “navigation”. Текстовым инструментом напишите названия разделов белым цветом. Шрифт – “Univers Light Condensed”, размер – 18pt. Используйте направляющие, чтобы расположить правильно названия разделов. К тексту примените стиль Отбрасывание тени: Режим – Умножение.
Из набора иконок этого сайта найдите те, которые подойдут к нашему порфолио. Иконки нужно расположить над названиями разделов.

Дизайн портфолио


Шаг 11: Создание активного раздела
Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте фигуру с радиусом 2 пикселя. Расположите её под слоем одного из разделов навигации, как показано ниже. Цвет фигуры - #3895a8. Назовите этот слой “active” и примените к нему следующие стили:

Внутренняя тень: Режим – Умножение
Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление основы, Режим тени – Умножение.

Дизайн портфолио


Шаг 12: Создание диагонального узора
Создайте новый документ размером 4х4 пикселя. Приблизьте изображение и инструментом Прямоугольная область (Rectangular Marquee Tool) создайте несколько квадратных выделений (удерживайте Shift). Создайте новый слой и залейте его чёрным цветом. Снимите выделение (Ctrl+D).Скройте фоновый слой и перейдите в меню Редактирование»Определить узор (Edit > Define Pattern), сохраните узор. Можете закрыть документ.

Дизайн портфолио


Шаг 13: Создание слайдера картинок
Создайте новую группу и назовите её “slider”. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 1000х350 пикселей цветом #9eafb2. Назовите этот слой “slider border”. Примените к нему эти стили:

Внешнее свечение
Наложение узора
Обводка

Расположите прямоугольник в центре холста:

Дизайн портфолио


Шаг 14
Создайте ещё прямоугольник размером 980х330 пикселей. Цвет – белый. Назовите слой “image_holder”. Вставьте этот прямоугольник в центре предыдущего. На этой области будут показываться картинки.
Вставьте любую картинку в наш документ поверх слоя “image_holder”, кликните правой кнопкой на картинке и выберите Создать обтравочную маску (Create Clipping Mask).

Дизайн портфолио


Шаг 15: Создание стрелок
Создайте новую группу (Create New Group) и назовите её “right arrow”. Инструментом Эллипс (Ellipse Tool) создайте круг размером 45х45 пикселей цветом #33b9d6. Назовите этот слой “circle”. Напишите символ », используя текстовый инструмент. Расположите символ в центре круга. Я использовал шрифт “Univers Condensed” цветом #f4f4f4.
Сделайте копию группы “right arrow” и примените Отражение по горизонтали (Transform – Flip Horizontal). Назовите группу “left arrow” и расположите на левой стороне слайдера.

Дизайн портфолио


Шаг 16: Создание заголовка для рекламной области
Сейчас мы создадим ленту для заголовка. Создайте новую группу “headline” и инструментом Перо (Pen Tool) создайте фигуру, как показано ниже, цветом #ac1eda. Назовите этот слой “bg” и примените к нему следующие стили:

Отбрасывание тени: Режим – Умножение
Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение
Наложение градиента: Режим – Мягкий свет, Стиль – Линейный.
Наложение узора

Дизайн портфолио


Шаг 17: Добавление тени к ленточке
Создайте новый слой над слоем “bg” и назовите его “shadows”. Кликните правой кнопкой и выберите Создать обтравочную маску (Create Clipping Mask). Всё, что Вы нарисуете, не выйдет за пределы ленты.
Выберите инструмент Кисть (Brush Tool) с мягкими краями и непрозрачностью 60%. Чёрным цветом нарисуйте тени на ленте. Измените цвет на белый и обрисуйте светлые места. Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light) и Непрозрачность – 70%.

Дизайн портфолио


Шаг 18
Текстовым инструментом напишите “Featured” на ленте белым цветом. Я использовал шрифт “Univers Ultra Condensed”. Добавьте тень к тексту через стиль Отбрасывание тени (Layer Style - Drop Shadow): Режим – Мягкий свет.

Дизайн портфолио


Шаг 19
Выберите инструмент Линия (LineTool) толщиной 1 пиксель и создайте чёрную горизонтальную линию шириной 10 пикселей. Расположите эту линию в левом верхнем углу ленты. Сделайте копию линии и расположите её справа. Потом создайте ещё одну копи и расположите правее. Как Вы поняли, нужно создать пунктирную линию. Все эти слои объедините в группу “top”. Группу “top” нужно поместить ещё в одну группу “dashed lines”.
Сделайте копию группы “top” и расположите её в нижней части ленты. Назовите копию “bottom”. Установите Режим наложения группы “dashed lines” – Мягкий свет (Blending Mode – Soft Light) и Непрозрачность – 50%.

Дизайн портфолио


Шаг 20
Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение, как показано ниже. Создайте новый слой и чёрной мягкой кистью нарисуйте тень внутри выделения. Снимите выделение (Ctrl+D), назовите этот слой “Shadow” и установите Непрозрачность – 50%.

Дизайн портфолио


Шаг 21: Создание фона для контента
Создайте новую группу “content bg”. Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 1000х1670 пикселей. Преобразуйте её в смарт-объект. Потом примените фильтр Добавить шум (Add Noise Filter):

Дизайн портфолио


Шаг 22: Создание узора из белых треугольников
Создайте новый документ размером 20х10 пикселей. Приблизьте изображение и инструментом Перо (Pen Tool) нарисуйте белый треугольник, как показано ниже. Скройте фоновый слой и сохраните узор. Потом к этому треугольнику примените Отражение по вертикали (Transform – Flip Vertical) и инструментом Перемещение (Move Tool) расположите слой в нижней части холста. Сохраните это узор и закройте документ.

Дизайн портфолио


Шаг23: Применение треугольного узора
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 1000х10 пикселей в верхней части области контента. Назовите слой “top triangles”, установите Заливку (Fill) – 0%. Примените стиль Наложение узора (Layer Style - Pattern Overlay).
Сделайте копию этого слоя и расположите её в основании области контента. Назовите слой “bottom triangles” и измените узор.

Дизайн портфолио


Шаг 24: Создание области “Services”
Создайте новую группу и назовите её “Services”. Сделайте копию группы “headline” со слайдера и расположите в верхнем левом углу фона области контента. Измените цвет слоя “bg” на #da1e4a. Текстовым инструментом напишите “Services”.

Дизайн портфолио


Шаг 25: Добавление описания сервисов
Создайте новую группу “web design”. Активируйте направляющие (Ctrl+;). Инструментом Прямоугольник (Rectangle Tool) создайте фигуру размером 220х320 пикселей цветом #f4f4f4. Назовите этот слой “border” и примените к нему следующие стили:

Наложение узора
Обводка: #d4d4d4.

Дизайн портфолио


Шаг 26
Создайте ещё один прямоугольник размером 200х300 пикселей белого цвета. Назовите этот слой “image_holder”. Поместите его в середину слоя “border”. Примените 1-пиксельную обводку цветом #d4d4d4.

Дизайн портфолио


Шаг 27
Текстовым инструментом напишите текст. Ниже показаны параметры шрифта.

Дизайн портфолио


Шаг 28: Создание кнопки “Read More”
Создайте новую группу и назовите её “button”. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 4 пикселя создайте фигуру размером 140х30 пикселей цветом #ac1eda. Назовите этот слой “button”. Примените к нему эти стили:

Отбрасывание тени: Режим – Умножение
Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение.
Наложение градиента: Режим – Мягкий свет, Стиль – Линейный
Наложение узора

Дизайн портфолио


Текстовым инструментом напишите слова “Read More »” на кнопке. Цвет – белый, шрифт – “Univers Light Condensed” размером 16pt. Примените стиль Отбрасывание тени: Режим – Мягкий свет.

Дизайн портфолио


Шаг 29
Сделайте копию слоя “web design” три раза, активируйте направляющие и расположите всё, как показано ниже. Вам только остаётся изменить текст.

Дизайн портфолио


Шаг 30: Создание области “Portfolio ”
Следующие области будет легче создать, так как мы будем брать уже готовые объекты и изменять их. Создайте новую группу “portfolio”. Сделайте копию одной из групп “headline” и вставьте её в новую группу. Измените цвет слоя “bg” на #aec81e. Текстовым инструментом напишите на ленте “Portfolio”. Расстояние между области “Services” и областью “Portfolio” – 60 пикселей.

Дизайн портфолио


Теперь нужно создать рамки для картинок. Создайте новую группу “#1”. Активируйте направляющие и создайте квадрат размером 140х140 пикселей цветом #f4f4f4. Назовите этот слой “border”. Скопируйте стили с одного из предыдущих слоёв “border” на этот.
Создайте ещё один квадрат размером 120х120 пикселей белого цвета. Назовите этот слой “image_holder” и вставьте в середину слоя “border”. Примените 1-пиксельную обводку цветом #d4d4d4.
Сделайте 7 копий группы “#1” и расположите их, как показано ниже.

Дизайн портфолио


Сделайте копию группы “button” и измените цвет на #aec81e. Расположите в правом нижнем углу области “Portfolio”. Измените текст:

Дизайн портфолио


Шаг 31: Область “About”
Эту область также нужно создать при помощи дублирования предыдущих элементов и изменения цвета и текста на них. Цвет ленты - #40b1e6. Чтобы лента смотрела в другую сторону к копии нужно применить Отражение по горизонтали (Transform – Flip Horizontal).
Текст я написал шрифтом “Helvetica Regular” размером 12pt. Цвет - #515151.

Дизайн портфолио


Шаг 32: Создание области “Blog”
Добавьте ещё одну ленту в новой группе “blog”, измените её цвет на #da7b1e и напишите “Blog” на ленте. Расстояние от верхней области – 60 пикселей.

Дизайн портфолио


Создайте новую группу “post #1”. Создайте рамку для первого поста блога. Размер рамки – 220х220 пикселей. Внутренний квадрат – 200х200 пикселей. Напишите текст новости и добавьте кнопку “Read More”.

Дизайн портфолио


Сделайте копию группы первого поста и расположите её ниже. Назовите эту группу “post #2”.

Дизайн портфолио


Шаг 33: Создание сайдбара
Создайте новую группу “categories”. Текстовым инструментом напишите “Categories”. Шрифт – “Univers Ultra Condensed” размером 36pt цветом #515151.
Инструментом Линия (Line Tool) создайте линию под заголовком толщиной 1 пиксель цветом #b9b9b9.

Дизайн портфолио


Инструментом Прямоугольник (Rectangle Tool) создайте прямоугольник размером 300х5 пикселей. Расположите его под 1-пиксельной линией. Назовите этот слой “diagonal lines” и установите Заливку (Fill) слоя – 0%. Примените стиль Наложение узора:

Дизайн портфолио


Текстовым инструментом напишите список категорий. Шрифт - Helvetica Regular размером 12pt цветом #515151.
Чтобы создать маркеры списка, используйте инструмент Эллипс (Ellipse Tool). Круги должны быть размером 5х5 пикселей цветом #515151. Сделайте несколько копий кругов и расположите их слева от названий пунктов списка. Объедините все эти слои с кругами в группу “bullet points”.

Дизайн портфолио


Создайте ещё один раздел:

Дизайн портфолио


Шаг 34: Добавление разделителей между областями контента
Создайте новую группу “separators”. Инструментом Линия (Line Tool) создайте горизонтальную линию шириной 940 пикселей цветом #dbdbdb. Назовите этот слоя “1px line”. Расположите линию между областью “services”и “portfolio”.
Сделайте ещё одну копию линии и расположите её ниже.

Дизайн портфолио


Шаг 35: Футер
Создайте новую группу “footer”. Текстовым инструментом напишите текст о правах. Шрифт - Helvetica Regular размером 12pt цветом #ebebeb.

Дизайн портфолио


Финальный результат:

Дизайн портфолио


Изображение в оригинальном размере можете посмотреть здесь.



Обсудить данный урок на форуме





Ссылка на источник урока