Урок фотошоп — Как сделать шапку для сайта или блога

Дорогие друзья сегодня мы с вами рассмотрим такой актуальный вопрос – как сделать шапку для сайта или блога? После изучения данного урока вы научитесь делать шапки для сайтов в фотошопе. Делать мы будем вот такую шапку:

(нажмите на картику для просмотра оригинала)

 

У меня стоит Photoshop CS4 (английская версия). Будем считать что к нам поступил заказ на изготовление шапки для сайта или блога. Заказчик прислал образец будущей шапки и пояснил:

Слева на шапке хочу тематическую иконку + название сайта и слоган, справа будет 3 тематических картинки из мульфильмом и фильмов. Снизу на шапке будет горизонтальное меню (по центру).

(нажмите на картику для просмотра оригинала)

И так, садитесь по удобнее, я начинаю свой рассказ 1. Создаем новый документ File→New (Файл→Новый или CTRL+N– в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп). В окошке я указал следующие параметры:

В итоге получился новый документ:

(нажмите на картику для просмотра оригинала)

После этого сделаем небольшую настройку фотошопа: Ставлю галочку Auto-Select (Автоматически выбрать) и в выпадающем меню выбираю Layer (Слои) – данная настройка позволяет выбрать любой слой по клику на нем.

Включаем шкалу-линейку для документа: Идем Views→Rules (Вид→Линейки или просто жмем CTRL+R) должна появиться горизонтальная и вертикальная шкала-линейка.

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

После этого я с помощью направляющих (щелкаете по линейке и тянете мышку вправо или вниз), размечаю места под основные элементы шапки:

(нажмите на картику для просмотра оригинала)

Направляющие можно Показывать/Прятать с помощью View→Show→Guides (Вид→Показывать→Направляющие) или CTRL+; 2. Приступим к созданию основных элементов шапки. Создадим фон для шапки. Идем Windows→Layers (Окно→Слои или F7). Дважды щелкаем по слою Background, тем самым преобразуем его в простой слой (название слоя я указал – fon-shapki)

Далее еще раз дважды щелкаем по слою fon-shapki и открывается окошко со стилями слоя, там выбираем нужный стиль для слоя, я выбрал градиентную заливку – Gradient Overlay (Заливка градиентом) и поставил следующие настройки. Щелкаем два раза по полоске с градентом:

В следующем окошке щелкаем мышкой по левому маркеру:

В открывшемся окошке, внизу указываем цвет 196ca6 и жмем OK.

Далее щелкаем по правому маркеру и в открывшемся окошке указываем цвет 0048a0 и жмем OK. Далее копируем наш слой с фоном. В палитре Layers (Слои, F7) выбираем наш слой мышкой, далее кликаем мышкой на слои и не отпуская кнопки мыши переносим слой на следующую иконку и отпускаем мышку. Создастся новый слой – копия предыдущего (можно просто нажать CRTL+J). Не снимая выделение со нового слоя, установим ему Opacity (Непрозрачность) в 18%.

Далее щелкаем два раза новому слою, снимаем галочку с Gradient Overlay (Заливка градиентом) и ставим галочку Pattern Overlay (Заливка текстурой), ставим следующие настройки:

Все фон для шапки у нас готов. 3. Далее сделаем фон для горизонтального меню снизу. Делаем новый слой – нажимаем по пиктограмме или просто жмем Shift+Ctrl+N (у нас получился новый прозрачный слой). После этого выбираем инструмент Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение.

(нажмите на картику для просмотра оригинала)

После этого заливаем наше выделение произвольным цветом. Берем инструмент

Paint Bucket Tool (Ведро, G) и кликаем по выделению (я выбрал цвет 165394).

Переходим в стили нового слоя и ставим галочки напротив следующих пунктов: Drop Shadow (Отбрасывать тень), Gradient Overlay (Градиентная заливка), Stroke (Обводка), со следующими настройками:

После этого укажем Opacity (Непрозрачность) слою в 80%.

(нажмите на картику для просмотра оригинала)

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

Horizontal Type Tool (Горизонтальный текст) и щелкаем на шапке в том месте, в котором планируем написать надпись, и пишем ее. Маленькая подсказка. Cлои очень удобно двигать или перетаскивать из документа в документ с помощью инструмента Move Tool. Я выбрал для названия сайта надпись “Myvideo.com” и настройки текста выбрал следующие:

Для слогана выбрал надпись “только лучшее видео и фильмы” и следующие настройки текста:

Для пунктов меню я выбрал надписи “Главная”, “О сайте”, “Контакты”, “Поиск”, “Реклама на сайте”, “Блог” я выбрал следующие настройки текста:

И вот что у меня получилось.

(нажмите на картику для просмотра оригинала)

Для слоя с названием сайта, применил следующие настройки для стилей слоя (Drop Shadow и Bevel and Emboss).

Что бы изменить цвет текста, выбираем инструмент , щелкаем прямо по тексту с названием сайта и выделяем текст для которого нужно изменить цвет (я выбрал цвет – add7fe).

5. После этого нам нужно подобрать тематическую иконку. Иконку можно легко найти на интересном сайте Iconfinder.com, просто заходим на сайт, вводим слово характеризующее нужную нам тематику (я ввел слово – Video) и нажимаем Search (Поиск). Выбираем понравившуюся иконку и сохраняем (кликаем правой кнопкой мыши по картинке и выбираем пункт Сохранить изображение…) ее на компьютер. Я выбрал такую картинку:

Далее открываем картинку в фотошопе File→Open. Теперь нужно перенести слой с иконкой в наш документ с шапкой. Для этого выбираем инструмент Move Tool, выбираем слои с иконкой, кликаем правой кнопкой мыши и выбираем пункт Dublicate Layer (Копия слоя).

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

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

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

У меня получилось вот так:

(нажмите на картику для просмотра оригинала)

Как видите большую часть шапки мы уже сделали, осталось добавить тематические картинки справа и у нас получиться интересная шапка для сайта или блога. 6. Покажу, на примере как я делал первую картинку. Как видите на конечном образце шапки (картинка в самом начале этой новости), все картинки вставлены в рамочки. Нам нужно создать рамку и поместить в нее картинку с нашим изображением. Для этого создадим новый слой Shift+Ctrl+N. Выбираем инструмент инструмент

Rectangular Marque Tool (Прямоугольное выделение) и рисуем прямоугольное выделение. Удобно делать выделение с направляющимися (если нужен точный размер), но можно и без них (на глаз).

Заливаем наше выделение любым цветом берем инструмент Paint Bucket Tool (Ведро, G) или просто жмем Alt+Backspace. После этого щелкаем по слою два раза и попадаем в стили слоя. Я выставил такие настройки для Drop Shadow, Color Overlay:

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

([color=#ce2c2c]Внимание![/color] Слой с картинкой после добавления в новый документ может оказаться ниже других слоев распложенных в этом документе. Порядок слоев в документе можно изменять мышью. Для этого в палитре Layer (Слои, F7) выберите нужный слой, нажмите мышью на него, теперь не отпуская мышь перетащите слой выше или ниже других слоев в документе.) Если вы хотите что бы слой оказался выше всех слоев – выделите слой и нажмите Shift+Ctrl+].)

(нажмите на картику для просмотра оригинала)

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

Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение поверх сделанного фона.

После этого в палитре Layers (Слой, F7), нажимаем на кнопочку .

Далее убираем замочек (кликаем по нему мышкой) между картинкой и ее маской. После этого выбираем саму картинку.

Проделанные действия позволят нам двигать картинку внутри маски, так же внутри картинку можно трансформировать. Двигать картинку можно клавишами – Вправо, Влево, Вверх и Вниз на клавиатуре или с помощью инструмента Move Tool.

Двигая и трансформируя картинку добьемся нужного нам результата:

(нажмите на картику для просмотра оригинала)

Теперь нам осталось только добавить ковбою обрезанную шляпу. Для этого идем в палитру со слоями (жмем F7), выделяем наш слой с картинкой и выбираем пиктограмму с маской слоя.

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

После этого выбираем инструмент Brush Tool (Кисть, B). Теперь рисуя кистью когда выбран Черный цвет – как цвет переднего плана, на картинки у нас будет маска стираться, а когда у кисти будет стоять Белый цвет – как цвет переднего фона, картинка у нас будет появляться.

Проще говоря, при активном Черном цвете, кисточка работает как Резинка (т.е. стирает изображение), а при активном Белом цвете кисточка работает как Восстановитель (восстанавливает все то, что скрыто). Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (шапка выходит за пределы картинки).

Добавим внутреннюю тень для картинки. Добавим стиль для слоя Inner Shadow (Внутренняя Тень).

вот что получилось:

Осталось повторить все эти действия для второй и третьей картинки. В конечном итоге у меня получилась готовая шапка для сайта или блога.

(нажмите на картику для просмотра оригинала)

Шапка получилась простенькая, но со вкусом.

PSD, 33 PNG, Новогодние шапки, валенки, варежки и мешок с подарками, PNG с прозрачным фоном

  PNG      806*736 px  размер: 230,93 Kb     (1174)    

  PNG      1697*1440 px  размер: 608,86 Kb     (2439)    

  PNG      1382*1807 px  размер: 248,28 Kb     (151)    

  PNG      1501*1700 px  размер: 535,98 Kb     (1257)    

  PNG      1617*1423 px  размер: 539,7 Kb     (393)    

  PNG      1266*1029 px  размер: 298,51 Kb     (784)    

  PNG      827*1128 px  размер: 108,41 Kb     (39)    

  PNG      1241*837 px  размер: 275,92 Kb     (99)    

  PNG      961*1094 px  размер: 311,22 Kb     (263)    

  PNG      1075*875 px  размер: 298,18 Kb     (111)    

  PNG      1075*904 px  размер: 303,92 Kb     (124)    

  PNG      1015*1448 px  размер: 536,63 Kb     (160)    

  PNG      1177*1187 px  размер: 389,04 Kb     (109)    

  PNG      1312*885 px  размер: 369,08 Kb     (65)    

  PNG      1020*843 px  размер: 308,11 Kb     (54)    

  PNG      1328*1022 px  размер: 344,13 Kb     (90)    

  PNG      955*779 px  размер: 253,29 Kb     (31)    

  PNG      631*712 px  размер: 173,28 Kb     (74)    

  PNG      880*726 px  размер: 251,46 Kb     (41)    

  PNG      817*1163 px  размер: 294,32 Kb     (39)    

  PNG      1444*1303 px  размер: 624,31 Kb     (99)    

  PNG      1063*1071 px  размер: 137,1 Kb     (27)    

  PNG      1213*983 px  размер: 321,35 Kb     (17)    

  PNG      897*755 px  размер: 235,17 Kb     (43)    

  PNG      885*761 px  размер: 241,06 Kb     (35)    

  PNG      878*819 px  размер: 241,86 Kb     (63)    

  PNG      965*655 px  размер: 239,87 Kb     (22)    

  PNG      1171*1247 px  размер: 313,86 Kb     (121)    

  PNG      1248*736 px  размер: 336 Kb     (7)    

  PNG      1121*736 px  размер: 287,04 Kb     (16)    

  PNG      1144*728 px  размер: 319,25 Kb     (25)    

  PNG      1223*669 px  размер: 237,77 Kb     (37)    

  PNG      907*1135 px  размер: 238,86 Kb     (17)    

PSD, 33 PNG, Новогодние шапки, валенки, варежки и мешок с подарками, PNG с прозрачным фоном

Photoshop Hat — Etsy.

de

Etsy больше не поддерживает старые версии вашего веб-браузера, чтобы обеспечить безопасность пользовательских данных. Пожалуйста, обновите до последней версии.

Воспользуйтесь всеми преимуществами нашего сайта, включив JavaScript.

Найдите что-нибудь памятное, присоединяйтесь к сообществу, делающему добро.

( 385 релевантных результатов, с рекламой Продавцы, желающие расширить свой бизнес и привлечь больше заинтересованных покупателей, могут использовать рекламную платформу Etsy для продвижения своих товаров. Вы увидите результаты объявлений, основанные на таких факторах, как релевантность и сумма, которую продавцы платят за клик. Узнать больше. )

  • Навык дизайна — добавить шляпу к фотографии

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

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

    Не напрягайся.

    Я расскажу вам, как сделать Мэг полностью безопасной с помощью PowerPoint или Photoshop.

    Этому навыку можно научиться менее чем за 10 минут. И это то, что каждый разработчик электронного обучения должен знать, как это сделать.

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

    Я всегда делаю первый шаг при проектировании всего в PowerPoint. Это мой инструмент для дизайна.

    Если я не могу сделать это в PPT, то я пытаюсь это сделать в Photoshop (и я нервничаю, потому что я просто не настолько силен в Photoshop).

    Вот скринкаст, на котором я добавляю шапку, используя только PPT:

    Подводя итог:

    1. Удаление фона с каски с помощью функции «удалить фон»
    2. Размер и масштаб, чтобы он соответствовал вашему лицу
    3. Добавить тень для реалистичности

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

    Шаг 1: Откройте изображение, которое вы хотите изменить, и изображение в каске

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

    Файл->Открыть или [CTRL+O]

    Шаг 2: Выделите каску на изображении и скопируйте ее

    Совет: Инструмент «Лассо» хорошо работает как (инструмент выделения) для вырезания каски с изображения. Сделав выбор, скопируйте его «Правка->Копировать» ИЛИ [Ctrl+C]

    Шаг 3: Вставьте скопированную каску на редактируемое изображение

    «Правка->Вставить» или [Ctrl+V]

    Совет: вы заметите, что вставленное изображение отображается как новый слой на панели слоев

    Шаг 4.