Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Создание Минимального дизайна сайта для портфолио (плюс бесплатный PSD!)

by
Length:LongLanguages:

Russian (Pусский) translation by Aisyah Arrafah (you can also view the original English article)

В этом учебном пособии мы собираемся создать ясный  минималистичный дизайн портфолио “Минимальный”, доступный в ThemeForest в качестве темы WordPress или HTML.  Мы также обсудим причины, по которым он работает так хорошо, и как вы можете создать вашу личную настройку из шаблона.

Проверьте конец сообщения для 3 приятных модификаций этого шаблона; исходные файлы находятся на месте!

minimal web design portfolio template tutorial

Об авторе: Curt Ziegler, также известен как Cudazi, является веб-дизайнером, специализирующимся на разработке темы WordPress с 10-летним опытом проектирования, известен благодаря ряду очень успешных продуктов и более 6000 продаж в ThemeForest!  Вы также можете найти больше его работ на cudazi.com.

Выпущенный год назад, дизайн темы Минимальная продан почти 1000 раз, и помог проложить путь для многих других минималистических шаблонов.  В этом шаблоне вы узнаете, как создать дизайн самостоятельно, но что более важно, мы также будем обсуждать, как он работает.  Как только мы закончим, мы надеемся, что вы сможете создать свою собственную версию этого элегантного профессионального дизайна, используя свой собственный стиль, шрифты и цвета!


Детали учебника

  • Программа: Adobe Photoshop
  • Сложность: Начинающий
  • Расчетное время завершения: 1 час

Шаг 1

Начните с создания нового документа в Photoshop 1020px x 1020px.  Убедитесь, что ваше разрешение установлено на 72 пк на дюйм, а ваш фон установлен на белый.  Нам нужно разблокировать фоновый слой, чтобы мы могли добавить несколько стилей слоя, щелкните правой кнопкой мыши по фону и выберите "Layer from background".  Затем вы можете переименовать слой обратно в фоновый.

minimal web design portfolio template

Шаг 2

Добавьте оттенок серого в верхней части страницы, дважды щелкнув на новом фоновом слое и выбрав Gradient Overlay из стилей слоя.  Просто помните, вы всегда можете перейти в меню Layers и выбрать стиль слоя вместо двойного щелчка по слою.

Установите opacity на 5% и используйте линейный градиент -90 градусов.

Нажмите один раз на градиент, чтобы открыть редактор градиента и настроить две точки:

  • Черный - #000000 в месте 0% (это должно быть установлено по умолчанию)
  • Белый - #FFFFFF в месте 11%
minimal web design portfolio template

Нажмите OK в градиентном редакторе и окнах стиля слоя, чтобы применить градиент к фоновому слою.  Теперь вы должны увидеть небольшое затемнение в верхней части страницы.


Шаг 3

На сайтах с очень светлым или простым фоном мне нравится добавлять элемент, позволяющий пользователю узнать, что он вернется на самую верхнюю часть страницы.  В случае использования этого дизайна это будет 3-пиксельная линия ширины области содержимого с легкой линией, простирающейся на остальную часть пути через заголовок.

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

Выберите инструмент Прямоугольника в области Vector Shapes на панели инструментов:

minimal web design portfolio template

Нарисуйте прямоугольник по всей ширине страницы 1020 пк и высотой 3 пк.  Дважды щелкните по цветному миниатюре на панели слоев, чтобы установить цвет в #DFDFDF.  Переместите прямоугольник в самую верхнюю часть страницы.


Шаг 4

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

Перейдите в меню View > New Guide...

Выберите Vertical и установите значение 40 пк.

Добавьте еще одну вертикальную направляющую на 980 пк.  Это создает область в 940 пк в центре для нашего контента.

minimal web design portfolio template

Шаг 5

Добавьте второй прямоугольник на слой выше предыдущего 940 пк в ширину и 3 пк в высоту.  Дважды щелкните по цветной миниатюре на панели слоев, чтобы установить цвет #333333.

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

minimal web design portfolio template

Шаг 6

Просто немного подчистим, чтобы все было организованным, переместите две строки заголовка в их собственную папку.

minimal web design portfolio template

Шаг 7

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

Логотип - это верхняя точка нашего дизайна с перевернутой пирамидой, куда в первую очередь падает взгляд большинства людей при посещении этой страницы, прежде чем опускаться в нижние области сайта.

Начните с создания прямоугольника шириной 222 пк на 82 пк.  Дважды щелкните по цветному миниатюре в слоях и установите цвет #333333.

Создайте второй прямоугольник 14 пк x 14 пк и поместите его в правый нижний угол предыдущего прямоугольника.  Установите цвет на #FFFFFF.  Это создаст эффект надрезанного прямоугольника без необходимости редактировать любые фигуры.

(Если вы не видите “надрез”, убедитесь, что ваш второй прямоугольник расположен над вашим первым в панели слоев)


Шаг 8

Добавьте текст внутрь созданных вами фигур.  Для этой демо-версии текст гласит: минимальный.

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

  • Шрифт: Arial
  • Размер: 42пт
  • Отслеживание: -20
  • Начертание: жирный
  • Цвет: #FFFFFF
minimal web design portfolio template

Шаг 9

Переместите все три слоя логотипа, которые вы создали, в свою собственную папку под названием Logo.  Это позволит нам намного проще разместить его на странице. 

Логотип должен быть 40 пк от нижней части строк заголовка, которые мы создали выше. Если вы помните, они были высотой 3 пк, поэтому нам нужно добавить новую горизонтальную направляющую в 43 пк.  Перейдите в меню View > New Guide и установите его горизонтально с позицией 43 пк.  Установите другую направляющую на 125 пк, которую выровняйте с нижней частью логотипа. 


Шаг 10

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


Шаг 11 

Меню создается с помощью двух горизонтальных линий и текста, расположенного на странице на 40 пк ниже нижней части логотипа. 

Добавьте горизонтальную направляющую в 165 пк, это будет верхняя часть нашего меню.  Создайте другую горизонтальную направляющую в 209 пк для выравнивания с нижней частью меню. 

Начните с создания линии, расположенной по центру между основными направляющими контента 940 пк в ширину и 1 пк в высоту.  Установите цвет на  #AFAFAF и переместите его к первой направляющей, которую мы создали выше. 

Дублируйте слой выше, перейдя в Layer > Duplicate layer.  Это создает новый слой в той же самой позиции.  Переместите этот новый слой вниз к второй направляющей, которую мы создали выше.  Теперь у нас есть контейнер для нашего меню. 


Шаг 12 

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

  • Шрифт: Arial 
  • Размер: 14пт 
  • Отслеживание: 0 
  • Начертание: жирный 
  • Цвет #AFAFAF 
minimal web design portfolio template

Добавьте ваши строки и текст меню в папку под названием Top Menu, чтобы все было организовано. 


Шаг 13 

Далее мы создадим большой рекламный текст.  Он будет на 40 пк ниже меню, для поддержания соответствующего расстояния между элементами размером 40 пк. 

Добавьте горизонтальную направляющую в 248 пк и 324 пк, которая послужит контейнером нашего большого рекламного текста.  Она может варьироваться в зависимости от вашего текста, но будет работать для примера наших двух строк текста. 

Используя инструмент Текст, добавьте следующий текст на вашу страницу: 

Добро пожаловать в онлайн-портфолио Jane B Doe, 
доктор философии, студент, дизайнер в название города, штат. 

  • Шрифт: Arial 
  • Размер: 42 пк 
  • Отслеживание: -50 
  • Высота линии: 45пт 
  • Начертание: жирный 
  • Цвет: #AFAFAF 
  • Цвет (выделено): #B86443

Центрируйте текст по вертикали и горизонтали между новыми направляющими.

minimal web design portfolio template

Поместите этот текст в папку под названием Promo Text, чтобы все было организовано. 


Шаг 14

В макете домашней страницы есть три большие истории с круглой иконкой в основном (левом) столбце.  Как вы, наверное, догадались, мы создадим их на 40 пк ниже основного промо-текста.  Вот что мы будем создавать:

minimal web design portfolio template

Шаг 15 

Сначала создадим три элемента каждой истории.  Заголовок и текст выровняем в 80 пк от направляющей слева, оставляя место для иконки истории.  Добавьте вертикальную направляющую на 120 пк.


Шаг 16 

Используя Text tool, добавьте заголовок: Узнайте больше обо мне. 

  • Шрифт: Arial 
  • Размер: 21пт
  • Отслеживание: 0 
  • Начертание: жирный 
  • Цвет: #333333

Выберите текст с помощью новой направляющей на 120 пк, созданной выше, и поместите ее на 40 пк ниже большого промо-текста. 

Давайте немного изменим ситуацию.  Не то, чтобы у меня было что-то против направляющих, но есть более быстрый способ для размещения таких элементов, как этот заголовок на 40 пк ниже текста. 

Выберите Move tool и переместите заголовок “Узнать больше обо мне” вплоть до последней строки большого текста.

Теперь удерживайте нажатой клавишу shift и четыре раза нажмите на стрелку вниз на клавиатуре, текст будет опускаться на 40 пк, 10 за каждый раз, когда вы нажимаете вниз с зажатой кнопкой shift.  (Вы можете сделать это без shift, но вам нужно будет нажать 40 раз, которые вам более, чем приятно сделать). 

minimal web design portfolio template

Шаг 17

Создайте текст истории, который немного меньше и светлее по цвету.  Выровняйте его по левой стороне с заголовком, созданным выше.  Вместо интервала 40 пк, давайте разместим его рядом примерно на 15 пк ниже заголовка.

Вставьте вертикальную направляющую на 640 пикселей, чтобы она послужила правой границой текста, удерживая его в пределах этой границы, позволяя создать место для двух столбцов в будущем. 

Вот несколько нежелательных текстов: Lorem Ipsum - это просто фиктивный текст printsdf sdsg, а tycpsum - это standdddard в формате duasdfsdsdmmy textView мой Resumen, отраслевой стандарт duasdsdffmmy.

  • Шрифт: Arial 
  • Размер: 17пт 
  • Отслеживание: 0 
  • Высота линии: 20пт 
  • Начертание: жирный 
  • Цвет: #AFAFAF
minimal web design portfolio template

Шаг 18 

Иконка немного сложнее, но по существу это только круг с формой Photoshop на слое выше. 

Используя векторные инструменты Photoshop, выберите инструмент Ellipse.  Нажмите и перетащите на страницу, удерживая shift для рисования идеального круга.  С выбранным слоем нажмите Control + T (Command+T Mac), чтобы вызвать настройки преобразования.  Установите ширину (W) и высоту (H) на 60 пк. 

minimal web design portfolio template

Дважды щелкните по миниатюре слоя, чтобы установить цвет на #333333. 


Шаг 19 

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

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

minimal web design portfolio template

minimal web design portfolio template

minimal web design portfolio template

minimal web design portfolio template

Шаг 20

На шаге выше создан фон для трех иконок, которые мы будем использовать; теперь пришло время создать настоящую иконку для размещения поверх фона. 

Первая иконка - это просто строчная “i”  со шрифтом Georgia, 49 пт, цвет #FFFFFF, но ему нужно несколько стилей слоя. 

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

minimal web design portfolio template

minimal web design portfolio template

Шаг 21

Расположите “i” в центре круга и поместите оба в папку, чтобы все было организовано. 

Переместите папку, чтобы выровнять ее по левой стороне с вертикальной направляющей размером 40 пк вместе с заголовком и текстом, созданным ранее, чтобы ваша страница выглядела так: 

minimal web design portfolio template

Разместите папку иконки, заголовок и текст в папку, такую как Home Story A, чтобы все было организовано.


Шаг 22 

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


Шаг 23 

Нарисуйте линию в 1 пк от направляющей с расстоянием от 40 пк до 640 пк между недавно созданными историями.  Линия будет иметь ширину 600 пк, высоту 1 пк и цвет #AFAFAF.  Поскольку расстояние между рассказами 40 пк, поместите строку приблизительно в 20 пк от каждой истории, за исключением последней. 

minimal web design portfolio template

Шаг 24 

На изображении выше я показываю примеры других иконок, все созданны с использованием простых включенных фигур на панели векторных форм Photoshop, используя те же эффекты слоя как описано в вышеприведенных шагах. 


Шаг 25

Для этой конструкции у нас есть вторичный столбец шириной 300 пк с желобом в 40 пк между ним и основным столбцом слева.  Давайте начнем с добавления вертикальной направляющей на 680 пк, которая поможет нам выровнять сообщения в блогах и ссылки в социальных сетях. 

minimal web design portfolio template

Шаг 26 

Начинаем на 40 пк ниже основного промо-текста, как и рассказы в главном столбце, давайте добавим заголовок в блог “widget” под названием From the Blog.  Выровняйте его с помощью вертикальной направляющей, которую мы разместили в 680 пк. 

  • Шрифт: Arial 
  • Размер: 15пт 
  • Отслеживание: 0 
  • Начертание: Жирный 
  • Цвет: #333333 

Шаг 27 

Если вам нужна иконка RSS, загрузите бесплатную иконку, установленную wefunction.com по адресу: http://wefunction.com/2008/07/function-free-icon-set/

Откалибруйте иконку на ту же высоту, что и “From the blog text”, и сдвиньте его вправо, совмещая с вертикальной направляющей в 980 пк.


Шаг 28 

Сообщения в блоге состоят из простых строк и прямоугольников, ключ сохраняет все равномерно расставленными. 

Начните с создания 1 пк ввысоту 300 пк вширину от вертикальной направляющей от 680 пк до 980 пк, цвет #C3C3C3. 

Переместите строку на 10 пк ниже заголовка виджета. 

Оставьте 1 пк пробела под линией, добавьте фон прямоугольника для заголовка сообщения, 300 пк в ширину и 28 пк в высоту с цветом #F0F0F0. 

Добавьте дату и название публикации в прямоугольник выше.

  • Шрифт: Arial 
  • Размер: 13пт 
  • Отслеживание: 0 
  • Цвет #333333
minimal web design portfolio template

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


Шаг 29

Дублируйте папку сообшения выше, чтобы создать пять отдельных сообщений.  Переместите их вниз, оставляя пространство 1 пк между ними.  Затем измените фон для каждого на #FFFFFF или удалите прямоугольник. 

Добавьте последнюю границу нижнему элементу, чтобы завершить список сообщений. 

minimal web design portfolio template

Шаг 30 

Раздел социальных медиа довольно однозначный, так как он очень понятный и простой. 

Чтобы начать, загрузите иконки из: http://webtoolkit4.me/2008/09/05/webtoolkit4me-releases-the-first-icon-set/


Шаг 31

Начиная с 40 пк под нижней частью сообщений в блоге, добавьте заголовок “Social Media”, текст такой же, как в блоге:

  • Шрифт: Arial 
  • Размер: 13пт
  • Отслеживание: 0 
  • Цвет: #333333 

Шаг 32 

Создайте новую папку для социальных иконок, она может находиться внутри другой папки, но убедитесь, что эта новая содержит только иконки. 

Установите режим наложения в папке Luminosity, это создаст нам простой черно-белый значок. 

minimal web design portfolio template

Шаг 33

Перейдите к File > Place и выберите иконку из папки иконок 32x32, загруженных выше, выберите место и как только она появится на вашем сайте, нажмите enter, чтобы зафиксировать ее на странице. 


Шаг 34

Переместите ваш первый значок на 10 пк ниже заголовка социальных сетей и выровняйте слева с помощью вертикальной направляющей на 680 пк. 

Добавьте дополнительные иконки и поместите их на расстоянии 10 пк влево. 

minimal web design portfolio template

Шаг 35

Пришло время завершить сайт с помощью нижнего колонтитула, кредитов и простого меню.  Начните с рисования линии #F0F0F0 на всем протяжении сайта 1 пк длиной, 80 пк ниже последнего элемента на странице, третьей истории в главном столбце.


Шаг 36

Затем нарисуйте прямоугольник с того же цвета #F0F0F0, чтобы заполнить все под этой линией выше 1 пк.  Переместите прямоугольник вниз, оставив промежуток в 1 пк между линией и верхней частью прямоугольника, для хорошего эффекта двойной линии.

minimal web design portfolio template

Шаг 37

Текст нижнего колонтитула сосредоточен на странице и помещен на 20 пк ниже верхней части нижнего колонтитула.  Первая строка, используемая для информации об авторских правах, выглядит следующим образом:

  • Arial
  • Размер: 13пт
  • Отслеживание: 0
  • Цвет #AFAFAF
  • Цвет: # B86443 (выделено)

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


Конечный продукт

minimal web design portfolio template

Почему он так хорошо работает 

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

  1. Логотип: Где я?
  2. Миссия: Что это значит?
  3. Навигация: Куда я могу пойти?
  4. Колонка содержания: Что я могу узнать здесь?
  5. Колонка боковой панели: Как я могу узнать больше?

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


Создайте ваши пользовательские версии!

Шаблон вроде Minimal не был бы таким интересным для использования, если бы у всех была точно такая же версия.  Брэндон, редактор сайта здесь, решил сделать пару "пользовательских вариаций" минимального шаблона, чтобы показать, насколько универсальным он может стать, не теряя при этом минималистский дух дизайна.  Проверьте их ниже:

minimal web design portfolio template
В этой версии мы используем шрифт Gotham, пунктирные линии для элементов HR и ярко-зеленый для этого свежего, мятного вкуса!
minimal web design portfolio template
В этой версии мы используем шрифт Museo, пунктирные линии для элементов HR и глубокий синий цвет акцента.
minimal web design portfolio template
В этой версии мы используем шрифт Ziggurat, пунктирные линии для элементов HR, и мы перевернули цветовую схему для темного, серьезного стиля.

Вывод

Вот и все! Я старался рассказать все как можно проще, чтобы сохранить ясный, профессиональный минимальный внешний вид.  Если вас интересуют окончательные версии HTML или WordPress, переходите к моему портфолио ThemeForest!  Спасибо за чтение, теперь оставьте несколько комментариев ниже, если вам понравилось!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.