Как сделать шаблон портфолио в фотошопе. Создаём дизайнерское портфолио
Пошаговые советы с картинками
1. Приступая к созданию индивидуального портфолио начальной школы своими руками необходимо, чтобы оно соответствовало требованию трех сторон: классного руководителя (школы), возможностей родителей, и конечно, нравилось самому ученику.
а) Обладая достаточным уровнем пользования графическими программами Вы можете сделать портфолио сами.
плюсы: Вы можете сделать действительно очень индивидуальное портфолио, полностью подходящее для вашего ребенка
минусы: Достаточно долгое время работы (около недели). При недостаточности технических знаний и материала готовое портфолио может очень существенно отличаться от того, что было задумано в начале.
б) Поручить создание портфолио друзьям, хорошо владеющим комьютером либо профессиональным дизайнерам или фотохудожникам.
плюсы: При достаточном везении и правильном выборе можно получить очень хороший, индивидуальный результат
минусы: Работа может быть не выполнена в срок, или не выполнена вообще. Высокая стоимость выполнения портфолио школьника профессионалом - около 5 тыс. рублей. При этом вы совершенно не застрахованы от того, что он не использует уже готовые шаблоны из интернета, дополнив вашим текстом и фото.
в) Использовать готовые шаблоны портфолио (например эти) школьника, дополнив его своими данными.
плюсы: Хороший, заранее предсказуемый профессиональный результат за короткий срок (1-2 дня).
минусы: Возможное повторение оформления порфолио в школе или классе.
2. Необходимо определить план работы над портфолио, будет ли это полностью индивидуальная работа с нуля, либо шаблон -портфолио из интернета (например по этим шаблонам)
, заполненное под конкретного ребенка и дополненное фотографиями.
3. Если вы решили изготавливать портфолио с нуля, трезво оцените свои силы. Обычно портфолио изготавливают в программе "Фотошоп" или "Corel Draw" либо в другом графическом редакторе (текстовый редактор - типа Ворд, Эксель - не подходят для работы с картинками). Если Вы никогда не работали в графических программах, лучше воспользоваться готовыми шаблонами , особенно когда время ограничено.
4. Решите, где вы будете распечатывать готовое портфолио. Если Вы планируете печатать дома на струйном принтере (что обычно выходит дороже), купите фотобумагу (ярче будет на плотной глянцевой бумаге) и подумайте над фоном (чтобы не тратить много краски следует отдать предпочтение светлым тонам, или частичной заливке). Выгоднее распечатать в специализированных фото-салонах или типографиях. В Московской области на 2014 год цена одного А4 листа составляет около 30 рублей.
5. Дизайн портфолио. Фон необходимо выбрать такого цвета, чтобы на нем были видны надписи ручкой там, где это предусмотрено. Спросите ребенка, какое портфолио он хочет. Узнайте у преподавателя, какое содержание портфолио требуют в школе а так же какое требование к оформлению портфолио. Подумайте над изюминкой портфолио,например интересная подача материала, оформление фотографиями ребенка, оригинальный стиль и т.д. Если Вы используете картинки из интернета, сразу соберите их в одну папку и проверьте их качество. Часто бывает так, что картинок, необходимых для оформления выбранной темы портфолио не хватает.
ПОШАГОВЫЙ МАСТЕР-КЛАСС САМОСТОЯТЕЛЬНОГО ОФОРМЛЕНИЯ ДЕТСКОГО ПОРТФОЛИО С "НУЛЯ" В ПРОГРАММЕ ФОТОШОП.
6.Например, мы решили оформить портфолио в стиле волшебной детской сказки, используя фотографии ребенка, необычную текстовую подачу и при этом, портфолио будет соответствовать требованиям по содержанию
7. Создавать портфолио мы решили в популярной программе фотошоп (подходит любая версия). Предположим, что портфолио мы будем печатать дома, поэтому выбираем легкие, пастельные цвета заливки
8. Открываем программу фотошоп, создаем файл --- новый --- набор: международный формат бумаги A4--- разрешение 300 dpi
9. Создаем фон на белом листе бумаги А4, разрешением 300 dpi, используя либо заливку цветом (инструмент заливки выделен красным кружком. В нашем случае мы "перетащили" на заготовку готовый фон из скрап набора "детство" и немного его подредактировали. Фон нам нужен не очень яркий, тобы его можно было напечатать на домашнем струйном принтере (для лазерного/цифрового принтера данный фон очень бледный) не затрачивая много краски и чтобы текст на нём легко читался. Готовый фон, который у нас получился можно скачать
Набор подходящих фонов (в архиве rar)
10. Добавляем мелкие элементы оформления портфолио. Мы использовали готовый png скрап-набор. Если готового клипарта на прозрачном фоне не оказалось, открываем картинки в джепеге и вырезаем из с помощью инструмента "Лассо" (выделено красным) а затем перетаскиваем на фон. Пример готовых использованных деталей можно скачать
13. Переносим фотографию на подготовленный бланк.
14. Первый лист готов! Приятного творчества.
Как заполнить портфолио ребенка? Насущный вопрос многих родителей первоклашек и дошколят. Нельзя сказать, что портфолио ребенка — это обязательное составляющее в нашей системе образования, но во многих учебных учреждениях его требуют. Да, да буквально требуют. И казалась бы на первый взгляд, этот процесс очень сложный и не подъемный, но я помогу сделать его простым и приятным.
Меня зовут Александра Павлова , я дизайнер. Часть шаблонов на этой сайте — мои работы . Я заполняю портфолио для Вас и с радостью расскажу, как я это делаю.
Сегодня я расскажу Вам как вставить фотографию в любую страничку шаблона портфолио. Делать мы это будем в программе «Adobe Photoshop». Не бойтесь сразу, в этой программе работают тысячи человек и Вы точно справитесь. Тем более весь процесс я опишу детально и просто.
Давайте начнем заполнение портфолио.
Выбираем в папке с портфолио (как разархивировать файлы портфолио) нужную страничку. В примере это будет файл странички «титульный», нажимаем на файл правой кнопкой мыши (далее ПКМ), выбираем команду «открыть с помощью» «Adobe Photoshop»(рис.1). Если вы уже установили программу (или же она была уже установлена), то откроется программа и файл.
рис.1
Таким же образом открываем фотографию, предназначенную для заполнения титульной страницы.
1. Нам нужно скопировать фотографию на файл портфолио.
рис.2
Слева находится вкладка слои.
Сейчас там отображается один слой, «ФОН». (рис.2)
Нажимаем на него ПКМ и выбираем команду «Создать дубликат слоя».(рис.3)
рис.3
В открывшемся окне, выбираем файл назначения, в который программа создаст дубликат.
В нашем случае это будет «Титульный».(рис.4)
рис.4
Переходим на файл с портфолио, ваша фотография уже оказалась там. Саму фотографию мы можем закрыть, она нам больше не понадобиться.
2. Уменьшаем, увеличиваем фотографию.
Если фотография очень большая и не подходит для рамки на страничке, нам нужно ее уменьшить. Конечно, фотография может быть и меньше, но хочу Вас предупредить, что после увеличения она станет не резкой, размоется. И портфолио с такой фотографией будет не красивое.
Выбираем инструмент «Перемещение», первый на панели инструментов (на рисунке 5 обведен желтым). Обратите внимание, у Вас должны стоять галочки, в верхней строке напротив слов АВТОВЫБОР и ПОКАЗАТЬ УПР. ЭЛЕМ, (на рисунке 5 обведены красными значками). Эти функции отвечают за то, чтобы вокруг нашей фотографии появилась рамка с управляющими элементами. С ее помощью мы будем трансформировать фотографию. Нажимаем на любой квадратик, на рамке с управляющими элементами (обведены красным), и, не отпуская левую кнопку мыши (далее ЛКМ), тащим в середину (уменьшает), наружу (увеличивает).(рис.5)
рис.5
ВНИМАНИЕ! Обязательно нажмите замочек (желтый кружок), он сохраняет пропорции фотографии и у ребеночка не деформируется лицо. Чтобы закончить трансформацию нажимаем галочку (синий квадрат).(рис.6)
рис.6
Получилось? Молодцы! Но мы видим, что наша фотография находиться над рамкой. Нам нужно поменять слои с файлом портфолио и слой с фотографией местами.
Нажимаем ЛКМ на слой с фотографией и тянем вниз. Наша фотография должна переместиться под слой с рамкой.(рис.7)
Привет всем и добро пожаловать в очередную обучающую статью, посредством которой мы научимся разрабатывать интересный шаблон веб-сайта в PSD . Сегодня мы будем работать над опрятным простеньким дизайном портфолио . Вся работа будет осуществляться в программе Photoshop. В статье также охвачены некоторые интересные техники обработки типографики, работы с цветом и отступами.
Мы будем использовать действительно светлую цветовую схему, а дизайн должен получиться в стиле настоящего минимализма.
Давайте приступим и надеемся, что по окончанию урока у вас выйдет то же самое, что и на картинке!
Кстати, через пару дней вам будет доступна статья конвертации данного шаблона из PSD в HTML, так что – будьте на связи!
Ресурсы, которые понадобятся нам в ходе разработки :
Посмотрите на результат, который должен получиться. Вы можете кликнуть по изображению, чтобы увидеть его в полном размере:
Этап 1: Разработка структуры сайта
Перед началом работы скачайте систему 960grid для упрощения расстановки линеек.
Откройте 960_download\templates\photoshop\960_grid_12_col.psd
Также нужно удостовериться в том, что наши линейки и направляющие отображены. Это можно сделать посредством нажатия клавиш:
* CTRL + R
(Отображение линеек)
* CTRL + ;
(Отображение направляющих)
CTRL + SHIFT + C поможет вам изменить размер холста.
Этап 2: Разработка заголовка
Переименуйте папку layer1 в Header, а 1 слой в header_bg (поместите всё в отдельную папку, типа Header, Navigation, Footer – это поможет вам легко ориентироваться).
Создайте новую направляющую посредством меню View > New Guide и установите позицию на 150 пикселей в горизонтальной ориентации.
Выберите инструмент создания многоугольника (Rectangular Marquee Tool – M), создайте выделение, как показано на скриншоте ниже и залейте его любым цветом.
#192028
#2a3642
Этап 3: Разработка логотипа
Создайте папку внутри папки header и назовите её logo, а далее помещайте в неё все слои, связанные с логотипом.
Создайте еще одну направляющую с позицией 50 пикселей от верхней части холста.
Теперь выберите инструмент создания текста (Text Tool – T) и внесите на холст название вашего сайта и слоган.
Название сайта: любой цвет
Слоган: #cacaca
Примените следующие параметры смешивания слоя:
Тень (Drop Shadow)
Наложение градации (Gradient Overlay)
#c5c5c5
#d7d7d7
#ffffff
У вас должно получиться нечто вроде этого:
Этап 4: Разработка навигации
Создайте папку и назовите её Navigation, а далее помещайте в неё все слои, связанные с навигационным меню.
Создайте еще одну направляющую с позицией 5 пикселей от верхней части холста.
* Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U)
* Создайте выделение слева направо относительно нашей направляющей 5 пикселей
* Залейте его цветом #02abc6
Выберите
Нам нужно создать две стадии в навигации: активное положение и положение при наведении.
Выберите ручку (Pen Tool – P). Создайте фигуру в виде стрелки, и разместите её так, как показано на скриншоте.
Теперь мы закончили разработку шапки сайта, теперь давайте перейдём к последующим пунктам.
Этап 5: Разработка области с контентом
Создайте папку и назовите её Featured_Section, а далее помещайте в неё все слои, связанные с данной областью.
Выберите инструмент создания многоугольника (Rectangular Marquee Tool – M), создайте выделение, как показано на скриншоте ниже и залейте его цветом #cccdcd .
Примените следующие параметры смешивания слоя:
Контур (Stroke)
Создайте еще один слой и назовите его middle_light. Установите уровень отображения на 50%.
Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже:
* Выберите заливку радиальной градацией (G)
* Цвет переднего плана укажите #e5e5e5
* Цвет фона укажите #ffffff
Протяните градацию от середины вплоть до правой стороны холста.
Выберите инструмент создания текста (Text Tool – T) и внесите сообщение сайта.
Теперь отройте файл Imac.psd. Разместите его так, как показано на скриншоте ниже.
Под слоем Imac создайте новый слой и назовите его Shadow.
Выберите инструмент создания выделения в форме эллипса (Elliptical Marquee Tool – U). Создайте выделение, как показано ниже на скриншоте и залейте его цветом #000000.
Помните, что пока вы удерживаете кнопку shift , вы можете создавать сразу несколько выделений.
Далее пройдите в меню Filter > Blur > Gaussian Blur.
Установите уровень отображения слоя на 50%.
Создайте папку и назовите её buttons, а затем помещайте в неё все слои, связанные с кнопками.
Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – M), и разместите его так, как показано на скриншоте ниже.
Примените следующие параметры смешивания слоя:
Наложение градации (Gradient Overlay)
#dcdcdc
#ffffff
Контур (Stroke)
Теперь выберите инструмент создания текста (Text Tool – T) и поместите текст на кнопки.
Примените следующие параметры смешивания слоя:
Тень (Drop Shadow)
Наложение градации (Gradient Overlay)
#1d1d1d
#4e4e4e
С помощью тени и наложения градации, данный эффект сделает текст якобы встроенным.
Этап 7: Разработка характеристики
Создайте папку и назовите её testimonials, а затем помещайте в неё все слои, связанные с характеристиками.
* Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U)
* Установите радиус на 10 пикселей
Примените те же опции стиля, которые мы использовали в этапе с заголовком, а затем поместите многоугольник так, как показано на скриншоте ниже.
Теперь выберите инструмент создания текста (Text Tool – T) и поместите текст характеристики.
Этап 8: Разработка кнопки «наймите меня»
Создайте папку внутри папки testimonials и назовите её hire_btn, а затем помещайте в неё все слои, связанные с кнопкой.
Выберите инструмент создания прямоугольника с закругленными углами (Rounded Rectangle Tool – U), установите радиус на 10 пикселей, а цвет на #141a20. Затем поместите многоугольник так, как показано на скриншоте ниже.
Примените следующие параметры смешивания слоя:
Тень (Drop Shadow)
CTRL+клик по слою для создания выделения.
Далее пройдите в меню Select > Modify > Contract и выставите параметр на 3 пикселя.
Создайте еще один слой и назовите его button, залейте его любым цветом.
Примените те же стили слоя и текста, как мы использовали в области с контентом.
Этап 9: Разработка основной части страницы (чем я занимаюсь, портфолио, социальные ссылки)
Создайте папку и назовите её main_area, а затем помещайте в неё все слои, связанные с основной областью веб-страницы.
Раздел «Чем я занимаюсь»
Создайте папку внутри папки main_area и назовите её What I Do.
Теперь откройте иконки, которые вы скачали, и возьмите оттуда 3 иконки, которые подойдут больше всего к разделам «Чем я занимаюсь», «Портфолио» и «Социальные ссылки».
Инструмент создания текста (Text Tool – T):
Раздел «Портфолио»
Создайте папку внутри папки main_area и назовите её my_portfolio, а затем помещайте в неё все слои, связанные с данным разделом.
Инструмент создания текста (Text Tool – T):
Примените следующие параметры смешивания слоя:
Контур (Stroke)
Раздел «Социальные ссылки»
Создайте папку внутри папки main_area и назовите её i_socialize, а затем помещайте в неё все слои, связанные с данным разделом.
Откройте социальные иконки и нужные разместите так, как показано на скриншоте.
Инструмент создания текста (Text Tool – T):
Теперь мы закончили разработку основной части веб-сайта и давайте перейдем к подвалу.
Этап 10: Разработка подвала (быстрые ссылки, последние записи в блоге, контакты)
Создайте новую папку и назовите её footer, а затем помещайте в неё все слои, связанные с подвалом.
Повторите действие, но с положением 1158 пикселей.
Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – U) и создайте выделение, как показано на скриншоте ниже. Залейте его любым цветом.
#2a3642
#192028
Выберите параметр обратного направления (Reverse)
Контур (Stroke)
«Быстрые ссылки»
Создайте еще одну папку внутри папки footer и назовите её Quick Links.
Инструмент создания текста (Text Tool – T):
«Последние записи в блоге»
Создайте еще одну папку внутри папки footer и назовите её Latest_blog.
Инструмент создания текста (Text Tool – T):
«Контакты»
Создайте еще одну папку внутри папки footer и назовите её Contact_me.
Откройте социальные иконки и возьмите иконки электронной почты и rss.
Инструмент создания текста (Text Tool – T):
* Заголовок: #ffffff
* Абзац: #cacaca
* Ссылки: #0cb0ca
Последнее, что нам осталось – добавить копирайт.
Инструмент создания текста (Text Tool – T) и шрифт Arial 11pt
Итак, мы закончили! Надеемся, вы что-нибудь извлечете из нашей сегодняшней статьи, а также искренне надеемся, что она понравилась вам.
Спасибо за внимание!
Результат
Кстати, совсем скоро мы опубликуем обучающую статью относительно того, как конвертировать этот шаблон из формата PSD в HTML, так что следите за новостями!
Поставив перед собой цель оформить портфолио своими руками, вы столкнетесь с необходимостью использования графических редакторов – фотошоп, гимп и других. Не все знают, как работать с этими программами, эта проблема и побудила меня на написание данной статьи.
Наверное, не стоит упоминать, что при работе нужно учитывать требования школы, и при этом создать документацию, которая бы понравилась и самому школьнику (дошкольнику).
Получив готовый шаблон, вы можете оформить его для своего ребенка самостоятельно. Для этого вам достаточно будет информации, которую я изложу ниже.
Конечно, если вы впервые работаете с графическими редакторами – понадобится время и терпение, чтобы закончить работу. К тому же конечный результат может несколько отличаться от задуманного вначале, но зато у вас есть возможность своими руками создать для своего ребенка портфолио, которое будет отражать его индивидуальность.
Готовые шаблоны конечно несколько ограничивают индивидуальный подход, тем не менее и из них можно сделать неповторимую работу, к тому же это займет у вас гораздо меньше времени и сил, чем создание портфолио с нуля.
Прежде чем начать, обязательно поинтересуйтесь у преподавателя содержанием портфолио. После этого выберите шаблон с которым вы будете работать.
Итак, давайте разберемся…
Как сделать портфолио своими руками
Для работы возьмем шаблон «Морские просторы» вот
С любым другим шаблоном можно работать аналогично. Использую для примера заполнение титульного листа
1. Открываем титульный лист в программе фотошоп. Открываем фотографию, которую вы собираетесь на нем разместить. Удобнее всего, когда вы видите перед собой сразу и фото и лист, с которым работаете. Выбираем в фотошопе инструмент «перемещение» (выделен красным кружком), щелкаем левой кнопкой мышки по фотографии и не отпуская кнопку мышки, перетаскиваем фото на шаблон (смотрите 1 и 2 изображение, кликните на фото, чтобы увеличить).
У вас должно получиться также. Чтобы фото оказалось внутри рамки нам нужно переместить его под нее. Для этого щелкаем левой кнопкой мышки на первый слой (выделен красным кружком), и удерживая нажатие, перетаскиваем этот слой под слой с титульным листом. Должно получиться вот так:
Фотографию под рамкой можно передвигать, чтобы добиться ее наиболее удачного расположения.
Может случиться так, что фото не будет соответствовать размеру рамки. Чтобы исправить такую ситуацию, в графическом редакторе фотошоп есть инструменты масштабирования. Я пользуюсь вот таким простым приемом:
Чтобы увеличить или уменьшить фотографию, проверьте, чтобы именно ее слой оказался активен, а потом нажмите сочетание клавиш Ctrl + T. Или найдите в меню «Правка» функцию «Свободное Преобразование» и выберите ее. Затем, удерживая нажатой кнопку «Shift» на клавиатуре, потяните фото за уголок в сторону увеличения или уменьшения. Не забывайте про «Shift», иначе изображение будет искажено.
2. Итак мы вставили фото. Теперь нам нужно вставить текст. В данном случае – подписать титульный лист. Для этого в графическом редакторе выбираем инструмент «Текст» (выделенный красным), встаем курсором мыши на строки шаблона и пишем фамилию, имя и отчество ученика. В данном случае я использую шрифт Times New Roman курсив. Цвет и шрифт можно выбрать любой. Проследите за правильным расположением слоев — это важно, чтобы текст был виден он должен находится выше слоя с титульным листом.
После того, как лист готов, не забудьте сохранить его в формате jpg – именно этот формат нужен для распечатки листов.
Если при заполнении портфолио возникла необходимость установить новый шрифт в фотошоп, как это сделать, читайте .
Таким образом, можно заполнить все листы готового шаблона портфолио. Если остались вопросы – оставьте их в комментарии, я обязательно отвечу.
Распечатать готовое портфолио для школьника (дошкольника) можно дома на цветном принтере. Для этого лучше использовать фотобумагу. Однако самый оптимальный вариант — заказать печать в фото-салоне или в типографии – это будет и качественнее и по цене выгоднее.
Для тех, кто не очень хочет тратить время на поход в фото-салон, будет полезен сервис Netprint , где выбрав подходящий формат А4, вы сможете заказать печать портфолио, и дождаться готовые листы по почте или забрать их в ближайшем к вам пункте выдачи.
Шаблоны, которые вы найдете на сайте сайт вам не придется проверять на качество, поскольку их разрешение и формат идеально подходят для печати на листах А4.
В этой статье я покажу вам, как создать простое и понятное портфолио для демонстрации своих работ. Я буду использовать основные инструменты и методы Photoshop , чтобы получить профессионально выглядящий и оптимально структурированный макет.
Окончательное изображение
Программное обеспечение: Photoshop CS3 и выше.
Ресурсы
- Бесплатный шрифт Montserrat
Шаг 1
Давайте для начала создадим в Photoshop новый документ. Нажмите CMD/CTRL+N и установите для документа ширину 1400 пикселей, высоту 1630 пикселей:
Теперь давайте создадим направляющие, чтобы наш макет был идеально выровнен. Перейдите в Вид> Новая направляющая и задайте следующие вертикальные направляющие: 200 пикселей, 450 пикселей, 700 пикселей, 950 пикселей и 1200 пикселей:
Шаг 2
После того, как мы установили направляющие, можно приступать к разработке макета. Создайте новую группу слоев под названием Top Nav . Для этого перейдите в Слой> Новый> Группа или просто нажмите иконку быстрого создания группы в нижней части палитры слоев:
Выберите инструмент «Горизонтальный текст » (T ), используйте шрифт Montserrat , размер шрифта — 20 пикселей, цвет — голубой #075dfb и введите заголовок своего портфолио. Поместите надпись сразу за первой вертикальной направляющей, оставив небольшое свободное пространство сверху — в моем случае это 40 пикселей:
После этого продублируйте слой (CMD / CTRL + J ) и переместите копию в правую часть документа. Используя тот же инструмент, введите надписи, чтобы они представляли ссылки на разделы портфолио. На рисунке ниже показано, как этот сделал я:
Шаг 3
Сверните группу Top Nav , нажав на иконку стрелки рядом с названием группы, и создайте новую группу под названием Featured .
Перейдите в Слой> Новый> Группа или просто нажмите иконку быстрого создания группы в нижней части палитры слоев. После этого выберите инструмент «Прямоугольник » (U ) и нарисуйте между первой и последней направляющей прямоугольник размером 1000 на 574 пикселей. С помощью инструмента «Перемещение » (V ) переместите эту фигуру на 40 пикселей ниже ссылок навигации, чтобы между элементами было достаточно свободного пространства, и они выглядели аккуратно:
Теперь нам нужно заполнить прямоугольник. Для этого я использовал одно из своих фото . Подберите изображение, которое вы хотите использовать для фона портфолио и перетащите его в Photoshop . Убедитесь, что оно достаточно велико, чтобы заполнить все пространство прямоугольника без масштабирования.
После того, как вы перетащили изображение в Photoshop , поместите его выше слоя прямоугольника и, удерживая нажатой клавишу Alt , кликните на миниатюре слоя изображения. В результате должна появиться иконка стрелки вниз. Нажмите на нее, чтобы создать обтравочную маску. Все, что находится внутри обтравочной маски, будет помещено в прямоугольник:
Отлично! Теперь нам нужно немного затемнить изображение, чтобы текст на нем легко читался.
Создайте новый слой под названием Shadow и добавьте маску, как мы делали чуть раньше. После этого выберите инструмент «Градиент » (G ) и задайте переход градиента от черного к прозрачному. Задайте для параметров градиента значения, приведенные на рисунке ниже:
После этого, удерживая нажатой клавишу SHIFT , прочертите мышью линию от нижней части изображения к верхней, и уменьшите непрозрачность слоя до 65%:
Нам нужно создать заголовок для только что созданной области. Выберите инструмент «Горизонтальный текст » (T ), снова используйте шрифт Montserrat . Установите размер шрифта 40 пикселей, цвет #FFFFFF и введите текст, который, описывает спектр предлагаемых вами услуг (3-5 слов ).
Не забудьте оставить немного свободного пространства вокруг текста, чтобы он выглядел аккуратно. Чтобы следовать общим принципам разработки дизайна, слева и снизу я оставил свободное пространство шириной в 40 пикселей:
Теперь нам нужно создать кнопку призыва к действию, чтобы предложить посетителю подробнее вникнуть в суть предлагаемых услуг. Выберите инструмент «Прямоугольник » (T ) и нарисуйте прямоугольник с размерами 212 на 46 пикселей.
Поместите его справа от изображения, оставив с каждой стороны прямоугольника по 40 пикселей свободного пространства (снизу у нас будет отступ 30 пикселей, так как нам нужно выровнять кнопку по горизонтали с заголовком ):
Снова выберите инструмент «Горизонтальный текст » (T ), установите цвет шрифта черный — #000000 , размер — 14 пикселей и введите подпись для кнопки. Поместите текст внутрь белого прямоугольника и отцентрируйте его:
Шаг 4
Теперь добавим несколько примеров работ, чтобы посетители могли получить представление о вашем стиле. Сверните группу Featured (нажав на иконку стрелки рядом с названием группы ) и создайте новую группу под названием Work .
Для раздела примеров работ я использовал несколько своих фото. Перетащите снимки в Photoshop и преобразуйте их в смарт-объекты, нажав правой кнопкой мыши на изображении и выбрав пункт «Преобразовать в смарт-объект ». После этого нажмите CMD/Ctrl + T , чтобы изменить размер изображений.
Задайте для снимков размер 313 на 235 пикселей и разместите их в три колонки по два снимка в каждой. Оставьте отступ 40 пикселей сверху и снизу и 30 пикселей между изображениями и по бокам:
Шаг 5
Вот и все, что касается раздела примеров работ. Сверните группу Work и создайте новую группу под названием Footer . Выберите инструмент «Прямоугольник » (U ), установите для него цвет заливки, который мы уже использовали (#075dfb ) и нарисуйте прямоугольник, охватывающий большую часть нижней секции документа. Это будет фон подвала.
После этого с помощью инструмента «Перемещение » (V ) переместите прямоугольник на 40 пикселей ниже примеров работ:
Теперь нам нужно добавить контент для подвала. Выберите инструмент «Горизонтальный текст » (T ), установите цвет шрифта — #FFFFFF , размер — 16 пикселей и напишите заглавными буквами БЛОГ , а также введите надписи, которые будут представлять заголовки разделов блога. Задайте для них верхний отступ 70 пикселей, чтобы отделить эту область:
После этого добавьте еще немного информации, которая может понадобиться посетителям. Я включил сюда ссылки для связи в социальных сетях и свой электронный адрес. Убедитесь, что вы оставили достаточно свободного пространства по бокам, чтобы все выглядело аккуратно:
Также мы должны еще раз добавить кнопку с призывом к действию, чтобы снова указать посетителю, что делать дальше. Откройте группу Featured и найдите в ней слои, относящиеся к кнопке. Удерживая CMD/CTRL , отметьте мышью слои прямоугольника и текста, а затем нажмите Cmd/Ctrl + J , чтобы продублировать их. Переместите эти слои в группу Footer и поместите их выше фона.
