Результат
Этап 1
Создаём новый документ с разрешением 1024х1110 пикселей. Это первый этап разработки шаблона.
Этап 2
Добавьте простенький светло-серый фон. Затем в левую часть шаблона добавьте небольшой блок синего цвета. Это будет первая из 3-х частей, на которые мы разделим нашу тему оформления. Добавьте эффект тени «Drop Shadow» с указанным цветом: #0f4a68.
Этап 3
Добавьте некоторый текст в качестве наполнения в шапку созданного блока, а затем добавьте белый блок с указанными деталями.
Этап 4
В только что созданный квадратный блок добавьте изображение.
Этап 5
Создайте маленький темно-синий многоугольник, а затем добавьте белую линию толщиной 1 пиксель по обе стороны многоугольника. Внесите ещё какой-нибудь текст в многоугольник, а затем добавьте простой белый текст «На главную» («Homepage») под ним.
Этап 6
Теперь нам надо сделать три отделения с одинаковым стилем текста, а также добавить 3 маленьких пиксельных пиктограммы.
Этап 7
Добавьте темно-синий многоугольник, а затем белый контур (Как показано на изображении). Далее, используя тот же стиль и текст, добавьте текст «Контакт с разработчиком» («You May Want to Contact Me»). Добавьте светло-синий квадрат и некоторые контактные данные, используя всё тот же стиль и шрифт белого цвета.
Этап 8
Добавьте такой же многоугольник с таким же контуром, а затем внесите туда текст наполнения.
Этап 9
Для последнего созданного многоугольника создайте линию разделения в 1 пиксель шириной, а затем добавьте текст «Talent» и несколько цифр (например: 1234).
Этап 10
Сделайте копию последнего многоугольника и отделений, и просто измените написанный текст со слова Talent на слово «Assets».
Этап 11
Создайте маленькую многоугольную кнопку и добавьте к ней эффект наложения градации (Gradient Overlay) с параметрами, указанными на изображении.
Этап 12
Теперь добавьте контур с цветом, отображенным на скриншоте.
Этап 13
Скопируйте многоугольную кнопку, которую вы создали в последних двух этапах, а затем добавьте какой-нибудь текст в обе кнопки.
Этап 14
Теперь, для улучшения вида области, отображенной на изображении, мы добавим 2 маленьких иконки к секциями «Assets» и «Talent».
Этап 15
Теперь вам нужно создать ещё один многоугольник с белым контуром, который бы отличался от предыдущего, т.е. здесь не нужно создавать отделения. Теперь, с помощью маленького белого шрифта, внесите текст авторского права.
Этап 16
Мы закончили 1/3 нашего шаблона. Теперь залейте серым цветом примерно 3/5 всего пространства (как показано на изображении), а затем добавьте эффект тени.
Этап 17
Продолжите, добавив маленькую серую полосу, а затем добавьте эффект наложения градации с выставленными цветами, указанными в скриншоте.
Этап 18
Добавьте темно-серую навигацию и добавьте небольшой эффект черно-белой тени.
Этап 19
Добавьте немного привлекательных пиктограмм к каждому элементу навигации.
Этап 20
Создайте (используя ручку – Pen) простую форму, которая будет использоваться для ввода текста.
Этап 21
Добавьте некоторый текст наполнения, время публикации и 2 пиктограммы + текст, который бы отличался цветом (был бы одного цвета с размещённой иконкой).
Этап 22
Создайте еще одну, более маленькую полосу, а затем примените эффект тени.
Этап 23
Добавьте контур толщиной в 1 пиксель, используйте цвет, указанный на скриншоте.
Этап 24
Добавьте некоторый серый текст в полосу, которую вы только что добавили.
Этап 25
Создайте маленький темно-синий многоугольник, а затем примените к нему эффект внутренней тени (Inner Shadow).
Этап 26
Продолжите, добавив эффект наложения градации, используя цвета, указанные в скриншоте.
Этап 27
Заключительный этап создания кнопки – примените отображенный эффект контура.
Этап 28
Добавьте немного текста, а затем добавьте эффект, отображенный на картинке.
Этап 29
Рядом с последней созданной кнопкой создайте синий квадрат.
Этап 30
Добавьте незначительный эффект наложения градации к последнему созданному квадрату.
Этап 31
Закончите его, добавив контур толщиной в 1 пиксель.
Этап 32
Для того чтобы сделать серый многоугольник привлекательнее, нам нужно добавить маленькую, но высококачественную пиктограмму.
Этап 33
Этап 34
Теперь создайте поле ввода с закругленными углами, используя параметры, отображенные на картинке, а затем добавьте векторную кнопку поиска.
Этап 35
Добавьте квадратное изображение размером 75х75 пикселей. Теперь добавьте имя автора статей, а также время, когда сообщение было опубликовано. После этих данных добавьте простой текст-наполнитель.
Этап 36
Теперь скопируйте и вставьте созданную в прошлом этапе область, и на этом мы завершили 2/3 нашего шаблона.
Беглый обзор шаблона
Посмотрите на прогресс
Этап 37
Создайте серую полосу, расположенную в верхней части боковой панели. Добавьте текст «google ads», так как здесь будет расположен рекламный баннер.
Этап 38
Создайте наложение серым цветом, а затем добавьте то же фото, имя и информацию. Теперь добавьте синий многоугольник с добавленным эффектом внутренней тени.
Этап 39
Добавьте небольшой эффект наложения градации на последний созданный многоугольник.
Этап 40
Теперь в последнем многоугольнике создайте 3 отделения и три разных иконки для каждого созданного отдела.
Этап 41
Добавьте линию белого цвета толщиной в 1 пиксель – она будет разделителем между элементами. Под линией добавьте немного текста наполнения, который подразумевает под собой какие-то данные, информацию и так далее.
Этап 42
Заканчивайте шаблон, заполнив еще 2 отделения (текстом и иконками) по примеру прошлого этапа.
