С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Творческий дизайн Timeline для Facebook в Фотошопе

Творческий дизайн Timeline для Facebook в Фотошопе

Timeline – это самое радикальное изменение в социальной сети Facebook! Теперь каждый может показать всю свою жизнь в полном объёме. 

Что такое Timeline? Пользователи социальной сети могут, если захотят, наглядно продемонстрировать на своей странице всю жизнь. Все старые записи, которые были удалены, становятся снова видны пользователю и его друзьям. Профильные данные и действия в Facebook отображаются на одной линии, которая заменяет прежние профильные страницы Facebook. 

 

В этом уроке мы покажем вам процесс создания великолепной обложки Facebook Timeline в Photoshop.  Надеюсь, вы узнаете несколько полезных советов. Итак, давайте начнем!

 

Ресурсы

 

Pattern

Скачать PSD файл

 

Предварительный просмотр

 

 

Шаг 1


 

Создайте новый документ в Photoshop с шириной в 851 пиксель и высотой в 315 пикселей.

 

 

Шаг 2

 

Далее, мы определим вырез пространства, используемого для размещения значка профиля Facebook. Его ширина должна быть 168 пиксель, а его высота должна быть 103 пикселя. Кроме того, чтобы соответствовать ограничениям Facebook дизайна правильно, вырез пространства должен быть расположен в 24 пикселах от левого края холста. Мы будем позиционировать наш вырез в 24 пикселях от левой границы. Итак, перейдите в меню Просмотр> Новая направляющая (View> New Guide). Используйте значения ниже для идеального позиционирования. Теперь выберите инструмент Прямоугольник (Rectangle Tool) и нажмите на документе. Используте значения как показано ниже, чтобы проследить точные размеры для прямоугольника и поместите его на направляющей, как показано ниже.

 

 

Шаг 3

 

Теперь мы можем конструировать нашу крышку имея эти ограничения в виду.  Установите цвет # d2d1d0 в качестве цвета переднего плана и залейте фон, используя инструмент Заливка (Paint Bucket Tool).

 

 

Шаг 4

 


Далее мы будем накладывать тонкий узор на второй план. Откройте файл с шаблоном PNG из ресурсов выше в Photoshop. Теперь перейдите в меню Редактирование> Определить узор (Edit> Define Pattern), назовите его как вам больше нравится. Вернитесь в документ и дважды щелкните на фоновый слой, чтобы открыть окно стилей слоя. Примените следующие настройки для стиля Наложение узора (Pattern Overlay).

 

 

 

Шаг 5

 

Теперь мы покажем вам, как создать бирку. Установите цвет # eae2ce в качестве цвета переднего плана. Затем выберите инструмент Прямоугольник (Rectangle Tool) и кликните на холсте, чтобы открыть диалоговое окно. Введите следующие значения и нажмите кнопку OK. Назовите его «Tag».

 

 

Шаг 6

 

Дважды щелкните по слою «Tag» и примените следующие настройки стилей слоя на нем.

 

 

 

 

 

Шаг 7

 

Далее мы добавим текстуру в слой «Tag». Зажмите клавишу Ctrl и кликните по слою, чтобы сделать выделение вокруг нго и создайте новый слой. Заполните выделение черным цветом с помощью инструмента Заливка (Paint Bucket) и перейдите в меню Фильтр> Шум> Добавить шум (Filter> Noise> Add Noise). Используйте здесь следующие настройки.

 

 

После этого измените Режим наложения (Blend Mode) на Экран (Screen) и снизьте непрозрачность до 40%.

 

 

Шаг 8

 

Установите цвет # c59b70, выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте небольшой прямоугольник внутри тега. На панели управления выбранным инструментом измените цвет заливки на Нет заливки (None) и задайте обводку размером в 2 пункта.

 

 

Шаг 9

 

Теперь мы добавим текст поверх тега. Выберите текстовый инструмент и введите текст заголовка. Мы здесь использовали шрифт «Aller Display».

 

 

 

 

Шаг 10

 

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

 

 

Шаг 11

 

Далее мы сделаем отверстие внутри бирки. Чтобы добиться этого, сделайте небольшой эллипс, используя тот же цвет (# eae2ce) на бирке чуть выше слоя формой самой бирки. Прежде чем двигаться дальше, щелкните правой кнопкой мыши на слое с биркой и в контекстном меню выберите команду Скопировать стиль слоя (Copy Layer Style). Теперь переместите эффекты от слоя с биркой на значок удаления, который присутствует на нижней части панели слоев. Затем выберите оба эллипса и перейдите в меню Слой> Комбинировать фигуры> Вычитание передней формы (Layer> Combine Shapes> Subtract Front Shape), и вы получите бирку с отверстием в результате. Щелкните правой кнопкой мыши по этой новой форме и в контекстном меню выберите команду Вставить стиль слоя (Paste Layer Style) вариант, чтобы применить те же эффекты, что применяются на бирке.

 

 

Шаг 12

 

Чтобы отверстие выглядело как металлическое кольцо, нарисуйте ещё эллипс охватывающих отверстие, используя цвет # 988575. Установите его цвет заливки на Нет заливки (None) и дайте ему обводку в 4 пункта. Назовите слой «Ring».

 

 

Шаг 13

 

Примените к слою «Ring» следующие настройки стиля слоя.

 

 

 

 

 

Шаг 14

 

Далее сделаем его тень. Дублируйте слой с биркой, измените его цвет на черный и поместите его над фоновым слоем. Теперь перейдите в меню Редактирование> Трансформирование> Деформация (Edit> Transform> Warp) и слегка перетащите его нижний правый угол немного вниз. После этого перейдите в меню Фильтр> Размытие> Размытие по Гауссу (Filter > Blur > Gaussian Blur) и используйте радиус в 2.5 пикселя. Уменьшите непрозрачность слоя с тенью до 50%.

 

 

Шаг 15

 

Далее мы сделаем несколько бирок с кнопками социальных сетей сервисов путём дублирования оригинальной бирки. Во-первых, соберите все слои, образующие бирку, в одну группу. Продублируйте её, удалите все текстовые слои в группе, и выберите бирку вместе с её тенью и обводкой. Теперь нажмите комбинацию клавиш Ctrl + T, чтобы активировать инструмент Свободная трансформация (Free Transform) и измените размеры этих слоев, чтобы сделать бирку немного меньше как показано ниже. После этого, выберите слои образующие кольцо и измените и их размер, удерживая клавишу Shift, чтобы избежать каких-либо искажений и сохранить его в правильных пропорциях.

 

 

Добавьте текст и значок социальной сети над ним. Примените те же настройки тени на тексте, которые были применены в оригинальном тексте на бирке. Соберите эти новые слои в группу и назовите его как «Facebook tag».

 

 

Шаг 16

 

Сделайте ещё несколько бирок, просто дублировав группу «Facebook tag» и разместите их, как вам нравится. Вам просто нужно отредактировать текст и заменить иконки соответственно.

 

 

Шаг 17

 

Далее, мы создадим несколько круглых кадров, где вы сможете показывать свои фото, портфолио и т.д. Измените цвет на # e9e9e9. Теперь выберите инструмент Элипс (Ellipse Tool), кликните на холсте и создайте круг в 400 пикселей по ширине и высоте, вы можете использовать размеры до 1000 пикселей и более. После этого щелкните правой кнопкой мыши по слою с эллипсом и в контекстном меню выберите команду Преобразовать в смарт-объект (Convert to Smart Object). Теперь уменьшите размер эллипса, используя инструмент Свободная трансформация (Free Transform Tool), чтобы оно уместилось в наши размеры. Дважды щелкните по слою с эллипсом и дать ему 4-х пиксельную белую обводку.

 

 

Шаг 18

 

Поместите изображение внутри смарт-объекта, дважды щелкните слой смарт-объекта «ellipse1». Откройте новый документ. Теперь перейдите в меню Файл> Поместить (File> Place) и выберите нужное изображение. А затем перейдите в меню Слой> Создать обтравочную маску (Layer> Create Clipping Mask), чтобы ограничиться изображением в круге.

 

 

После этого перейдите в меню Файл> Сохранить (File> Save).

 

 

Шаг 19

 

Теперь сделаем тень, создайте эллипс, используя инструмент Овальная область (Elliptical Marquee Tool) чуть ниже слоя смарт-объекта и заполните его чистым черным. Примените к нему размытие по Гауссу в 1 пиксель и перетащите его немного вправо. Затем измените Режим наложения (Blend Mode) на Умножение (Multiply) и снизьте непрозрачность до 50%.

 

 

Шаг 20

 

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

 

 

Финальный результат

 

 

Вот и всё. Урок по теме - Стильный баннер для вашего сайта.

 


Автор урока: Anum

 

Переводчик урока: Ирина Шипилова 

Ссылка на источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 19.07.2013
  •   Просмотров: 3615
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

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

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки