Как заполнить портфолио ребенка? Насущный вопрос многих родителей первоклашек и дошколят. Нельзя сказать, что портфолио ребенка — это обязательное составляющее в нашей системе образования, но во многих учебных учреждениях его требуют. Да, да буквально требуют. И казалась бы на первый взгляд, этот процесс очень сложный и не подъемный, но я помогу сделать его простым и приятным.
Меня зовут Александра Павлова , я дизайнер. Часть шаблонов на этой сайте — мои работы . Я заполняю портфолио для Вас и с радостью расскажу, как я это делаю.
Сегодня я расскажу Вам как вставить фотографию в любую страничку шаблона портфолио. Делать мы это будем в программе «Adobe Photoshop». Не бойтесь сразу, в этой программе работают тысячи человек и Вы точно справитесь. Тем более весь процесс я опишу детально и просто.
Давайте начнем заполнение портфолио.
Выбираем в папке с портфолио (как разархивировать файлы портфолио) нужную страничку. В примере это будет файл странички «титульный», нажимаем на файл правой кнопкой мыши (далее ПКМ), выбираем команду «открыть с помощью» «Adobe Photoshop»(рис.1). Если вы уже установили программу (или же она была уже установлена), то откроется программа и файл.
рис.1
Таким же образом открываем фотографию, предназначенную для заполнения титульной страницы.
1. Нам нужно скопировать фотографию на файл портфолио.
рис.2
Слева находится вкладка слои.
Сейчас там отображается один слой, «ФОН». (рис.2)
Нажимаем на него ПКМ и выбираем команду «Создать дубликат слоя».(рис.3)
рис.3
В открывшемся окне, выбираем файл назначения, в который программа создаст дубликат.
В нашем случае это будет «Титульный».(рис.4)
рис.4
Переходим на файл с портфолио, ваша фотография уже оказалась там. Саму фотографию мы можем закрыть, она нам больше не понадобиться.
2. Уменьшаем, увеличиваем фотографию.
Если фотография очень большая и не подходит для рамки на страничке, нам нужно ее уменьшить. Конечно, фотография может быть и меньше, но хочу Вас предупредить, что после увеличения она станет не резкой, размоется. И портфолио с такой фотографией будет не красивое.
Выбираем инструмент «Перемещение», первый на панели инструментов (на рисунке 5 обведен желтым). Обратите внимание, у Вас должны стоять галочки, в верхней строке напротив слов АВТОВЫБОР и ПОКАЗАТЬ УПР. ЭЛЕМ, (на рисунке 5 обведены красными значками). Эти функции отвечают за то, чтобы вокруг нашей фотографии появилась рамка с управляющими элементами. С ее помощью мы будем трансформировать фотографию. Нажимаем на любой квадратик, на рамке с управляющими элементами (обведены красным), и, не отпуская левую кнопку мыши (далее ЛКМ), тащим в середину (уменьшает), наружу (увеличивает).(рис.5)
рис.5
ВНИМАНИЕ! Обязательно нажмите замочек (желтый кружок), он сохраняет пропорции фотографии и у ребеночка не деформируется лицо. Чтобы закончить трансформацию нажимаем галочку (синий квадрат).(рис.6)
рис.6
Получилось? Молодцы! Но мы видим, что наша фотография находиться над рамкой. Нам нужно поменять слои с файлом портфолио и слой с фотографией местами.
Нажимаем ЛКМ на слой с фотографией и тянем вниз. Наша фотография должна переместиться под слой с рамкой.(рис.7)
Создадим новый документ с параметрами: ширина – 1440 пикс, высота – 1500 пикс, разрешение – 72 пикс/дюйм.
Шаг 2. Создание шапки
Создадим новую группу и назовем ее Шапка . Все слои созданные в этом шаге помещаем в эту группу.
Устанавливаем вертикальные направляющие на 250 и 1190 пикс, и горизонтальную на 300 пикс. (Просмотр ® Новая направляющая ).
Создаем новый слой и называем его Шапка . С помощью инструмента Прямоугольная область создаем выделение
Установим основной цвет – 204139 и фоновой – 002931 . С помощью инструмента Градиент с настройками
Зальем выделенную область и снимем выделение (CTRL+D).
Создадим новый слой. Основной цвет - 19535a .
Выберем инструмент Кисть с параметрами
Установите кисть в середине верхней части шапки и щелкните один раз.
Поставьте горизонтальную направляющую с положением на 50 пикс. Выделите верхнюю часть и удалите ее.
Снять выделение.
Создаем новый слой. Вдоль верхней горизонтальной направляющей создаем выделение толщиной в 1 пикселей, для этого щелкнем по направляющей инструментом Область (горизонтальная строка) . Заливаем произвольным цветом.
Добавим эффект слоя Наложение градиента , нажав на кнопку и устанавливаем параметры
Должно получиться
Добавим название. Выберите инструмент Текст . Шрифт установим Impact , размер 200 пунктов . Установим к слою эффект Внешнее свечение , а Заливку слоя установим 0%.
Удерживая нажатой клавишу CTRL , щелкните по иконке текстового слоя. Создадим новый слой.
Чтобы залить текст необычной заливкой, нужно создать собственную заливку. Для этого создаем новый слой 10 на 10 пикселей, разрешение – 72 пикс/дюйм, фон – прозрачный.
Установим вертикальную и горизонтальную направляющие на 5 пикселей. С помощью инструмента Прямоугольное выделение создать выделение и залить его цветом – 012931 . Получим:
Выполним команду Редактирование ® Определить узор . Дать название узору и нажать Ок .
Перейдем в документ шаблона. Выберем инструмент Заливка . Устанавливаем параметры
И заливам выделение.
Шаг 3. Создание панели навигации
Создаем группу Навигация и размещаем в нее слои этого шага.
Поставьте горизонтальную направляющую на 370 пикс. Создайте новый слой.
Выделите область между горизонтальными направляющими и залейте ее цветом 012a31 .
Теперь добавим эффекты слоя: Тень , Наложение градиента и Обводка .
Создаем новый слой. Заливаем выделение 002931 цветом. Сжимаем на 2 пикселя. Нажимаем клавишу DELETE и задаем слою непрозрачность 30%. Получим:
Создаем еще один новый слой. Заливаем его черным цветом, сжимаем на 1 пиксель, нажимаем клавишу DELETE . Снимаем выделение. Получим:
Шаг 4. Создание кнопки
Еще создаем группу и называем ее Кнопка. Новые слои помещаем в нее.
Создаем новый слой. Выбираем инструмент Прямоугольник со скругленными углами , радиус скругления задаем 20 пикселей
Применим к слою эффекты: Внешнее свечение и Обводка .
Основной – черный , фоновый - 31b8c9 .
Создайте новый слой и нарисуйте еще одну овальную фигуру внутри прежней.
Добавим новой фигуре стили слоя: Внутреннее свечение , Обводка и Наложение градиента .
Нажав клавишу CTRL , щелкните по иконке слоя внутренней части кнопки. Создайте новый слой. Выберите инструмент Прямоугольная область и, зажав клавищу CTRL , выделите нижнюю часть кнопки. Получившееся выделение залейте белым цветом. Получим:
Уменьшаем непрозрачность до 15%. Получим:
Копируем группу Кнопка , добавляем на кнопках текст и размещаем их между горизонтальными направляющими на одинаковом расстоянии друг от друга.
Шаг 5. Создание фона
Перейдем на слой Фон . Созданным нами ранее узором зальем слой с параметрами:
Создадим область где будет размещаться наш текст. Создадим новый слой. Добавим эффекты слоя: Тень и Обводка с параметрами
Теперь можно добавить информацию о себе
Привет всем и добро пожаловать в очередную обучающую статью, посредством которой мы научимся разрабатывать интересный шаблон веб-сайта в 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, так что следите за новостями!
Финальный результат:
В этом уроке вы узнаете, как создать простое и минималистичное портфолио на основе Instagram. Мы будем использовать поразительные эффекты, чистую палитру цветов и мягкие шрифты. Сначала в уроке будет описано создание веб версии, а затем можно будет быстро адаптировать свое портфолио для мобильных устройств.
Материалы для урока
Для того чтобы следовать пунктам урока вам потребуются такие материалы (все они бесплатны):
- Фото гор с Unsplash
- Шрифт Kaushan Script с Font Squirrel
- Шрифт Lato с Font Squirrel
- Иконки социальных сетей с Iconfinder
- Фотографии с Unsplash
- Фотографии с Refe
Подготавливаем документ
Шаг 1
Начнем с создания нового документа Photoshop через меню Файл > Создать... (File > New...) используя настройки, указанные ниже. Вы можете задать любые размеры, ведь в интернете нет фиксированной ширины.
Убедитесь, что разрешение установлено на 72 пикc/дюйм .
Шаг 2
Теперь давайте добавим несколько направляющих, чтобы наш документ имел достаточно места и выглядел сбалансированным. Я не всегда использую сетку, но несколько направляющих обеспечат аккуратность и помогут определить ширину нашего сайта. Перейдите в меню Просмотр > Новая направляющая... (View > New Guide…) и создайте несколько линий. Я обычно использую 1000px для ширины сайта плюс несколько направляющих по углам, чтобы у сайта было запасное место.
Примечание: Направляющие для этого урока - вертикальная 100px , 600px и 1100px .
Совет: Вы также можете использовать Photoshop плагин GuideGuide , чтобы еще больше ускорить процесс.
Шаг 3
Согласно с Этикетом Photoshop все должно быть организовано и легкодоступно для просмотра и редактирования. Давайте создадим три группы слоев с именами Заголовок , Фотографии и Контакты . Чтобы создать группу перейдите в Слой > Новый > Группа... (Layer > New > Group…) и дайте каждой группе названия, указанные выше. Для быстрого перехода к определенной группе, просто нажмите на иконку.
Работаем над заголовком
Зона заголовка играет очень важную роль в привлечении пользователя к остальному контенту и позволяет убедиться, что он не покинет страницу, не совершив требуемого действия. Для этого портфолио мы будем использовать восхитительную фотографию гор и простое сообщение, чтобы изобразить приключение и испытание.
Шаг 1
Для начала давайте создадим фон сайта. В папке Заголовок нарисуйте прямоугольник любого цвета. В моем случае я нарисовал прямоугольник размером 1200x600px и поместил его в верхней части документа.
Теперь скачайте фотографию гор, поместите ее в Photoshop документ и разместите над слоем с прямоугольником. Переименуйте слой во что-то понятное, например IMG. После этого, удерживая нажатой кнопку Alt , подведите указатель к низу слоя IMG, пока не появится указатель со стрелкой вниз, после чего кликните левой кнопкой мыши. Вы только что создали обтравочную маску . Теперь нажмите Ctrl + T и измените размер фото под свои нужды.
Совет: удерживайте нажатой кнопку Shift , тогда трансформация будет пропорциональной.
Шаг 2
Давайте добавим несколько коррекций, чтобы сделать фотографию более живой и запоминающейся. Создайте новый слой, назовите его Тень , создайте обтравочную маску (Clipping Mask) также как в прошлом шаге с фотографией гор. После этого выберите инструмент Градиент (Gradient Tool), установите цвет градиента от черного #000000 к прозрачному . Удерживая нажатой кнопку Shift, перетяните градиент от низа изображения к его середине. Теперь уменьшите Непрозрачность (Opacity) градиента до 60% .
Обычно я использую эту технику, чтобы затемнить светлые изображения, а затем поместить наверх какой-либо белый текст.
Шаг 3
Теперь можно добавить немного больше цветов нашему заголовку, чтобы сделать его действительно классным. Создайте новый слой, назовите его Градиент , затем выберите инструмент Градиент (Gradient Tool). После этого установите цвет от пурпурного #37056b к розовому #ff01fc (можно использовать любые цвета, которые вам нравятся) и перетяните градиент с верхней левой части изображения в нижнюю правую. В итоге, уменьшите непрозрачность (Opacity) до 20% .
Шаг 4
Пора разместить логотип нашего портфолио. Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите название своего сайта, это может быть ваше имя или прозвище. Для этого урока я использовал очень стильный шрифт Kaushan Script размером 21px . Поместите свой логотип в верхней левой части документа рядом с первой вертикальной направляющей. Опустите его на 50px , чтобы придать еще большего профессионализма и чистоты.
Шаг 5
Добавим несколько социальных иконок, которые позволят посетителям сайта читать ваши аккаунты в социальных сетях. Перетяните иконки Facebook, Twitter и Instagram с Iconfinder в ваш документ, переименуйте слои, чтобы сделать их легкоузнаваемыми, затем разместите в верхнем правом углу рядом с последней вертикальной линией. После этого кликните правой кнопкой мыши по одному из слоев с иконками, выберите Параметры наложения (Blending Options...), затем примените Наложение цвета (Color Overlay), выберите белый #ffffff . То же самое сделайте с другими иконками.
Убедитесь, что между иконками достаточно места, а сами они выровнены по горизонтали с логотипом.
Шаг 6
Теперь закончим зону заголовка. У нас есть красивая картинка и много места. Давайте поместим сюда простое приветственное сообщение, чтобы пользователи могли понять, о чем сайт.
Выбрав инструмент Горизонтальный текст Lato (Black) размером 36px , напишите пару слов. В этом случае я использовал текст "HELLO! I"M JONATHAN". Сразу после него, на новой строке напишите еще что-нибудь о себе или своей работе меньшим шрифтом. Для этого урока я использовал шрифт Lato (Regular) размером в 16px . Пример текста: I love to travel all around the world and design beautiful things.
Убедитесь, что высота линии достаточна, чтобы текст мог "дышать". В итоге, поместите свой текст в середине зоны заголовка.
Работаем над зоной фотографий
В этой зоне мы поместим фотографии из Instagram, чтобы показать примеры работ, демонстрируя уровень профессионализма художника или дизайнера.
Шаг 1
Давайте поменяем фон этой зоны. Сверните папку Заголовок , кликнув на маленькую стрелку слева от имени группы, затем откройте папку Фотографии . Теперь выбрав инструмент Прямоугольник ( Rectangle Tool), нарисуйте светло-серый прямоугольник. В моем случае я использовал цвет #eeeeee , а размер прямоугольника был 1200x880px .
Шаг 2
Теперь пора добавить текст, описывающий работу. Это может быть что-нибудь вроде "Последние работы", или "LATEST PHOTOS" как в нашем примере. Текст должен быть читаемым, поэтому я использовал цвет #9b9b9b со шрифтом Lato (Bold) размером 12px . Обратите внимание, что расстояние между буквами достаточно значительное (270 ). Это используется для стилизации заголовка нашей зоны, и не будет работать для обычного текста. После того, как вы задали нужное расстояние, переместите текст на 80px вниз от картинки.
Шаг 3
Отлично! На этом этапе мы добавим несколько фотографий в наше портфолио. Создайте новую группу, назовите ее Фото . После этого вам нужно решить, сколько в каждом ряду будет фотографий. Я решил выбрать четыре, поэтому нужно провести некоторые подсчеты перед разметкой.
Ширина нашего сайта 1000px , поделим ее на 4 - получается 250px на каждое фото, но нам также необходимо оставить немного места по сторонам, пускай это будет 20px . Поэтому финальная ширина изображения будет (1000px-60px)/4=235px .
Выберите инструмент Прямоугольник (Rectangle Tool), затем, удерживая нажатой кнопку Shift, нарисуйте квадрат размерами 235x235px . После этого, выберите фотографию со своей ленты Instagram или возьмите несколько с unsplash.com и getrefe.tumblr.com , перетащите их в свой Photoshop документ и разместите над прямоугольником. Затем, удерживая нажатой кнопку Alt , создайте Обтравочную маску (Clipping Mask) и, используя Ctrl + T , измените размер картинки и разместите ее по своему желанию.
Шаг 4
Теперь можно добавить количество лайков (это сделает портфолио более социализированным) и короткое описание. Создайте новый слой, назовите его Тень , разместите над изображением, затем создайте обтравочную маску (Clipping Mask). После этого, используя инструмент Градиент (Gradient Tool) сделайте градиент от черного к прозрачному как уже было сделано в уроке. После всего этого уменьшите Непрозрачность (Opacity) до 60% .
Выберите инструмент Горизонтальный текст (Horizontal Type Tool) со шрифтом Montserrat размером 15px . Оставьте по 15px свободного места слева и внизу, чтобы текст мог "дышать", не перекрывая при этом изображение.
Затем выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте белую прямоугольную фигуру под фото. После этого снова выберите инструмент Горизонтальный текст (Horizontal Type Tool) и напишите короткое описание фотографии, использованное в Instagram, включая хештеги, а также дату на новой строчке. Шрифт для этого блока - Montserrat 12px серого #808080 цвета.
Примечание: убедитесь в соответствии отступов, если вы использовали 15px по сторонам для лайков, делайте такой же отступ для описания.
Шаг 5
Мы закончили с одним блоком фотографии, теперь пора добавить больше фото в портфолио. Сверните папку Фото и дублируйте ее нажатием Ctrl + J , или кликнув правой кнопкой мыши на папке и выбрав "Дубликат группы " (Duplicate Group). После этого продублируйте нужное количество фотографий и организуйте их в сетку. В моем случае расстояние между разными блоками фотографий 20px . Фотографии были взяты с unsplash.com и getrefe.tumblr.com .
Работаем над зоной контактов
Здесь мы поместим простое сообщение и кнопку связи вместе с информацией о копирайте.
Шаг 1
Сверните папку Фото , кликнув по маленькой стрелочке возле группы, затем откройте папку Контакты . После этого выберите инструмент Горизонтальный текст (Horizontal Type Tool) и, используя крупный шрифт, введите название секции, например "GET IN TOUCH". Дайте ему достаточно места вверху, после чего добавьте короткое описание, призывающее посетителя к действию. Я использовал цвет #565d64 вместе со шрифтом Lato (Black) размером в 36px для заголовка, а шрифт Lato (Regular) 16px я взял для описания.
Шаг 2
Теперь нужно создать кнопку, клик по которой будет выполнять определенное действие. Для этого урока мы будем использовать простую кнопку контактов. Я взял инструмент Прямоугольник (Rectangle Tool), нарисовал простую фигуру, а поверх нее поместил текст. Убедитесь, что над кнопкой достаточно места, это позволит ей выглядеть аккуратно и сбалансированно.
Шаг 3
В итоге, давайте создадим общую линию копирайта в нижней части портфолио. Перед тем, как это делать, выберите инструмент Линия (Line Tool) и нарисуйте серую #e0e0e0 горизонтальную линию толщиной 1px через весь документ, оставив около 90px места внизу. Прямо после линии размещайте информацию о копирайте. В этом случае я использовал шрифт Lato (Bold) 12px цвета #9b9b9b с промежутком между буквами 270 .
Вот и все, вы закончили работу над веб версией своего портфолио! Теперь вы узнаете, как быстро превратить веб версию в мобильную, что позволит создать отзывчивый дизайн сайта.
Работаем с мобильной версией
Шаг 1
Давайте создадим новый документ, установив разрешение на 320x2100px . Создайте три вертикальные направляющие на 20px , 150px , 300px , чтобы сориентироваться, оставив при этом немного места по краям. После этого, выберите все группы веб версии портфолио и перетяните их во вкладку нового документа.
Шаг 2
Теперь откройте папку Заголовок , найдите логотип, затем, используя инструмент Перемещение (Move Tool), перетяните его вправо до самого левого края. Оставьте логотип рядом с первой вертикальной направляющей. Затем, найдите социальные иконки и переместите их вправо.
Шаг 3
Теперь пришло время адаптировать основную часть. Выбрав инструмент Горизонтальный текст (Horizontal Type Tool) разбейте описание и уменьшите размер шрифта основного сообщения, уместив его между первой и третьей направляющими. Измените настройки высоты линии, и мы можем продолжать.
Шаг 4
Откройте группу Фото , переместите заголовок "LATEST PHOTOS" вверх, так как нам не нужно столько места в мобильном виде. Снова перейдите к группе Фото , поместите ее между двумя вертикальными направляющими. Затем откройте группу, кликните на прямоугольную фигуру-фон описания, нажмите Ctrl + D и уменьшите ее размер до 280px . То же самое сделайте с фигурами фотографий. После проделанной работы организуйте фотографии в одну колонку, не забыв выровнять их между направляющими.
Шаг 5
Наша секция с фотографиями стала намного длиннее, чем в десктопной версии, поэтому нужно отрегулировать фоны. Выберите слой с фоном блока фотографии, нажмите Ctrl + T , чтобы изменить размер, сделайте его длиннее, оставив немного места внизу.
Шаг 6
Теперь нам необходимо реорганизовать блок контактов, чтобы текст был аккуратно выровнен между направляющими. Откройте группу Контакты , затем, используя инструмент Горизонтальный текст (Horizontal Type Tool) разбейте текст в этом блоке, подогнав его под направляющие. Убедитесь, что уменьшили размер над и под элементами, так как нам не нужно много пустого места в мобильной версии. Также уменьшите высоту линии текста, чтобы сделать его вид чистым и профессиональным.
Последний штрих - разбить текст копирайта, чтобы он поместился между направляющими.
Отличная работа! Вы создали веб и мобильную версию нашего свежего портфолио, основанного на Instagram. Надеюсь, вы узнали что-нибудь новое, и полученные навыки помогут вам создавать восхитительные дизайны в будущем.
В фотошопе есть прекрасная опция "Раскладка изображения", которая хорошо подходит для создания дизайнерского портфолио. Эта команда генерирует страницы с фреймами, отведёнными под фотоснимки. Таким образом очень удобно представлять Ваши работы имеющимся или потенциальным клиентам. Эта команда недаром располагается в меню - "Файл - автоматизация", так как она помогает значительно экономить время при создании своей презентации.
В этом уроке по работе с фотошопом мы создадим от начала до конца один лист электронного фотоальбома.
Перейдём в окно настройки нашего фотоальбома - "Файл - Автоматизация - Ракладка изображения".
В открывшемся окне никаких настроек не меняем, а просто нажимаем на "Edit Layout" (Изменить (редактировать) макет).
В появившемся окне Picture Package Edit Layout (Изменить макет пакета изображений) прежде всего нажимаем на кнопку Delete All, чтобы удалить предыдущий макет, Затем в поле Name выбираем имя будущего макета, в поле Page Size выбираем его размер, ставим галочку Snap to, чтобы на поле будущего макета появилась сетка (для удобства размещения фотографий) и наконец нажимаем на Add Zone (Добавить зону).
В поле, расположенном в правой части окна, появляется фрейм, потянув за угловые маркеры которого,мы растягиваем его на всё поле.
После этого мы опять нажимаем на кнопку Add Zone (Добавить зону), опять появляется фрейм. Используя его маркеры мы устанавливаем необходимый размер и перетаскиваем на нужное место.
Чтобы каждый раз не нажимать на Add Zone (Добавить зону), щёлкните внутри первого фрейма правой кнопкой мыши и выберите Duplicate, появится второй фрейм, перетащите его на новое место, при необходимости за маркеры подрегулируйте его размеры. Если в списке выбрать Delete, то мы удалим фрейм.
Я создал шесть фреймов и расположил их как показано на скриншоте. Теперь нажимаем на кнопку Save.
Появляется окно в котором мы должны дать имя нашему фотоальбому (по умолчанию открывается папка Photoshop - Layouts). Нажимаем на кнопку "Сохранить".
Появляется основное окно, которое открывалось в самом начале, где представлен Ваш дизайн - Picture Package (Раскладка изображения). В нём устанавливаем разрешение 300 pixels/inch и снимаем галочку в поле Flatten All Layers (Объединить все слои). Щёлкаем по первому фрейму, где будет располагаться наша фотография.
В появившемся окне находим на компьютере фотографию, выделяем её и нажимаем "Открыть".
После того, как Вы разместили все свои изображения, нажмите кнопку OK.
Программа некоторое время будет работать, а потом в окне фотошопа Вы увидите почти готовый лист своей презентации.
Давайте придадим этому листу более дизайнерский вид. Во-первых, напишем что мы изобразили на нём. Выберем инструмент "Текст" (Т), установим примерно такие параметры (у Вас они будут естественно своими).
Напишем что-то подобающее нашему событию. Чтобы текст смотрелся немного получше придайте ему какой-нибудь стиль. Для этого достаточно открыть палитру "Стили" и щёлкнуть на любом подобающем стиле.
Во-вторых, наложим на нижний слой подходящий градиент, для чего сделаем его активным.
Выберем инструмент линейный "Градиент" (G), щёлкнем по стрелочке справа от поля редактирования градиента и в появившемся списке щёлкнем по подходящему по стилю градиенту.
Проведём градиентом, к примеру, слева направо. Вот что у нас получилось. (Вы можете выбрать совсем другой градиент или просто залить основной цвет какой-нибудь текстурой или цветом и т.д. и т.п., поле для творчества очень большое).
Появится окно "Стиль слоя", в котором я выбрал следующие вкладки и установил в них определённые значения (Вы, как всегда, устанавливаете что Вам по вкусу) - Тень, Внутренняя тень, Тиснение, Обводка.
Вот что у меня получилось.
Перенесём получившиеся стили слоя на остальные фотографии. Для чего щёлкаем правой кнопкой мыши по слою уже с имеющимся стилем слоя и в появившемся списке выбираем "Скопировать стиль слоя".
Выделяем все другие слои, которые ещё не имеют стиля слоя, за исключением нижнего слоя, текстового слоя и слоя, уже имеющего стли слоя. Чтобы их выделить, нажмите на один слой, потом зажмите клавишу Ctrl и щёлкайте на остальных слоях. После их выделения щёлкаем правой кнопкой мыши по выделенным слоям и в появившемся списке выбираем "Вклеить стиль слоя".
Вот так сейчас выглядит наша палитра "Слои" после перенесения на фреймы стилей слоя.
amp;lt;mce: script type=;">verflow-y: hidden; text-align: justify;">Вот так, в ходе обработки фотографии в фотошопе, мы очень быстро получили красивую презентацию какого-нибудь события или Ваших работ. С первого раза Вам покажется, что мы очень долго создавали эту презентацию, но поверьте мне - вторую и тем более третью, четвёртую и т.д. презентации Вы будете производить буквально в считанные минуты. Удачных Вам представлений своих работ!
В фотошопе есть прекрасная опция "Раскладка изображения ", которая хорошо подходит для создания дизайнерского портфолио. Эта команда генерирует страницы с фреймами, отведёнными под фотоснимки. Таким образом очень удобно представлять Ваши работы имеющимся или потенциальным клиентам. Эта команда недаром располагается в меню - "Файл - автоматизация ", так как она помогает значительно экономить время при создании своей презентации.
В этом уроке по работе с фотошопом мы создадим от начала до конца один лист электронного фотоальбома.
Другие уроки по автоматизации работы в фотошопе :
- "Облегчаем поиск фотографий на компакт-дисках"
- Создаём Web галерею в Photoshop
- "Презентация фотографий в формате PDF"
- "Работаем с командой автоматизации программы Photoshop - пакетная обработка"
Перейдём в окно настройки нашего фотоальбома - "Файл - Автоматизация - Раскладка изображения ".
В открывшемся окне никаких настроек не меняем, а просто нажимаем на "Edit Layout " (Изменить (редактировать) макет ).
В появившемся окне Picture Package Edit Layout (Изменить макет пакета изображений ) прежде всего нажимаем на кнопку Delete All , чтобы удалить предыдущий макет, затем в поле Name выбираем имя будущего макета, в поле Page Size выбираем его размер, ставим галочку Snap to , чтобы на поле будущего макета появилась сетка (для удобства размещения фотографий) и наконец нажимаем на Add Zone (Добавить зону ).
В поле, расположенном в правой части окна, появляется фрейм, потянув за угловые маркеры которого, мы растягиваем его на всё поле.
После этого мы опять нажимаем на кнопку Add Zone (Добавить зону ), опять появляется фрейм.
Используя его маркеры мы устанавливаем необходимый размер и перетаскиваем на нужное место.
Чтобы каждый раз не нажимать на Add Zone (Добавить зону ), щёлкните внутри первого фрейма правой кнопкой мыши и выберите Duplicate , появится второй фрейм, перетащите его на новое место, при необходимости за маркеры подрегулируйте его размеры. Если в списке выбрать Delete , то мы удалим фрейм.
Я создал шесть фреймов и расположил их как показано на скриншоте. Теперь нажимаем на кнопку Save .
Появляется окно в котором мы должны дать имя нашему фотоальбому (по умолчанию открывается папка Photoshop - Layouts ). Нажимаем на кнопку "Сохранить ".
Появляется основное окно, которое открывалось в самом начале, где представлен Ваш дизайн - Picture Package (Раскладка изображения ). В нём устанавливаем разрешение 300 pixels/inch и снимаем галочку в поле Flatten All Layers (Объединить все слои ). Щёлкаем по первому фрейму, где будет располагаться наша фотография.
В появившемся окне находим на компьютере нужную нам фотографию, выделяем её и нажимаем "Открыть ".
Фотография размещается в выбранном фрейме.
После того, как Вы разместили все свои изображения, нажмите кнопку OK .
Программа некоторое время будет работать, а потом в окне фотошопа Вы увидите почти готовый лист своей презентации.
Давайте придадим этому листу более дизайнерский вид. Во-первых, напишем что мы изобразили на нём. Выберем инструмент "Текст " (Т ), установим примерно такие параметры (у Вас они будут естественно своими).
Напишем что-то подобающее нашему событию. Чтобы текст смотрелся немного получше придайте ему какой-нибудь стиль. Для этого достаточно открыть палитру "Стили " и щёлкнуть на любом подобающем стиле.
Во-вторых, наложим на нижний слой подходящий градиент, для чего сделаем слой активным.
Выберем инструмент линейный "Градиент " (G ), щёлкнем по стрелочке справа от поля редактирования градиента и в появившемся списке щёлкнем по подходящему по стилю градиенту.
Проведём градиентом, к примеру, слева направо. Вот что у нас получилось. (Вы можете выбрать совсем другой градиент или просто залить основной слой какой-нибудь текстурой или цветом и т.д. и т.п., поле для творчества очень большое!).
Сделаем активным любой слой с фреймом и два раза щёлкнем по нему левой кнопкой мыши.
Появится окно "Стиль слоя ", в котором я выбрал следующие вкладки и установил в них определённые значения (Вы, как всегда, устанавливаете что Вам по вкусу) - Тень , Внутренняя тень , Тиснение , Обводка .
Вот что у меня получилось.
Перенесём получившиеся стили слоя на остальные фотографии. Для чего щёлкаем правой кнопкой мыши по слою уже с имеющимся стилем слоя и в появившемся списке выбираем "Скопировать стиль слоя ".
Выделяем все другие слои, которые ещё не имеют стиля слоя, за исключением нижнего слоя, текстового слоя и слоя, уже имеющего стили слоя. Чтобы их выделить, нажмите на один слой, потом зажмите клавишу Ctrl и щёлкайте на остальных слоях. После их выделения щёлкаем правой кнопкой мыши по выделенным слоям и в появившемся списке выбираем "Вклеить стиль слоя ".
Вот так сейчас выглядит наша палитра "Слои " после перенесения на фреймы стилей слоя.
Вот так, в ходе обработки фотографии в фотошопе , мы очень быстро получили красивую презентацию какого-нибудь события или Ваших работ. С первого раза Вам покажется, что мы очень долго создавали эту презентацию, но поверьте мне - вторую и тем более третью, четвёртую и т.д. презентации Вы будете производить буквально в считанные минуты. Удачных Вам представлений своих работ!
Чтобы получить интересные уроки на свой адрес, введите свои данные в форму подписки ниже:
