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

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

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

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

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

И так, садитесь по удобнее, я начинаю свой рассказ :smile: 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. После того как мы подобрали картинки, открываем их в фотошопе. Переносим каждую картинку в документ с нашей шапкой.
(Внимание! Слой с картинкой после добавления в новый документ может оказаться ниже других слоев распложенных в этом документе. Порядок слоев в документе можно изменять мышью. Для этого в палитре Layer (Слои, F7) выберите нужный слой, нажмите мышью на него, теперь не отпуская мышь перетащите слой выше или ниже других слоев в документе.) Если вы хотите что бы слой оказался выше всех слоев – выделите слой и нажмите Shift+Ctrl+].)

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

Далее будем делать эффект выхода картинки из кадра. Для этого мы будем использовать маски в фотошопе. Выбираем слой с нашей картинкой, после этого выбираем инструмент инструмент Прямоугольное выделение фотошоп Rectangular Marque Tool (Прямоугольное выделение, M) и рисуем прямоугольное выделение поверх сделанного фона.
маски фотошоп
После этого в палитре Layers (Слой, F7), нажимаем на кнопочку маски фотошоп.
маски фотошоп
Далее убираем замочек (кликаем по нему мышкой) между картинкой и ее маской. После этого выбираем саму картинку.
маски фотошоп
Проделанные действия позволят нам двигать картинку внутри маски, так же внутри картинку можно трансформировать. Двигать картинку можно клавишами - Вправо, Влево, Вверх и Вниз на клавиатуре или с помощью инструмента двигать объекты фотошоп Move Tool.
маски фотошоп
Двигая и трансформируя картинку добьемся нужного нам результата:
маски в фотошоп
(нажмите на картику для просмотра оригинала)

Теперь нам осталось только добавить ковбою обрезанную шляпу. Для этого идем в палитру со слоями (жмем F7), выделяем наш слой с картинкой и выбираем пиктограмму с маской слоя.
маски фотошоп
Далее устанавливаем в фотошопе цвет переднего/заднего плана по умолчанию (черный/белый), для этого жмем D на клавиатуре, так же можно изменять цвета местами с помощью клавиши X (есть так же соответствующие кнопочки внизу панели с инструментами).
изменить цвет фотошоп
После этого выбираем инструмент кисть фотошоп Brush Tool (Кисть, B). Теперь рисуя кистью когда выбран Черный цвет - как цвет переднего плана, на картинки у нас будет маска стираться, а когда у кисти будет стоять Белый цвет – как цвет переднего фона, картинка у нас будет появляться.
маски фотошоп
Проще говоря, при активном Черном цвете, кисточка работает как Резинка (т.е. стирает изображение), а при активном Белом цвете кисточка работает как Восстановитель (восстанавливает все то, что скрыто). Аккуратно обработав картинку кистью, у нас получился эффект выхода из картинки (шапка выходит за пределы картинки).
маски фотошоп
Добавим внутреннюю тень для картинки. Добавим стиль для слоя Inner Shadow (Внутренняя Тень).
маски фотошоп
вот что получилось:
Inner Shadow фотошоп
Осталось повторить все эти действия для второй и третьей картинки. В конечном итоге у меня получилась готовая шапка для сайта или блога.
шапка для сайта (нажмите на картику для просмотра оригинала)
Шапка получилась простенькая, но со вкусом. Теперь шапку нужно "перевести" в интернет формат - сверстать, как это сделать читайте в нашей статье - Примеры верстки «шапок» для сайтов. Просто повторите шаги по пунктам, и вы с легкостью научитесь делать сами такие шапки в фотошопе. Если вам что то не понятно в уроке - пишите в комментариях, постараюсь помочь. Так же предлагаю всем желающим бесплатно скачать шапку для сайта в psd формате. У многих читателей после прохождения урока возникли вопросы - как сделать ссылки в шапке рабочими, пришлось мне опубликовать решение - Как сделать текст в меню в виде ссылок.

Отзывов к посту "Урок фотошоп - Как сделать шапку для сайта или блога" уже 95:

Аватар пользователя Наталья

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

Все остальное у меня получается, а вот это не совсем понятно как сделать и причем аккуратно. Заранее спасибо за ответ!

Аватар пользователя Анастасия

Спасибо. Очень хороший урок, даже я -чайник по нему сделала шапку. 

Но теперь вопрос -не могу понять как ее засунуть на сайт, как из нее получить код ?

Аватар пользователя Владислав

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

Аватар пользователя Павел

А у меня никак не получается доделать шапку на своем сайте http://nanofakt.ru/

Кто поможет?

Аватар пользователя марина

хорошая статья, все прекрасно описано и подробно расписали

Аватар пользователя ГостьСветлана Журба

Да, урок действительно практичный и доступный. Но, желательно, установить эту программу. Большая просьба рассказать как это сделать. Так как у меня большая проблема с шапкой. Я уже год рыскаю по интернету в поисках пошаговых уроков по этому вопросу. Наконец ко мне пришли ваши уроки и они мне очень нравятся, они просты и доступны. У Накрошаева очень сложно и не для моего ума. Буду вам очень благодарна.

С наилучшими пожеланиями,
Светлана Журба

Аватар пользователя сергей

Большое спасибо за урок !!!

Аватар пользователя Николай

Большое спасибо за уроки,доходчиво и все понятно!Респект автору!

Аватар пользователя Valeo

Отличная статья! Вполне применима для сайтов начального уровня. Плюсую!!!

Аватар пользователя Гость

А как цвет не синий cделать а бежевый допустим?

Аватар пользователя Сергей Иванов

выбрать синий цвет в палитре инструментов внизу и залить заливкой

или залить слой любым цветом и в стилях слоя выбрать настрокуй - Наложение цветом или Градиентная заливка с нужными вам цветами.

Аватар пользователя Нурболат

Спасибо! Я бы хотел бы сделать шапку для своего сайта, как с вами связаться!

Аватар пользователя Сергей Иванов

Контакты есть на блоге, но сразу хочу сказать что на заказ больше не делаю, извините.

Аватар пользователя Гость

А почему у вашего сайта нет красивой шапки?

Аватар пользователя Сергей Иванов

пока в этом нет нужды

Аватар пользователя Антон

помогите, у меня между буквами растояние большое, как его уменьшить или убрать

Аватар пользователя Сергей Иванов

мне сразу в голову пришло 2 решения вашей проблемы:

1. выбираете слой с текстом (или выделяете инструментом Текст - нужный текст мышкой), далее открываете палитру Символ (Окно - Символ), и играете с настройкой - Трекинг для выделенных символов

2. попробовать использовать другой шрифт

Аватар пользователя Антон

спасибо

Аватар пользователя Сергей Иванов

пожалуйста)

Аватар пользователя Гость

А вот как сделать так чтоб на сайт поместить а от туда типа гиперсылки ну нажал на форум и на форум вышло??

Аватар пользователя Сергей Иванов

просто, в конце урока есть несколько ссылок, пройдитесь по ним, думаю разберетесь)

Аватар пользователя Денис

Спасибо большое за урок. Очень красиво получается, плюс все показано как сделать. Еще раз спасибо

Аватар пользователя Сергей Иванов

пожалуйста, рад что мой урок вам пригодился!

Аватар пользователя Гость

Сергей. добрый день! можно ВАМ ЗАКАЗАТЬ ШАПКУ для сайта?

Аватар пользователя Сергей Иванов

к сожалению, временно новые заказы не беру.

Аватар пользователя Алексаедр

Сергей, большое спасибо за урок! Я "ржавый чайник", тобишь пенсионер, перерыл весь инет, скачал гигабайты видео - все это размазня! И о счастье - Ваш блог! Вы-молодец - вещаете именно для народа! Теперь и мой блог будет уникальным. Спасибо! Блог - в закладки и рассылки!

Аватар пользователя Сергей Иванов

Вот от таких комментариев хочется работать дальше больше и больше) спасибо за комментарий Александр, рад что вам мой урок пригодился!

Аватар пользователя Анастасия

Большое спасибо за урок. Очень пригодился.

Аватар пользователя Reckas

Интересный пост, особенно понравились картинки выходящие за рамки

Аватар пользователя Nata

Хороший урок, благодарю. Именно подобное искала. А если еще и анимацию картинок сделать будет супер, но это уже наверно не к Вам, а к верстальшику.

Аватар пользователя Макс

Я не понял как сделать шапку для сайта у меня стоит фотошопCS5 помоги плизз

Аватар пользователя Сергей Иванов

я пошагово описал все, просто повторите и будет шапка наподобие)

Макс напишите что именно вы не поняли, постараюсь вам помочь.

Аватар пользователя Гость

Спасибо klerik. Ты просто молодец. Поболе бы таких как ты)

Аватар пользователя Сергей Иванов

спасибо, буду стараться и дальше)

Аватар пользователя Len4ik

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

Аватар пользователя Сергей Иванов

У меня в ближайших планах как раз сделать подобный видеоурок. Len4ik, может вы примерно покажите какая у вас проблема с фоном, просто у всех разные фотографии (где то нужно качественно выделить волосы, фон сливается с с человеком, где то просто достаточно отделить человека от фона и т.д. - под все случаи подстроится в одном уроке не получится).

p.s. пожалуйста все просьбы публикуйте пожалуйста сюда - Что бы вы хотели увидеть на страницах блога?, а тут обсуждаем урок)

Аватар пользователя Dory

Добрый вечер!

Скажите пожалуйста как уменьшить размер готовой шапки форума. У меня шапочка размером 1000x390, как сделать ее меньше?

Аватар пользователя Сергей Иванов

Размер можно изменить через меню Image (Изображение) - Image size (Размер изображения).
там можно пропорцилнально изменить размер вашей шапки.

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

Аватар пользователя Гость

klerik

Спасибо большое за уроки довольно интересные и простые, еще раз спасибо!!!

Аватар пользователя Сергей Иванов

спасибо и вам, читая такие комментарии, заряжаюсь энергие на создание новых уроков)

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

Аватар пользователя Гость

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

Аватар пользователя Сергей Иванов
Аватар пользователя Гость

А есть урок как сделать из готовой шапки свою ?

Аватар пользователя Сергей Иванов

нет, такого урока у меня нет.

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

В конце моего урока, как раз есть ссылка на скачивание готового psd-исходника шапки.

Аватар пользователя Андрей

супер, спасибо за урок

Аватар пользователя Сергей Иванов

Пожалуйся) Рад что вас заинтересовал мой урок)

Аватар пользователя игорь

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

Аватар пользователя Сергей Иванов

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

Аватар пользователя MINK

Здравствуйте,скажите пожалуйста,как сделать так,чтобы кнопки"ГЛАВНАЯ""О САЙТЕ" и т.д. кидали меня на ссылку при нажатии на них,а то сейчас получается обычная картинка...

Аватар пользователя Сергей Иванов

Как раз на днях описал решение этой проблемы - Как сделать текст в меню в виде ссылок. Пользуйтесь)

что не понятно спрашивайте.

Аватар пользователя Гость

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

Аватар пользователя Сергей Иванов

рад, что вам понравился мой урок)

Аватар пользователя Гость

Я не понял как сделать шапку для сайта у меня стоит фотошопCS5 помоги плизз буду рад skype:maydjikman.

Аватар пользователя ROLF

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

Аватар пользователя Сергей Иванов

Отписал вам в скайп.

Аватар пользователя Sacr

Добрый вечер очень хороший блог и урок. На счет как там урока про том что бы Главная, О сайте, Контакты и прочее превратить в ссылки? Есть ссылка на ваш урок?

Аватар пользователя Сергей Иванов

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

Аватар пользователя Артур

Автор пожалуйста, сделайте урок подробный отдельный на тему как сделать из этих надписей меню что бы в виде ссылок были. Здесь много кто этого требует. Ну или ссылку дайте где это написано подробно, а то в поиск что не ввводил вообще ничего не нащел.

Аватар пользователя Сергей Иванов

В течении недели постараюсь сделать подробный фотоурок на эту тему.

Аватар пользователя Артур

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

Аватар пользователя SweetFruits

Какой шрифт на самой первой картинке в посте, там где еше написано фотошоп урок...

Аватар пользователя Сергей Иванов

Шрифт очень похож на Myriad Pro, исходник к сожалению не сохрналися(

Аватар пользователя Елена

Супер, спасибо!

Аватар пользователя Сергей Иванов

Елена, рад что вам понравился урок. Заходите почаще - будут еще.

Аватар пользователя Гость

Как сделать рисунок меньше в самой рамке не пойму!!!!А так урок класный!!

Аватар пользователя Сергей Иванов

Выбираете пиктограмку с картинкой, нажимаете ctrl+T и трансформируете картинку как вам нужно.

Я ответил на ваш вопрос?

Аватар пользователя Joyful

Давно работаю в фотошопе. Прочитала урок - замечательно! Просто исчерпывающе. Не планируете ли еще мастер-классы? Тема фотошопа - бездонна:)

Аватар пользователя Сергей Иванов

Планирую) Joyful на какую тему хотите увидеть мастер-класс?)

Аватар пользователя Надежда

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

Аватар пользователя Bourne

Большое спасибо за статью, написано все очень доступно и понятно, никогда не пользовался фотошопом, но с этой статьей думаю у меня все получится ;)

Аватар пользователя Марина

А можно подробнее описать как картинку вставить в шапку???Я в фотошопе первый раз!

Аватар пользователя Сергей Иванов

Марина вы 5 пункт читали? там все пошагово же написано, как проще описать я уже не знаю(

если хотите могу помочь по фотошопу (пишите через обратную связь на сайте).

Аватар пользователя Гость

Я совсем не соображаю в фотошопе!У меня не получилось закрасить рамки для картинок и картинку вставить не могу((Вернее не найду как!((

Аватар пользователя Сергей Иванов

также обращайтесь ко мне на почту, помогу чем смогу :smile:

Аватар пользователя Гость

здраствуйте мне нужен собеседник по нек вопросами по дизайну не поможите?

Аватар пользователя Сергей Иванов

написал вам на почту.

Аватар пользователя Андрей

Классный урок) шапка выглядит стильно и можно сделать очень оригинально ))

Тем кто писал на счет ссылок:
В фотошопе не пишите слова меню...а просто оставьте пустую нижнюю полосу,
потом её добавьте в HTML background=".jpg" и туда уже прописывайте ссылки)
(Ну так я сделал,есть еще разных вариантов)

Аватар пользователя Перспективный блоггер

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

Аватар пользователя Гость

Да! То что доктор прописал! Как новичоку, мне было оч полезно сие узреть.:yes3:

Единственное... Присоединяюсь к... "Не понятно, как сделать чтоб ссылки в шапке были рабочими...это же просто надписи!!"

Аватар пользователя onjee

Не ужели что то новенькое.. а то достали сайты где мусолят одни и теже уроки по фотошопу с демиарта или photoshopmaster'а....

Симпотичная шапка получилось)

Аватар пользователя Гость

я так и не понял вот у меня на картинки эти надписи ипо меню и тд а как сделать чтобы при нажатии открывалась нужная страница???:dash:

Аватар пользователя Albina

У меня вопрос?!
У меня фотошоп CS5 и я в нём не могу найти ведёрко Paint Bucket Tool, то ли я слепая, или может быть в этой версии этот инструмент видоизменён, помогите пожалуйста мне его найти.
И ещё, у меня не получается перетащить картинки в слой с шапкой, не пойму почему, вроде делаю всё по инструкции, короче застряла я! HELP!!!
И спасибо за урок, очень подробно описан :smile:

Аватар пользователя Oly

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

Аватар пользователя Сергей Иванов

Oly, сейчас посмотрел русскую версию фотошопа, в нем оказывается не "Вид", а "Просмотр".

Вам нужно выбрать Просмотр->Линейки или же просто нажать CTRL+R (при включенной английской раскладки на клавиатуре).

Аватар пользователя BloggerMen

Очень подробно написано. Даже новички осилят без проблем. Спасибо большое за хороший урок.

Аватар пользователя Сергей Иванов

Рад, что вам понравился урок :ad:

Аватар пользователя Игорь

Спасибо большое! Очень толково и просто написано!

Аватар пользователя Гость

Не понятно, как сделать чтоб ссылки в шапке были рабочими...это же просто надписи!!

Аватар пользователя Fatalist

ее нужно сверстать.

Аватар пользователя EMFBI

Классно!Всё так подробно, супер!:yes3:

Аватар пользователя seoshneg

Хороший урок, почерпнул новенькое, иду шапку на сайте менять :smile:

Аватар пользователя Сергей Иванов

RA3Player, toribloger, flash, очень рад, что вам понравился урок. Буду делать еще фотошоп уроки :smile:

Так же хочу попробовать сделать видеоурок + свое аудио сопровождение и выложить на блог :ad:

Но пока это только планы ...

Аватар пользователя flash

надо будет исправить шапку на своем сайте спасибо за урок очень полезный

Аватар пользователя toribloger

отличная статья для новичков! все очень четко и подробно описано, автор молодец

Аватар пользователя RA3Player

Спасибо, статья самое то для новчика, очень подробно раписал все действия. Побольше бы таких статей про дизайн (можно ещё и про Flash что-нибудь рассказать). Блог в закладки добавил :)

Отправить комментарий

Содержимое этого поля является приватным и не будет отображаться публично.
  • Строки и параграфы переносятся автоматически.
  • Используйте специальные теги [adsense:format:slot] или [adsense:format:[group]:[channel][:slot]] или [adsense:block:location] для показа Google AdSense ads.
  • Вы можете использовать метки BBCode в тексте.
  • Вы можете разместить код, используя теги <code>...</code>(общий) или <?php ... ?> (выделенный PHP).

Подробнее о форматировании