Детали:
Программа: Illustrator CS4, Photoshop CS6 и выше
Время выполнения: ~40 мин.
Сложность: средние
Материалы урока:
Фото: Текстура бумаги
Фото: Перспектива
Файлы: Векторные значки исходник переводчика
Векторный_образец.zip ( 260,66 KB ) Кол-во скачиваний: 164
Шрифт: CHUNKFIVE
Шрифт: BREE SERIF
В этом уроке я расскажу вам, как создать Mockup логотипа из золотой фольги в Adobe Photoshopp.
В завершении выполнения урока у вас получится вот такой результат.
Используя эту технику вы можете создать например вот такой набор:
Этап 1. Подготавливаем текстуру бумаги.
Шаг 1.
Загрузите текстуру «Бумага» и откройте в Photoshop.
Перейдите в меню Layer / Слои > New / Новый > Layer From Background / Слой из заднего плана. Переименуйте слой на «Текстура бумаги» .
Шаг 2.
Примените к слою «Текстура бумаги» стиль слоя Gradient Overlay / Наложение градиента, установив следующие настройки.
Используйте градиент от белого к прозрачному.
Этап 2. Подготавливаем Smart Object / Смарт-объект.
Шаг 1.
Загрузите изображение «Перспектива» и откройте его в фотошопе.
Выделите весь документ Ctrl+A и скопируйте область выделения в буфер обмена Ctrl+C.
Перейдите в наш основной документ и вставьте скопированную область поверх слоя «Текстура бумаги» .
Переименуйте слой на «Перспектива» .
Шаг 2.
Установите цвет переднего плана на голубой. Выберите инструмент Rectangle Tool / Инструмент "Прямоугольник" (U) и создайте векторную форму, размером 1099x791px.
Переименуйте данный слой на «Smart Object / Смарт-объект» , а затем конвертируйте этот слой в Smart Object / Смарт-объект, перейдя в меню Layer / Слои > Smart Object / Смарт-объект > Convert to Smart Object / Преобразовать в смарт-объект.
Шаг 3.
Далее подгоните слой «Smart Object / Смарт-объект» под перспективу используя свободную трансформацию.
Сделайте так, чтоб ваш слой покрыл весь черный объект. После того, как вы это сделаете слой «Перспектива» можно удалить.
Этап 3. Размещаем лого используя Illustrator.
Шаг 1.
В качестве лого мы будем использовать значок, сделанный в Illustrator.
Шаг 2.
Откройте программу Adobe Illustrator и откройте в ней файл со значком (можете использовать тот значок, который вам предоставил переводчик). У вас может появится предупреждение о том, что в данном файле имеются шрифты, которые не присутствуют у вас на компьютере, не переживайте их можно скачать или в крайнем случае заменить системными.
Шаг 2.
Выберите инструмент Selection Tool (V).
(Вы можете не делать следующие шаги если будите использовать предоставленный переводчиком векторный образец, а просто скопировать значок переходить в Photoshop и 4 этапу).
Затем выберите значок и скопируйте его. Создайте новый документ 350x350px в Adobe Illustrator и вставьте скопированный значок.
Шаг 3.
Используя инструмент Selection Tool (V) переместите значок на серый фон, чтоб были видны белые закрашенные объекты.
Убедитесь что значок выбран перейдите в меню Object > Expand Appearance, затем выберите Object > Expand / Расширить. В появившимся диалоговом окне выберите пункты Object и Fill / Выполнить заливку и нажмите OK.
Шаг 4.
Перейдите в панель Pathfinder, если вы ее не видите откройте ее перейдя в меню Window / Окно > Pathfinder и нажмите на иконку Trim / Тримминг.
Шаг 5.
Выберите инструмент Magic Wand Tool / Инструмент "Волшебная палочка" (Y).
Переместите курсор на область белого заполнения и выберите его. После этого перейдите в меню Edit / Редактирование > Cut / Вырезать.
Теперь значок готов к импорту в Photoshop.
Этап 4. Помещаем значок в нашу сцену.
Шаг 1.
Мы все еще находимся в программе Adobe Illustrator, выделите значок и скопируйте его.
Шаг 2.
Перейдите в Photoshop , выберите слой « Smart Object / Смарт-объект» дважды кликните по нему, чтоб перейти в новый слой редактирования и вставьте и вставьте скопированный объект во внутрь тоже как Smart Object / Смарт-объект. После чего нажмите ОК.
Если ваш значок после вставки оказался мал, перейдите в верхнее меню измените его размер до желаемого. Так как это Smart Object / Смарт-объект и он сделан из векторного объекта, то качество не ухудшится при масштабировании.
Шаг 3.
Сохраните документ Ctrl+S и закройте его.
Вы перейдете в основной документ, где ваш значок примет нужную перспективу.
Этап 5. Добавляем золотой эффект.
Шаг 1.
Выберите слой «Smart Object / Смарт-объект» и установите значение Fill / Выполнить заливку на 0%. Продублируйте слой трижды перейдя в меню Layer / Слои > New / Новый > Layer via Copy / Скопировать на новый слой.
В панели слоев у вас будет следующий вид.
Переименуйте слои как на скрине ниже и сгруппируйте три слоя.
Шаг 2.
Выберите слой «Эффект 1» и примените к нему стиль слоя Inner Shadow / Внутренняя тень, установив следующие настройки.
Blend Mode / Режим наложения: Color Dodge / Осветление основы
Color / Цвет: #ffffff
Шаг 3.
Теперь добавьте стиль слоя Color Overlay / Наложение цвета со следующими настройками.
Blend Mode / Режим наложения: Color Dodge / Осветление основы
Color / Цвет: #967a2f
Шаг 4.
Добавим стиль слоя Gradient Overlay / Наложение градиента со следующими настройками.
1 контрольная точка: Location / Расположение: 0%, а Color / Цвет: #343434, Opacity / Непрозрачность 75%.
2 контрольная точка: Location / Расположение: 45%, а Color / Цвет: #343434, Opacity / Непрозрачность 0%.
Шаг 5.
Выберите слой «Эффект 2» и примените стиль слоя Gradient Overlay / Наложение градиента со следующими настройками.
1 контрольная точка: Color / Цвет: #bdbbb6, Location / Расположение: 0%
2 контрольная точка: Color / Цвет: #ffffff, Location / Расположение: 18%
3 контрольная точка: Color / Цвет # 85816f, Location: 33%
4 контрольная точка: Color / Цвет: #ffffff, Location / Расположение: 46%
5 контрольная точка: Color / Цвет: #716d54, Location / Расположение: 54%
6 контрольная точка: Color / Цвет: #ffffff, Location / Расположение: 66%
7 контрольная точка: Color / Цвет #65625a, Location / Расположение 82%
Шаг 6.
Добавьте слою стиль Drop Shadow / Тень с настройками как на скрине ниже.
Blend Mode / Режим наложения: Screen / Осветление
Color / Цвет: #ffffff
Шаг 7.
Выберите слой «Эффект 3» и примените стиль слоя Gradient Overlay / Наложение градиента со следующими настройками.
1 контрольная точка: Color / Цвет: #e9e7d9, Location / Расположение: 0%
2 контрольная точка: Color / Цвет: #fffdf0, Location / Расположение: 20%
3 контрольная точка: Color / Цвет: #8e8366, Location / Расположение: 61%
4 контрольная точка: Color / Цвет: #9e9475, Location / Расположение: 67%
5 контрольная точка: Color / Цвет: #cec7b2, Location / Расположение: 78%
6 контрольная точка: Color / Цвет: #69604c, Location / Расположение: 95%
Шаг 8.
Добавьте слою стиль Drop Shadow / Тень с настройками как на скрине ниже.
Blend Mode / Режим наложения: Linear Burn / Линейный затемнитель
Color / Цвет: #000000
Этап 6. Бонус как добавить розовый оттенок.
Шаг 1.
Выберите группу «Эффекты» и добавьте корректирующий слой Solid Color / Цвет выше группы.
Дважды кликните на иконке корректирующего слоя чтоб задать нужный цвет, а установил #eeb5ef, после чего нажмите Ок чтоб применить результат.
Шаг 2.
Установите слой в режиме обтравочной маски к группе «Эффекты» , измените режим смешивания для корректирующего слоя на Multiply / Умножение и понизьте значение Opacity / Непрозрачность до 90%.
Вот и все...
Поздравляю вы выполнили урок
Автор: Tom Piccarreda
Источник: Tutsplus
Переводчик: 2 fingers
Программа: Illustrator CS4, Photoshop CS6 и выше
Время выполнения: ~40 мин.
Сложность: средние
Материалы урока:
Фото: Текстура бумаги
Фото: Перспектива
Файлы: Векторные значки исходник переводчика
Векторный_образец.zip ( 260,66 KB ) Кол-во скачиваний: 164Шрифт: CHUNKFIVE
Шрифт: BREE SERIF
В завершении выполнения урока у вас получится вот такой результат.
Используя эту технику вы можете создать например вот такой набор:
Этап 1. Подготавливаем текстуру бумаги.
Шаг 1.
Загрузите текстуру «Бумага» и откройте в Photoshop.
Перейдите в меню Layer / Слои > New / Новый > Layer From Background / Слой из заднего плана. Переименуйте слой на «Текстура бумаги» .
Шаг 2.
Примените к слою «Текстура бумаги» стиль слоя Gradient Overlay / Наложение градиента, установив следующие настройки.
Используйте градиент от белого к прозрачному.
Этап 2. Подготавливаем Smart Object / Смарт-объект.
Шаг 1.
Загрузите изображение «Перспектива» и откройте его в фотошопе.
Выделите весь документ Ctrl+A и скопируйте область выделения в буфер обмена Ctrl+C.
Перейдите в наш основной документ и вставьте скопированную область поверх слоя «Текстура бумаги» .
Переименуйте слой на «Перспектива» .
Шаг 2.
Установите цвет переднего плана на голубой. Выберите инструмент Rectangle Tool / Инструмент "Прямоугольник" (U) и создайте векторную форму, размером 1099x791px.
Переименуйте данный слой на «Smart Object / Смарт-объект» , а затем конвертируйте этот слой в Smart Object / Смарт-объект, перейдя в меню Layer / Слои > Smart Object / Смарт-объект > Convert to Smart Object / Преобразовать в смарт-объект.
Шаг 3.
Далее подгоните слой «Smart Object / Смарт-объект» под перспективу используя свободную трансформацию.
Сделайте так, чтоб ваш слой покрыл весь черный объект. После того, как вы это сделаете слой «Перспектива» можно удалить.
Этап 3. Размещаем лого используя Illustrator.
Шаг 1.
В качестве лого мы будем использовать значок, сделанный в Illustrator.
Шаг 2.
Откройте программу Adobe Illustrator и откройте в ней файл со значком (можете использовать тот значок, который вам предоставил переводчик). У вас может появится предупреждение о том, что в данном файле имеются шрифты, которые не присутствуют у вас на компьютере, не переживайте их можно скачать или в крайнем случае заменить системными.
Шаг 2.
Выберите инструмент Selection Tool (V).
(Вы можете не делать следующие шаги если будите использовать предоставленный переводчиком векторный образец, а просто скопировать значок переходить в Photoshop и 4 этапу).
Затем выберите значок и скопируйте его. Создайте новый документ 350x350px в Adobe Illustrator и вставьте скопированный значок.
Шаг 3.
Используя инструмент Selection Tool (V) переместите значок на серый фон, чтоб были видны белые закрашенные объекты.
Убедитесь что значок выбран перейдите в меню Object > Expand Appearance, затем выберите Object > Expand / Расширить. В появившимся диалоговом окне выберите пункты Object и Fill / Выполнить заливку и нажмите OK.
Шаг 4.
Перейдите в панель Pathfinder, если вы ее не видите откройте ее перейдя в меню Window / Окно > Pathfinder и нажмите на иконку Trim / Тримминг.
Шаг 5.
Выберите инструмент Magic Wand Tool / Инструмент "Волшебная палочка" (Y).
Переместите курсор на область белого заполнения и выберите его. После этого перейдите в меню Edit / Редактирование > Cut / Вырезать.
Теперь значок готов к импорту в Photoshop.
Этап 4. Помещаем значок в нашу сцену.
Шаг 1.
Мы все еще находимся в программе Adobe Illustrator, выделите значок и скопируйте его.
Шаг 2.
Перейдите в Photoshop , выберите слой « Smart Object / Смарт-объект» дважды кликните по нему, чтоб перейти в новый слой редактирования и вставьте и вставьте скопированный объект во внутрь тоже как Smart Object / Смарт-объект. После чего нажмите ОК.
Если ваш значок после вставки оказался мал, перейдите в верхнее меню измените его размер до желаемого. Так как это Smart Object / Смарт-объект и он сделан из векторного объекта, то качество не ухудшится при масштабировании.
Шаг 3.
Сохраните документ Ctrl+S и закройте его.
Вы перейдете в основной документ, где ваш значок примет нужную перспективу.
Этап 5. Добавляем золотой эффект.
Шаг 1.
Выберите слой «Smart Object / Смарт-объект» и установите значение Fill / Выполнить заливку на 0%. Продублируйте слой трижды перейдя в меню Layer / Слои > New / Новый > Layer via Copy / Скопировать на новый слой.
В панели слоев у вас будет следующий вид.
Переименуйте слои как на скрине ниже и сгруппируйте три слоя.
Шаг 2.
Выберите слой «Эффект 1» и примените к нему стиль слоя Inner Shadow / Внутренняя тень, установив следующие настройки.
Blend Mode / Режим наложения: Color Dodge / Осветление основы
Color / Цвет: #ffffff
Шаг 3.
Теперь добавьте стиль слоя Color Overlay / Наложение цвета со следующими настройками.
Blend Mode / Режим наложения: Color Dodge / Осветление основы
Color / Цвет: #967a2f
Шаг 4.
Добавим стиль слоя Gradient Overlay / Наложение градиента со следующими настройками.
1 контрольная точка: Location / Расположение: 0%, а Color / Цвет: #343434, Opacity / Непрозрачность 75%.
2 контрольная точка: Location / Расположение: 45%, а Color / Цвет: #343434, Opacity / Непрозрачность 0%.
Шаг 5.
Выберите слой «Эффект 2» и примените стиль слоя Gradient Overlay / Наложение градиента со следующими настройками.
1 контрольная точка: Color / Цвет: #bdbbb6, Location / Расположение: 0%
2 контрольная точка: Color / Цвет: #ffffff, Location / Расположение: 18%
3 контрольная точка: Color / Цвет # 85816f, Location: 33%
4 контрольная точка: Color / Цвет: #ffffff, Location / Расположение: 46%
5 контрольная точка: Color / Цвет: #716d54, Location / Расположение: 54%
6 контрольная точка: Color / Цвет: #ffffff, Location / Расположение: 66%
7 контрольная точка: Color / Цвет #65625a, Location / Расположение 82%
Шаг 6.
Добавьте слою стиль Drop Shadow / Тень с настройками как на скрине ниже.
Blend Mode / Режим наложения: Screen / Осветление
Color / Цвет: #ffffff
Шаг 7.
Выберите слой «Эффект 3» и примените стиль слоя Gradient Overlay / Наложение градиента со следующими настройками.
1 контрольная точка: Color / Цвет: #e9e7d9, Location / Расположение: 0%
2 контрольная точка: Color / Цвет: #fffdf0, Location / Расположение: 20%
3 контрольная точка: Color / Цвет: #8e8366, Location / Расположение: 61%
4 контрольная точка: Color / Цвет: #9e9475, Location / Расположение: 67%
5 контрольная точка: Color / Цвет: #cec7b2, Location / Расположение: 78%
6 контрольная точка: Color / Цвет: #69604c, Location / Расположение: 95%
Шаг 8.
Добавьте слою стиль Drop Shadow / Тень с настройками как на скрине ниже.
Blend Mode / Режим наложения: Linear Burn / Линейный затемнитель
Color / Цвет: #000000
Этап 6. Бонус как добавить розовый оттенок.
Шаг 1.
Выберите группу «Эффекты» и добавьте корректирующий слой Solid Color / Цвет выше группы.
Дважды кликните на иконке корректирующего слоя чтоб задать нужный цвет, а установил #eeb5ef, после чего нажмите Ок чтоб применить результат.
Шаг 2.
Установите слой в режиме обтравочной маски к группе «Эффекты» , измените режим смешивания для корректирующего слоя на Multiply / Умножение и понизьте значение Opacity / Непрозрачность до 90%.
Вот и все...
Поздравляю вы выполнили урок
Автор: Tom Piccarreda
Источник: Tutsplus
Переводчик: 2 fingers
Комментариев нет:
Отправить комментарий