Как оформить портфолио в фотошопе своими руками. Как сделать портфолио в фотошопе пошагово


Как сделать портфолио своими руками в фотошопе, мастер класс

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

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

В данной статье я пишу о том, как заполнять готовые шаблоны портфолио, которые вы найдете на сайте portfo-leo.ru в разделе «Готовые шаблоны портфолио»

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

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

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

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

Итак, давайте разберемся…

Как сделать портфолио своими руками

Для работы возьмем шаблон «Морские просторы» вот ОТСЮДА

С любым другим шаблоном можно работать аналогично. Использую для примера заполнение титульного листа

1. Открываем титульный лист в программе фотошоп. Открываем фотографию, которую вы собираетесь на нем разместить. Удобнее всего, когда вы видите перед собой сразу и фото и лист, с которым работаете. Выбираем в фотошопе инструмент «перемещение» (выделен красным кружком), щелкаем левой кнопкой мышки по фотографии и не отпуская кнопку мышки, перетаскиваем фото на шаблон (смотрите 1 и 2 изображение, кликните на фото, чтобы увеличить).

У вас должно получиться также. Чтобы фото оказалось внутри рамки нам нужно переместить его под нее. Для этого щелкаем левой кнопкой мышки на первый слой (выделен красным кружком), и удерживая нажатие, перетаскиваем этот слой под слой с титульным листом. Должно получиться вот так:

Фотографию под рамкой можно передвигать, чтобы добиться ее наиболее удачного расположения.

Может случиться так, что фото не будет соответствовать размеру рамки. Чтобы исправить такую ситуацию, в графическом редакторе фотошоп есть инструменты масштабирования. Я пользуюсь вот таким простым приемом:

Чтобы увеличить или уменьшить фотографию, проверьте, чтобы именно ее слой оказался активен, а потом нажмите сочетание клавиш Ctrl + T. Или найдите в меню «Правка» функцию «Свободное Преобразование» и выберите ее. Затем, удерживая нажатой кнопку «Shift» на клавиатуре, потяните фото за уголок в сторону увеличения или уменьшения. Не забывайте про «Shift», иначе изображение будет искажено.

2. Итак мы вставили фото. Теперь нам нужно вставить текст. В данном случае – подписать титульный лист. Для этого в графическом редакторе выбираем инструмент «Текст» (выделенный красным), встаем курсором мыши на строки шаблона и пишем фамилию, имя и отчество ученика. В данном случае я использую шрифт Times New Roman курсив. Цвет и шрифт можно выбрать любой. Проследите за правильным расположением слоев — это важно, чтобы текст был виден он должен находится выше слоя с титульным листом.После того, как лист готов, не забудьте сохранить его в формате jpg – именно этот формат нужен для распечатки листов.

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

Таким образом, можно заполнить все листы готового шаблона портфолио. Если остались вопросы – оставьте их в комментарии, я обязательно отвечу.

Распечатать готовое портфолио для школьника (дошкольника) можно дома на цветном принтере. Для этого лучше использовать фотобумагу. Однако самый оптимальный вариант — заказать печать в фото-салоне или в типографии – это будет и качественнее и по цене выгоднее.

Для тех, кто не очень хочет тратить время на поход в фото-салон, будет полезен сервис Netprint, где выбрав подходящий формат А4, вы сможете заказать печать портфолио, и дождаться готовые листы по почте или забрать их в ближайшем к вам пункте выдачи.

Шаблоны, которые вы найдете на сайте portfo-leo.ru вам не придется проверять на качество, поскольку их разрешение и формат идеально подходят для печати на листах А4.

 

 

portfo-leo.ru

Делаем красивое портфолио в Adobe Photoshop

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

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

Нам понадобятся

Шаг 1: Создание документа

Создайте новый документ  размером 1400px на 1750px в  Photoshop.

Включите линейки и направляющие, если они не включены.

  • Линейки: Ctrl + R
  • Направляющие: Ctrl + ;

Также нам пригодится информационная панель ( Info  Panel), когда мы будем измерять что-то линейками, чтобы видеть все значения . Перейдите в Окна-Информация (Windows – Info), чтобы открыть её.

Ширина сайта будет 960px. Создадим первую вертикальную направляющую, для этого нажмите Вид-Новая направляющая ( View – New Guide),  и установите значение 220px. Добавим ещё одну вертикальную направляющую со значением 1180px

Шаг 2: Создание фона

Залейте  фон цветом #d8e4d6.  Загрузите текстуру.  Теперь выберите Инструмент «Заливка» (Paint Bucket Tool(G))  и установите вид заливки узор (Pattern).

Выберите заливку как на рисунке. Создайте новый слой над слоем с фоном и заполните его заливкой и  установите режим наложения слоя Мягкий свет  (Soft Light).

При помощи Инструмента  "Прямоугольник" (Rectangle Tool(U))  создайте новое выделение размером 100% на  330px , заполните его цветом #23353e.  Расположите его в  самом верху страницы.

Добавьте стили: 

  • Обводка (Stroke): #1a272e

Внешняя тень (Drop Shadow): #fff

Перейдите в Фильтры-Преобразовать для смарт-фильтров ( Filter – Convert for Smart Filters),  затем снова в Фильтры-Шум-Добавить Шум  (Filter – Noise- Add Noise), чтобы добавить шум.

Шаг 3: Создаём хедер

Хедер включает в себя лого и навигацию. Обязательно дайте названия слоям и рассортируйте их по группам.

Сначала сделаем заливку. Создайте новый документ 15px на 15px с прозрачным фоном. Используя Инструмент «Карандаш»( Pencil Tool (B) ) нарисуйте цветом #1a272e форму как на рисунке.

Перейдите в меню Редактирование – Определить узор (Edit – Define Pattern)  и сохраните узор под названием zigzag. Выберите Инструмент «Прямоугольник» ( Rectangle Tool (U)) размером 100% на 20px, создайте прямоугольную область, расположите  её вверху и заполните только что созданным узором.

Используя Инструмент "Прямоугольная область« (Rectangular Marquee Tool (M)), создайте выделение 100% на 15px  и заполните его заливкой, которую мы создали при помощи инструмента „Заливка“  Paint Bucket Tool (G).

Добавьте стили 

  • Внешняя тень (Drop Shadow): #fff

Получим такой результат:

Логотип

Для логотипа будем использовать шрифт Lobster Two, Вы можете найти его на Google Fonts.  Выберите Инструмент Текст (Text Tool(T)), установите  размер шрифта 36pt и цвет#fff.

Добавьте стили 

  • Внешняя тень (Drop Shadow): #000

Навигация

Для создания навигации будет использовать шрифт  Museo, который Вы также сможете найти на  Google Fonts.  Выберите Инструмент „Текст“ (Text Tool (T)), шрифт  Museo 700  размером 16pt и  цветами  #fff и #67b256 и добавьте ссылки для навигации ( home, portfolio, blog, contact).

Шаг 4: Создаём слайдшоу

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

Миниатюры изображений

Создадим слой для миниатюр изображений. Выберите Инструмент „Прямоугольник“ ( Rectangle Tool(U))  размером 960px на 300px .

Добавьте стили 

  • Обводка (Stroke): #fff

Теперь нужно добавить тень для создания эффекта объёма. Для этого нарисуйте форму , используя инструмент „Перо“ (Pen Tool(P))  как показано на рисунке ниже.

Заполните эту форму чёрным цветом #000. Выберите  Фильтры-Размытие-Размытие по Гауссу  (Filter – Blur – Gaussian Blur).

Снова выберите Выберите  Фильтры-Размытие-Размытие в Движении( Filter – Blur – Motion Blur).

Установите прозрачность 50%.

Описание

Выберите Text Tool(T)  и добавьте текст как показано на рисунке ниже.

Переключатели

Чтобы создать правую и левую стрелку используйте Инструмент «Прямоугольная Область» ( Rounded Rectangle Tool(U)) с радиусом 10px. Создайте формы, как на рисунке ниже:

Соедините эти две формы и сделайте им  размер 13px на 21px.

Добавьте стили 

  • Внешняя тень (Drop Shadow): #fff

  • Внутреняя тень( Inner Shadow): #000

Перерытие цветом ( Color Overlay): #cce7df

Копируйте стрелку и отразите её по вертикали.  Изменитe  цвет   Color Overlay на #fff  и разместите её так, как показано на рисунке.

Теперь у нас есть левая и правая стрелка. Теперь выберите Инструмент « Эллипс" (Ellipse Tool) размером 19px by 19px и цветом #cce7df.  Добавьте стили Внутренняя тень (Inner Shadow) и Внешняя тень ( Drop Shadow) такие же, как у стрелок.

Создайте круглое выделение Ctrl + Click .  Перейдите в Выбрать — Модификация- Сжатие (Select – Modify – Contract). Уменьшите на  5px и заполните #fff.

Добавим стили 

  • Внешняя тень Drop Shadow: #000

Сгруппируйте круги, которые мы только что создали и копируйте группу  2 раза. У одного круга установите цвет #67b256.

Шаг 5: Добавим текст

Давайте сделаем новую заливку. Создадим документ 20px на 20px с прозрачным фоном . Используя Инструмент Карандаш ( Pencil Tool(B) )цветом #9b9b9b создайте форму, как показано на рисунке ниже.

Назовите как-нибудь заливку. Создайте новое выделение 960px на 20px и заполните его только что созданной заливкой. Дублируйте слой и измените у копии  Color Overlay на  #fff.

Используя Инструмент «Текст« (Text Tool(T)) создадим такой текст.  Добавьте тексту тень #fff.

Создайте новое выделение размером 40px под текстом и создайте пунктирные линии  так, как мы делали ранее . Вырежите  участок посередине. У Вас должно получится как на рисунке ниже.

Теперь откройте Инструмент „Форма“  ( Shape Tool(U))  и выберите такую же форму, как на рисунке ниже .

Добавьте форме такой же цвет и тень, как у пунктирных линий.

Шаг 6: Описание услуг

В этом разделе добавим информацию о услугах  и создадим кнопку читать далее (read more). Эта секция состоит из 3-х колонок, по  300px каждая, расстояние между ними будет 30px.  Добавьте направляющие.

Теперь выберите Инструмент «Текст» ( Text Tool(T) ) и добавьте заголовки и описание, как показано на рисунке ниже.

Выберите Инструмент «Прямоугольник со скругленными углами" (  Rounded Rectangle Tool (U)) с  радиусом 3px,  цветом #67b256. Создайте кнопку размером 90px на 25px.

Добавьте стили 

  • Внутреняя тень (Inner Shadow): #fff

  • Обводка (Stroke): #fff

Получим следующий результат:

Продублируйте два раза то, что получилось:

Шаг 7: Примеры работ

В этом разделе мы разместим  примеры работ. Используя Инструмент «Текст« (Text Tool(T)), добавьте текст размером  60px под кнопкой читать далее (read more).

Выберите Инструмент «Прямоугольник» (Rectangle Tool(U)) и создайте слой для этих изображения размером  300px на 150px. Разместите его на  30px ниже хедера.

Добавьте стили 

  • Внешнее свечение (Outer Glow): #000

Обводка (Stroke): #fff

Продублируйте слой дважды и разместите как на рисунке.

Step 8: Делаем отдел для отзывов

Создайтe форму 90px на 90px белого цвета (#fff) используя Инструмент «Прямоугольник« (Rectangle Tool(U)). Добавьте  внешнее свечение, с такими же параметрами, как ранее . Расположите, как показано на рисунке.

Добавьте текст и ссылки на сайт используя Инструмент «Текст»  Text Tool(T)  с параметрами, которые указаны ниже.

Шаг 9: Создаём футер

Футер будет содержать 4 раздела (обо мне, последние новости, последние публикации на «Твиттере" и   правовая информация). Сначала создадим основной слой, сделайте всё так же, как в случае с хедером. Используя Инструмент «Прямоугольник"  (Rectangle Tool)  цветом #23353e, поместите секцию 80px ниже секции с отзывами. Затем перейдите в Фильтры-Преобразовать в  смарт-фильтры ( Filter – Convert for smart filters) , после в  Фильтры- Шум-Добавить Шум и установите значение 0,5% ( Filter – Noise – Add noise 0.5%).

Создайте выделение используя  Инструмент  «Прямоугольная область"  (Rectangle Marquee Tool(M)) и заполните его заливкой zigzag. Отразите его по вертикали, чтобы получился следующий результат.

Секция футера будет разделена на 3 колонки. 1-ая колонка для раздела обо мне (about), 2-я для последних новостей (latest news), и 3-я  — для последних публикаций на Твиттере ( latest tweets).

Обо мне

Измените цвет заголовка на  #fff  и добавьте тень цветом  #000 и размером 1px. Для основного текста, мы будем использовать текст Droid Sans размером 13pt и цветом #a4afb4 (добавьте ему такую же тень, как у заголовка).

Создайте слой для изображения размером 130px на 160px.

Добавьте стили 

  • Внешнее свечение (Outer Glow): #000

Обводка ( Stroke): #fff

Продублируйте дважды,  и  используя  Ctrl + T,  поверните одну копию немного вправо, а вторую-немного влево.

Последние новости

Параметры текст такие же, как выше .  Для даты и категории используйте цвет #667983 и размер 11pt.  Для линий  — цвета #0f161a, #37515e.

Продублируйте кнопку read more (читать далее), измените её цвет на #286065. Установите цвет текста #fff и цвет тени#0f161a.

Измените стили слоя 

  • Обводка Stroke: #0f161a

Мы получим следующий результат: 

Последние публикации на «Твиттере"

У текста будут такие же параметры, как ранее . Измените  цвет ссылок на #67b256.

Копирайты

Используйте Инструмент «Прямоугольник" ( Rectangle Tool(U) )  цветом #1a272e и размером  100% на 70px, чтобы создать отдел для правовой информации и разместите его в самом низу.  Добавьте шум точно так же, как для хедера и футера.

Добавьте следующие стили 

  • Внутренняя тень (Inner Shadow): #fff

Используя  Инструмент «Текст" (Text Tool(T)) , выберите шрифт Droid Sans  размером  12pt  и цветом #667983. Добавьте тень размером 1px. Поместите текст в левом углу. Скопируйте логотип  и поместите его в правом углу.

Должен получиться такой результат!

Ссылка на источник: 1stwebdesigner.com



Комментарии

Оставить ответ

Похожие статьи

Случайные статьи

www.dejurka.ru

Как заполнить портфолио ребенка? Вставляем фото в шаблон.

Как заполнить портфолио ребенка самостоятельно?

Как заполнить портфолио ребенка? Насущный вопрос многих родителей первоклашек и дошколят. Нельзя сказать, что портфолио ребенка – это обязательное составляющее в нашей системе образования, но во многих учебных учреждениях его требуют. Да, да буквально требуют. И казалась бы на первый взгляд, этот процесс очень сложный и не подъемный, но я помогу сделать его простым и приятным.

Меня зовут Александра Павлова, я дизайнер. Часть шаблонов на этой сайте  – мои работы. Я  заполняю портфолио для Вас и с радостью расскажу, как я это делаю.

Сегодня я расскажу Вам как вставить фотографию в любую страничку шаблона портфолио. Делать мы это будем в программе «Adobe Photoshop». Не бойтесь сразу, в этой программе работают тысячи человек и Вы точно справитесь. Тем более  весь процесс я опишу детально и просто.

Давайте начнем заполнение портфолио.

Выбираем в папке с портфолио (как разархивировать файлы портфолио)  нужную страничку. В примере это будет файл странички «титульный», нажимаем на файл правой кнопкой мыши (далее ПКМ), выбираем команду «открыть с помощью» «Adobe Photoshop»(рис.1). Если вы уже установили программу (или же она была уже установлена), то откроется программа и файл.

рис.1

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

1. Нам нужно скопировать фотографию на файл портфолио.

рис.2

Слева находится вкладка слои.Сейчас там отображается один слой, «ФОН». (рис.2)

Нажимаем на него ПКМ и выбираем команду «Создать дубликат слоя».(рис.3)

рис.3

В открывшемся окне, выбираем файл назначения, в который программа создаст дубликат.В нашем случае это будет «Титульный».(рис.4)

рис.4

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

2. Уменьшаем, увеличиваем фотографию.

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

Выбираем инструмент «Перемещение», первый на панели инструментов (на рисунке 5 обведен желтым). Обратите внимание, у Вас должны стоять галочки, в верхней строке напротив слов АВТОВЫБОР и ПОКАЗАТЬ УПР. ЭЛЕМ, (на рисунке 5 обведены красными значками). Эти функции отвечают за то, чтобы вокруг нашей фотографии появилась рамка с управляющими элементами. С ее помощью мы будем трансформировать фотографию. Нажимаем на любой квадратик, на рамке с управляющими элементами (обведены красным), и, не отпуская левую кнопку мыши (далее ЛКМ), тащим в середину (уменьшает), наружу (увеличивает).(рис.5)

рис.5

ВНИМАНИЕ! Обязательно нажмите замочек (желтый кружок), он сохраняет пропорции фотографии и у ребеночка не деформируется лицо. Чтобы закончить трансформацию нажимаем галочку (синий квадрат).(рис.6)

рис.6

Получилось? Молодцы! Но мы видим, что наша фотография находиться над рамкой. Нам нужно поменять слои с файлом портфолио и слой с фотографией местами.Нажимаем ЛКМ на слой с фотографией и тянем вниз. Наша фотография должна переместиться под слой с рамкой.(рис.7)

Если мы увеличили или уменьшили фото не совсем точно, повторяем трансформацию.

Для примера Как заполнить портфолио использован шаблон Портфолио «Маша и ме

 

дв

едь — цветы»

рис.7
Понравилась статья? Поделись с друзьями!

xn----htbdalpcxacecovhh0a.xn--p1ai

Программы для создания портфолио

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

Adobe Photoshop

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

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

Скачать Adobe Photoshop

Adobe InDesign

Еще одна программа от компании Adobe, которая поможет больше в работе с плакатами и постерами, поскольку имеет все необходимые функции. Но при должных знаниях и использованиях встроенных возможностей можно создать неплохое портфолио в InDesign.

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

Скачать Adobe InDesign

Paint.NET

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

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

Скачать Paint.NET

Microsoft Word

Еще одна известная программа, которую знают практически все пользователи. Многие привыкли только набирать текст в Ворде, но в нем получится создать и отличное портфолио. Он предоставляет возможность загрузить картинки, видео как с интернета, так и с компьютера. Этого уже достаточно, чтобы составить проект.

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

Скачать Microsoft Word

Microsoft PowerPoint

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

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

Скачать Microsoft PowerPoint

CoffeeCup Responsive Site Designer

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

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

Скачать CoffeeCup Responsive Site Designe

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

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

Помогла ли вам эта статья?

Да Нет

lumpics.ru

Создаём веб-страничку для портфолио в Фотошоп

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

Необходимые дополнения

Сетка для макета

Текстура ткани

Кисти для работы

Шрифт Oswald

Птичка Twitter

Введение

Зайдите на сайт 960.gs, на главной странице будет кнопка Big ol' DOWNLOAD button :) для скачивания архива. Загрузите архив, распакуйте в любом удобном для вас места на компьютере, необходимый файл располагается по адресу \nathansmith-960-Grid-System-b0c5b98\templates\photoshop, называется 960_grid_12_col.psd. Откройте данный файл в программе Adobe Photoshop.

Перед вами 12 алых колонок, которые помогут нам в разметке макета. Чтобы скрыть красные полосы, нажмите на изображение глаза слоя 12 Col Grid в Палитре слоев. Данный файл содержит направляющие, чтобы их показать или скрыть, используйте команду Ctrl + ;. Кроме того, так же существуют быстрые направляющие, активация или деактивация происходит через меню View - Show - Smart Guides (Просмотр - Показать - Быстрые направляющие).

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

Шаг 1 - Настройка документа

При открытом документе 960_grid_12_col.psd перейдите в меню Image - Canvas Size (Изображение - Размер холста), измените параметры ширины на 1200 пикселей, высоты 2400 пикселей, расположение относительно верхнего среднего квадрата. Такая площадь позволит легко развернуться для работы.

Шаг 2 - Создание шапки

В Палитре слоев создайте новую группу слоев, назовите ее "Header". Выберите инструмент Rectangle Tool  (U) (Инструмент "Прямоугольник") и создайте прямоугольник со сторонами 1200х520 пикселей, цвет #595e61. Назовите данный слой "header bg". Кликните по слою правой кнопкой мыши и выберите пункт Convert to Smart Object (Преобразовать в смарт-объект).

Далее примените фильтр Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум), настройки смотрите на изображении ниже. Таким образом, мы, во-первых сохраним настройки фильтра, которые сможем изменить в любой момент, а во-вторых создадим привлекательную текстуру для шапки.

Загрузите из интернета архив с текстурой фабричной ткани. Добавьте файл Tileables Pack #4 - Fabric.pat в набор узоров Adobe Photoshop. Дважды кликните по слою "header bg" для открытия настроек Стиль слоя, выберите эффект Наложение узора, настройте соответственно изображению ниже, выбрав текстуру из загруженного архива.

Шаг 3 - Создаем задний фон для навигации

Выберите инструмент Rectangle Tool (U) (Инструмент "Прямоугольник"), создайте прямоугольник в верху документа высотой 120 пикселей, цвет #000000. Назовите его "navigation bg". Заливку слоя установите на 20%, дважды щелкните по слою для настроек стиля, параметры Внутренней тени смотрите ниже.

Далее мы добавим окружность на слое "navigation bg", подготовим место для будущего логотипа. Выберите инструмент Ellipse Tool  (U)(Инструмент "Эллипс"), кликните в настройках инструмента на Add to shape area (+) (Добавить к области фигуры (+)). Кликните по векторной маски слоя "navigation bg", для активации векторов. Зажмите клавишу Shift, с помощью инструмента Ellipse Tool (U) (Инструмент "Эллипс") нарисуйте окружность в середине поля будущей навигации. При выполнении шага руководствуйтесь ниже расположенным изображением.

Шаг 4 - Создание прерывистой линии

Для создания необходимого узора понадобиться новый документ, нажмите Ctrl + N, размер 3х1 пикселей. Сделайте максимальное увеличение. Выберите инструмент Rectangular Marquee Tool  (M) (Инструмент "Прямоугольная область"), создайте квадратное выделение как на изображении ниже. Создайте новый слой, залейте выделение белым цветом. Если вы создали документ с белым задним фоном, сделайте задний слой невидимым.

Таким образом, на холсте останется белый квадрат в левом углу, остальные два пикселя будут прозрачными. Ctrl + D для отмены выделения. Сохраните новый узор в набор Adobe Photoshop через меню Edit - Define Pattern (Редактирование - Определить узор), назовите новый узор, нажмите "Ок".

Вернитесь к основному документу. Выберите инструмент Line Tool  (U) (Инструмент "Линия"), установите размер в 1 пикселя. Зажмите клавишу Shift и нарисуйте ровную линию чуть ниже навигационной панели. Установите Fill (Заливку) слоя на 0%, Opacity (Непрозрачность) на 20%. Дважды кликните по слою для открытия настроек стиля. Выберите Pattern Overlay (Наложение узора), добавьте новый узор, ранее созданный из нового документа.

Далее следует удалить линию в области будущего логотипа. Выберите инструмент Rectangular Marquee Tool  (M) (Инструмент "Прямоугольная область"), выделите необходимую зону, смотрите на изображение ниже, далее создайте маску Layer - Layer Mask - Hide Selection (Слой - Слой-маска - Спрятать выделенную область).

Шаг 5 -Наложение градиента на задний фон шапки

С помощью Rectangular Marquee Tool  (M) (Инструмент "Прямоугольная область") создайте выделение, как показано на изображении ниже (1). Далее наложите градиент Layer - New Fill Layer - Gradient (Слой - Новый слой-заливка - Градиент) (2). В Палитре слоев нажмите на маску слоя с новым градиентом, выберите инструмент Brush Tool  (B) (Инструмент "Кисть") черного цвета, закрасьте область приготовленную для логотипа (3). Установите Opacity (Непрозрачность) на 3% (4).

Создаем новый градиент, ниже навигационной панели. Зажмите клавише Ctrl, кликните по миниатюре слоя "header bg", образовав выделение. Нанесите градиент Layer - New Fill Layer - Gradient (Слой - Новый слой-заливка - Градиент) (1), смотрите изображение ниже. При открытом окне настройки градиента кликните по холсту и опустите белое пятно вниз. Измените режим наложения на Soft Light (Мягкий свет), Opacity(Непрозрачность) на 40%.

Шаг 6. Обработка заднего фона шапки макета

Загрузите новые кисти из интернета, затем добавьте в набор программы Adobe Photoshop.

Создайте новую группу слоев "brushes". На основе действий, выполняемых в прошлом шаге, создайте выделение слоя "header bg". В Палитре слоев на данный момент должна быть выделена группа "brushes", создайте для нее маску Layer - Layer Mask - Reveal Selection (Слой - Слой-маска - Показать выделенную область), таким образом, все, что вы поместите в данную группу, будет видно в пределах области слоя "header bg".

Создайте новый слой в группе "brushes", основной цвет белый. Выберите инструмент Brush Tool  (B) (Инструмент "Кисть"), используя загруженные кисти "расцарапайте" поверхность заднего фона шапки. Для каждого мазка кисти создавайте новый слой, регулируйте уровень Opacity (Непрозрачность). После того как закончите, измените режим наложения группы "brushes" на  Soft Light (Мягкий свет). Для примера смотрите на изображение ниже.

Шаг 7

Выберите Line Tool  (U) (Инструмент "Линия"), зажмите клавишу Shift и создайте линию шириной в 1 пиксель, цвет #50565a. Назовите данный слой "1px line". Расположите данную линию в самом низу шапки (слой "header bg"). Дублируйте слой Ctrl + J, с помощью инструмента Move Tool  (V) (Инструмент "Перемещение") переместите дубликат на один пиксель вверх, просто нажмите стрелочку вверх на клавиатуре. Измените цвет дублированного слоя с линией на #8e9496.

Шаг 8. Создание логотипа

Для создания логотипа мы воспользуемся Adobe Illustrator, создадим текст, затем пунктирную круглую лини. Финальные штрихи добавим в Adobe Photoshop.

Запустите Illustrator, создайте новый документ, выберите инструмент Type Tool  (T) и напишите "My Folio", используя шрифт  Akzidenz-Grotesk Condensed Medium Italic. Каждое слово должно быть отдельным объектом, то есть написали "My" нажмите Esc, ниже напишите следующее слово "Folio".

Выделите оба объекта (слова) с помощью Selection Tool (V), далее преобразуйте текст в вектор с помощью команды Object - Expand.

Выделите слово "My" и перемесите его чуть ниже так, чтобы нижний усик буквы "Y" касался верхней части "F" в слове "Folio".

С помощью инструмента Direct Selection Tool (A) выделите опорные точки в нижней части буквы "Y", как показано на изображении ниже, затем нажмите клавишу Backspace, чтобы их удалить.

Выберите инструмент Pen Tool (P), добавьте дополнительные опорные точки букве "Y", чтобы она полностью соединялась с буквой "F", не забудьте закрыть кривую. Как должно получиться, смотрите ниже.

Для создания пунктирной окружности выберите инструмент Ellipse Tool (L), зажмите клавишу Shift и нарисуйте круг, уберите заливку, толщина обводки Stroke 1pt. Откройте Палитру Window - Stroke, измените настройки, как показано на изображении ниже. Цвет текста и окружности измените на белый. Чтобы увидеть результат, добавьте серый прямоугольник ниже всех созданных объектов.

Примечание переводчика: в принципе, зная основы Photoshop ничего сложного нет, если затрудняетесь, тогда вперед. Напишите слова "My" и "Folio" на двух разных слоях. Разместите слова, как размещал их ранее автор, друг над другом. Кликните правой кнопкой мыши по слою "My" и выберите Создать рабочий контур.

С помощью инструмента Direct Selection Tool  (A) (Инструмент "Стрелка") выделите те же опорные точки, что и в версии автора, удалите их нажатием клавиши Delete. Выберите инструмент Pen Tool  (P) (Инструмент "Перо"), добавьте новые опорные точки, соединив визуально слова. Для создания пунктирной окружности я вспомнил один интересный вариант.

С помощью инструмента Ellipse Tool  (U) (Инструмент "Эллипс") нарисуйте окружность, выберите Type Tool  (T) (Инструмент "Горизонтальный текст") и кликните сверху окружности, чтобы появился мигающий курсор (более подробную информацию найдете здесь в разделе "Текст по Контуру (Type on a Path)"), затем введите необходимое количество символа "-". Слой с векторной окружностью можно просто скрыть.

Такой способ легко редактировать, если понадобиться изменить размер, например. Может вы знаете более легкий способ, тогда буду рад видеть описание в комментариях. Если что то осталось непонятно - тоже пишите ;).

Заключительная обработка посредством Adobe Photoshop

Вернитесь в Photoshop, создайте новую группу "Logo". Выберите инструмент Ellipse Tool  (U) (Инструмент "Эллипс"), создайте окружность125х125 пикселей, цвет #2e3134. Переименуйте слой на "circle", затем дважды кликните по слою, для вызова окна Стиль слоя, добавьте Pattern Overlay (Наложение узора), настройки смотрите на изображении ниже. Текстура (узор) кожи лежит в архиве, который вы загрузили ранее из интернета и добавили в Adobe Photoshop.

Скопируйте текст из Adobe Illustrator и вставьте его в Adobe Photoshop как смарт-объект. С помощью Свободной трансформации Ctrl + T измените размер и расположите текст внутри ранее созданной окружности с кожаной текстурой. Добавьте Стиль слоя Color Overlay(Наложение цвета), цвет #f4f4f4.

Так же скопируйте пунктирную окружность, измените размер, разместите в окружности как и текст. Переименуйте данный слой на "dashed circle", Непрозрачность измените на 60%.

Дублируйте слой с пунктирной окружностью Ctrl + J. Увеличьте размер, чтобы края касались нижней горизонтальной линии, переименуйте слой на "bottom border". Выберите инструмент Rectangular Marquee Tool  (M) (Инструмент "Прямоугольная область"), выделите верхнюю часть окружности, как показано на изображении ниже. Скройте лишнее с помощью маски Layer - Layer Mask - Hide Selection(Слой - Слой-маска - Спрятать выделенную область).

Шаг 9 - Создаем меню сайта

Создайте новую группу "Navigation". С помощью инструмента Type Tool  (T) (Инструмент "Горизонтальный текст") напишите разделы меню, шрифт Oswald (переходим по ссылке, указанной в начале урока, кликаем на Open Oswald in Google Web Fonts, далее слева на Download your Collection, выбираем Download the font families in your Collection as a zip-file, сохраняем архив, устанавливаем шрифт), цвет белый. Разделите пункты меню равномерно слева и справа от  логотипа.

Создание стиля для активного элемента раздела меню

Нарисуйте прямоугольник с помощью инструмента Rounded Rectangle Tool  (U) (Инструмент "Прямоугольник со скругленными углами"), радиус 4 пикселя, высота 32 пикселя, цвет черный. Измените параметр Заливки слоя на 25%. Дважды кликните по слою для открытия Стиля слоя, используйте настройки стиля, как показано на изображении ниже.

Шаг 10 - Создание области популярного контента

Создайте новую группу с названием "Featured". Выберите инструмент Type Tool  (T) (Инструмент "Горизонтальный текст"), напишите имя своего проекта используя шрифт Oswald, размер 22пт, белого цвета. Поместите этот слой в левой части макета сайта, на 50 пикселей ниже меню сайта.

С помощью инструмента Line Tool  (U) (Инструмент "Линия") нарисуйте ровную горизонтальную линию шириной 300 пикселей. Измените Заливку слоя на 0%, Непрозрачность на 50%. Дважды щелкните по слою для открытия окна Стиль слоя, добавьте узор, ранее созданный нами, как показано на изображении ниже.

Снова выберите инструмент Type Tool  (T) (Инструмент "Горизонтальный текст") и создайте текстовой блок ниже пунктирной линии, имя шрифта Helvetica, цвет белый, размер 13пт. Откройте палитру Символ, Window - Character (Окно - Символ), параметр leading (интерлиньяж), вертикальный интервал между строками текста, установите на 24пт, для читабельности текста.

Создание кнопки "Read More"

Создайте внутреннюю группу "button". Выберите инструмент Rounded Rectangle Tool  (U) (Инструмент "Прямоугольник со скругленными углами"), радиус 4 пикселя. Под текстовым блоком создайте прямоугольник, размером 110х30 пикселей, цвет #9ca2a6.

Переименуйте слой на "button". Дублируйте слой Ctrl + J, затем передвиньте слой ниже оригинала, выберите инструмент Move Tool (V) (Инструмент "Перемещение"), нажмите на клавиатуре клавишу "Стрелка вниз", чтобы сдвинуть слой на один пиксель вниз.

Измените Непрозрачность слоя на 50%. Создайте дубликат предыдущего слоя, измените цвет на #54585b, затем, сдвиньте на один пиксель вниз, верните Непрозрачность на 100%. У вас должно получится три слоя группы "button", первый - оригинал, второй (ниже) -дубликат с Непрозрачностью 50%, третий (ниже второго) - второй дубликат с Непрозрачностью 100%. Дважды кликните по оригиналу, для открытияСтиля слоя, настройте его используя изображение ниже. Цвет обводки используйте #54585b.

Зажмите клавишу Ctrl и выделите два нижних дублированных слоя. Кликните по ним правой кнопкой мыши и выберите Convert to Smart Object (Преобразовать в смарт-объект). Откройте окно Стиль слоя, добавьте Наложение градиента, как показано на изображении ниже, получится ненавязчивый 3D эффект.

Зажмите вместе клавиши Ctrl + Shift, затем кликните по миниатюре слоя смарт-объект "button", затем, не отпуская клавиш, на векторную маску слоя "button", таким образом мы создадим выделение всей кнопки. Создайте новый слой, залейте выделение белым цветом. Уберите выделение Ctrl + D. Преобразуйте данный слой в смарт-объект. С помощью фильтра добавьте Шума Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум), используйте настройки изображенные ниже. Режим наложения слоя измените на Multiply (Умножение), Непрозрачность на 25%.

С помощью инструмента Type Tool  (T) (Инструмент "Горизонтальный текст") напишите на кнопке "Read More", шрифт Oswald, размер 15пт, цвет белый. Добавьте тень для текста, настройки стиля смотрите ниже.

Шаг 11 - Создание слайдер изображений

Для начала, при создании макетов сайта приучите себя в этом, создайте новую группу, назовите ее "image slider". Выберите инструментRectangle Tool  (U) (Инструмент "Прямоугольник"), нарисуйте прямоугольник размером 620х300 пикселей, переименуйте слой на "image_holder". Откройте окно Стиль слоя и добавьте Внешнее свечение, настройки смотрите ниже.

Откройте любое изображение в Adobe Photoshop, переместите его в основной документ с макетом сайта, переименуйте слой на "image" и разместите его над слоем "image_holder". Кликните правой кнопкой мыши по слою с изображением и выберите Create a Clipping Mask(Создать обтравочную маску), после этого добавленное изображение будет видно в пределах нижнего слоя "image_holder".

Создание стрелок для управления слайдером

Выберите инструмент Custom Shape Tool  (U) (Инструмент "Произвольная фигура"), кликните правой кнопкой мыши в любом месте холста и в меню произвольных фигур выберите стрелочку, как на изображении ниже, затем создайте стрелку справа от слайдера, цвет #e2e6e8.

Переименуйте слой на "right arrow", наложите Стиль слоя, как показано на изображении ниже. Конвертируйте данный слой в смарт-объект, измените Непрозрачность на 40%. Дублируйте данный слой, измените имя на "left arrow". Затем разверните фигуру, Edit - Transform - Flip Horizontal (Редактирование - Трансформирование - Отразить по горизонтали). Переместите новую стрелку левее слайдера. Сравните свою работу с изображением ниже.

Создание кнопок навигации слайдера

Создайте новую группа "navigation bullets". Выберите инструмент Ellipse Tool  (U) (Инструмент "Эллипс"), зажмите клавишу Shift и создайте окружность размером 10х10 пикселей, цвет #4d5357, назовите слой "navigation bullet". Дублируйте слой с окружностью несколько раз и разместите его как показано на изображении ниже. С помощью того же Ellipse Tool (U) (Инструмент "Эллипс") создайте одну окружность немного меньше в центре предыдущей, которая будет служить индикатором активной страницы слайдера, цвет используйте #9ca2a4.

Шаг 12 - Создание области "Сервис"

Создайте новую группу слоев под названием "Services". С помощью инструмента Rectangle Tool (U) (Инструмент "Прямоугольник") нарисуйте прямоугольник высотой 450 пикселей, цвет #fafafa. Переименуйте слой в "services bg", затем конвертируйте его в смарт-объект. Добавьте Шума, Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум), настройки фильтра смотрите на изображении ниже. Откройте Стиль слоя, добавьте Внутреннюю тень и Внешнее свечение, настройки смотрите ниже.

Выберите инструмент Line Tool  (U) (Инструмент "Линия"), создайте горизонтальную линию в нижней части области "services", цвет #d2d2d2. Переименуйте слой в "1px line". Дублируйте слой Ctrl + J, цвет дубликата измените на белый, далее переместите на 1 пиксель вверх.

Шаг 13 - Добавление контента для области "Сервис"

Выберите инструмент Type Tool  (T) (Инструмент "Горизонтальный текст"), сделайте надпись "Services", размер 38пт, цвет #5b656a. Расположите в левой части области, и на 40 пикселей ниже предыдущей области.

Создайте новую группу "web design". В ней же другую группу "spotlights". Далее мы создадим эффект 3D комнаты с освещением. Выберите инструмент Rectangle Tool  (U) (Инструмент "Прямоугольник") и создайте прямоугольник размером 300х100 пикселей, цвет #3b444a. Переименуйте слой на "border", конвертируйте в смарт-объект. Добавьте Шума, Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум), и Наложение градиента, Layer - Layer Style - Gradient Overlay (Слой - Стиль слоя - Наложение градиента), настройки фильтра и стиля слоя смотрите на изображении ниже.

Для начала с помощью Rectangle Tool  (U) (Инструмент "Прямоугольник") создайте прямоугольник, серого цвета, размером 286х86пикселей, разместите его по центру в прямоугольнике "border". Он поможет создать стены комнаты.

На отдельном слое нарисуйте следующий прямоугольник, высотой 22 пикселя, цвет #434f57. Назовите его "floor", откройте окно Стиль слояи наложите градиент, как показано на изображении ниже.

Следующий отдельный прямоугольник создайте размером 240х64 пикселя, цвет #3b4851, назовите его "front wall". Так же добавьте Наложение градиента.

С помощью инструмента Direct Selection Tool  (A) (Инструмент "Стрелка") выделите верхнюю правую опорную точку слоя "floor" и переместите ее влево, левую верхнюю опорную точку переместите вправо. Для примера посмотрите на изображение ниже.

Создайте очередной прямоугольник в левой части комнаты, цвет #39444b. Переместите нижнюю правую опорную точку вверх, как показано на изображении ниже, в окне Стиль слоя наложите градиент, настройки продемонстрированы ниже. Дублируйте слой, переместите дубликат в правую часть комнаты, разверните слой Edit - Transform - Flip Horizontal (Редактирование - Трансформирование - Отразить по горизонтали). Измените угол на 0° в настройках Наложения градиента.

Создайте следующий прямоугольник, цвет #505e67, назовите его "ceiling". На основе работы со слоем "floor" переместите нижние опорные точки, соединив их с краями слоя "front wall". настройки Наложения градиента смотрите ниже.

Теперь можно удалить первый серый прямоугольник, созданный в начале шага. На изображении ниже показано расположение слоев в группе "3d room".

13i

Кликните правой кнопкой мыши по группе "3d room" и выберите Convert to Smart Object (Преобразовать в смарт-объект). Добавьте Шума,Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум), настройки смотрите на изображении ниже. Откройте, двойным щелчком мыши по слою, окно Стиль слоя и добавьте Inner Glow (Внутреннее свечение).

Шаг 14 - Создание освещения

Создайте новую группу под именем "top lights". Выберите инструмент Ellipse Tool  (U) (Инструмент "Эллипс") и создайте белую окружность, как показано на изображении ниже. Конвертируйте слой в смарт-объект, примените фильтр Filter - Blur - Radial Bur (Фильтр - Размытие - Радиальное размытие), все настройки как всегда представлены ниже.

Переименуйте слой в "light 1". Создайте еще одну окружность, "light 2", чуть больше предыдущей, конвертируйте в смарт-объект, примените фильтр Радиальное размытие. Повторите предыдущее действие, создав третий, еще больше белый круг "light 3". На изображении ниже наглядно представлен данный шаг. Объедините получившихся три слоя в одну группу, и для каждого установите индивидуальнуюНепрозрачность слоя: "light 1" – 70%, "light 2" – 50%, "light 3" – Blending mode - Soft Light (Режим наложения - Мягкий свет) 40%.

Дублируйте группу два раза и расположите по краям комнаты, как показано на изображении ниже. Зажмите клавиши Ctrl + Shift и кликните поочередно на миниатюры каждого из слоев "light", затем добавьте корректирующий слой Layer - New Adjustment Layer - Hue/Saturation(Слой - Новый корректирующий слой - Цветовой тон/Насыщенность), благодаря ему свет получит легкий синеватый оттенок. Теперь уберем лишний свет, выходящий за пределы комнаты.

Зажав клавишу Ctrl кликните по миниатюре слоя "3d room", затем кликните для выделения группы в Палитре Слоев "top lights", затем скройте лишнее Layer - Layer Mask - Reveal Selection (Слой - Слой-маска - Показать выделенную область).

Создайте следующую группу "floor lights". Выберите Ellipse Tool  (U) (Инструмент "Эллипс") и создайте три овала, как показано на изображении ниже. Конвертируйте каждый в смарт-объект. Добавьте фильтры Filter - Blur - Gaussian blur (Фильтр - Размытие - Размытие по Гауссу) и Filter - Noise - Add Noise (Фильтр - Шум - Добавить шум) каждому, Непрозрачность установите на 40%. 3D комната готова, теперь в ней вы можете расположить любое изображение подходящее для раздела "Сервис", автор использовал логотип портала Webdesign Tuts+ http://webdesign.tutsplus.com/

Шаг 15

Выберите инструмент Rectangle Tool  (U) (Инструмент "Прямоугольник") и создайте прямоугольник размером 300х210 пикселей под 3D комнатой. Переименуйте слой в "content bg", откройте окно Стиль слоя и добавьте Внешнее свечение, настройки смотрите ниже.

С помощью инструмента Pen Tool (P)  (Инструмент "Перо") создайте треугольник, цвет #d1d6da, для примера посмотрите на следующее изображение. Для облегчения работы активируйте направляющие. Переименуйте слой в "top triangle", в окне Стиль слоя добавьтеВнутренне свечение, Наложение градиента, Обводку, цвет #c5cace.

Выберите инструмент Type Tool  (T) (Инструмент "Горизонтальный текст"), создайте текстовое поле, вставьте любой текст. Для оглавления используйте шрифт Oswald, размер 20пт, цвет #747d82. Для текстового поля Helvetica Regular, 13пт, #5f6c74. В Палитре Символ, параметр leading (интерлиньяж) установите на 24пт.

Создайте горизонтальную пунктирную линию, как это мы делали ранее. Скопируйте кнопку "Read more" из области популярного контента, кнопка должна находится в соответствующей группе слоев, дублируйте группу и перенесите ее в "web design". Разместите кнопку ниже текстового поля, для примера смотрите изображение ниже.

Шаг 16

Дублируйте группу "web design" два раза, измените заголовки текста и изображения в 3D комнате, как показано ниже.

Шаг 17

Другие статьи по рубрике «Photoshop»

Как установить в Photoshop новую текстуру

Как правильно установить новую кисть в Photoshop

webmyblog.ru

Создаем простой и понятный макет портфолио

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

Окончательное изображение

[IMG=http://www.photoshopstar.com/media/2014/10916/simple-portfolio-preview.jpg]

Программное обеспечение: 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 и поместите их выше фона.

Скомпонуйте ранее введенную контактную информацию и новую кнопку, внесите соответствующие изменения в текст надписи кнопки, и все готово:

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

Мы закончили!

Я надеюсь, что вам понравилась эта статья:

Перевод статьи «Create a Clean and Simple Portfolio Design in Photoshop» был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Делаем макет для портфолио в Фотошоп

Этот урок посвящён тому, как с помощью Adobe Photoshop CS3 создать шаблон портфолио.

Шаг 1. Создадим новый файл File>New (Файл> Новый(Cntr+N)) размером 1000х700 пикселей. Выберите Инструмент Прямоугольник (Rectangle Tool (U)), чтобы определить расположение фона

Шаг 2. Примените к слою с фоном следующий стиль слоя, делая двойной щелчок на слое, с которым Вы работаете на палитре слоёв: Параметры наложения>Наложение Градиента (Blending Options>Gradient Overlay)

Редактор Градиентов (Gradient Editor):

Вот что должно получиться у Вас:

Шаг 3. Затем мы сделаем “шапку” вебсайта, применяя ранее используемый Инструмент Прямоугольник  (Rectangle Tool (U)).

Выбираем Стиль слоя: Параметры наложения>Наложение Градиента (Blending Options>Gradient Overlay)

Редактор Градиентов (Gradient Editor):

Результат должен быть таким:

Шаг 4. Теперь мы должны создать текстуру фона, используя для этого полезный инструмент, расположенный на BGPatterns. Устанавливайте параметры по очереди, как показано на рисунках.

Загрузите новый образец и пройдите Редактирование>Определить Узор (Edit>Define Pattern). На новом слое мы выберем, Редактирование>Выполнить Заливку (Edit>Fill (Shft+F5)), применив сохранённый узор.

Для данного слоя применим: Заливка (Fill) 0 %, Режим наложения>Осветление основы (Blending mode>Color Dodge)

К этому слою примените Добавить слой-маску (Add a Mask), выберите Инструмент Кисть (B) чёрного цвета, чтобы стереть части текстуры, выходящие за края “шапки”:

Шаг 5. Напишите теперь название сайта, использую следующие параметры шрифта (используемый шрифт):

Итог данного шага:

Далее выбираем Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow)

Параметры наложения>Внешнее свечение (Blending Options>Outer Glow)

Параметры наложения>Наложение градиента (Blending Options>Gradient Overlay)

Редактор Градиентов:

Примерно такого результата Вы должны добиться:

Шаг 6. Используя Инструмент Прямоугольник со скругленными углами  (U) (радиус 20), сделайте кнопку меню:

Для слоя с кнопкой выберите следующие параметры: Заливка (Fill) 0 %, Параметры наложения>Внешнее свечение (Blending Options>Outer Glow)

Параметры наложения>Обводка (Blending Options>Stroke)

Результат:

Шаг 7. Сделайте три копии слоя с кнопкой (Ctrl+J) и выберите Редактирование>Свободное трансформирование (Free Transform). Разместите копии слоёв так, как показано ниже:

Шаг 8. Напишите названия для кнопок меню, помещая каждое слово на отдельный слой, используя следующие параметры:

Примените к слоям, содержащих названия кнопок стиль, представленный ниже: Параметры наложения>Внешнее свечение (Blending Options>Outer Glow)

Шаг 9. Затем мы выберем Инструмент Прямоугольник  (U), выделяем прямоугольную область, где и будут располагаться наши изображения, зальём участок, используя цвет#F5F5F5

Применим Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow) со следующими настройками:

Сделайте ещё три копии слоя с прямоугольной областью (Ctrl+J) и выберите Редактирование>Свободное трансформирование (Free Transform), разместите копии как показано ниже:

Шаг 10. Вставьте картины на сделанных слоях, я использовал эту фотографию от deviantart. Я хотел бы поблагодарить автора этих художественных работ:

Выберите аналогичный стиль для слоев с картинами: Параметры наложения>Обводка (Blending Options>Stroke), со следующими настройками:

Шаг 11. Используя Инструмент Прямоугольник  (U) с заливкой белого цвета, разместите кнопку под картиной.

Примените к слою с кнопкой Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow)

Сделайте три копии слоя, содержащего кнопку (Ctrl+J), выберите Редактирование>Свободное трансформирование (Free Transform), разместите копии как показано ниже:

Шаг 12. Напишите названия для сделанных кнопок со следующими настройками:

Ну вот, мы почти у цели.

 

Теперь осталось ввести основной текст сайта:

Шаг 13. Что бы придать законченный вид, сделаем следующее: используя Инструмент Линия  (U), мы проведём линию под текстом, задав цвет #6E6969.

Шаг 14. На последней стадии мы вставим текст, подтверждающий авторское право, используя следующие настройки шрифта:

Стиль слоя: Параметры наложения>Тень (Blending Options>Drop Shadow)

Параметры наложения>Внешнее свечение (Blending Options>Outer Glow)

Параметры наложения>Наложение градиента (Blending Options>Gradient Overlay)

Редактор Градиентов:

Вот и всё!

Источник: photoshop-master.ru

bb3x.ru