Понедельник, 29.04.2024, 16:16
Главная Регистрация RSS
Приветствую Вас, Гость
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: Iagajena  
Форум » Компьютерная графика, Мир Софта » Учимся работать с Adobe Photoshop » Создаём шапки для сайтов.
Создаём шапки для сайтов.
lovelyДата: Четверг, 14.01.2010, 19:32 | Сообщение # 1
Обживающиеся в городке
Группа: Проверенные
Сообщений: 44
Награды: 2
Репутация: 8
Статус:

Создаем новый документ (Ctrl+N) размером 766 на 418 пикселей и в нем новый слой (Ctrl+Shift+N). Выбираем Инструмент Прямоугольник (Rectangle Tool (U)) и рисуем область, как на рисунке внизу. Заливаем его цветом #5651a5.

Задаем для основного цвета (foreground color) значение #de1111 и выбираем Инструмент Градиент (Gradient Tool (G)) с параметрами - "линейный", "от основного к прозрачному". Создаем новый слой (Ctrl+Shift+N) и проводим Градиентом из левого верхнего угла вниз примерно на 2-3 сантиметра (см. рисунок).

Теперь, для основного цвета задаем значение #FFFFFF (белый) и, выбрав стандартную Кисть (Brush (B)) размером около 45 пикселей, рисуем (на новом слое) область, как на рисунке внизу.

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

Создаем новый слой (Ctrl+Shift+N) и, выбрав Инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)), рисуем черный прямоугольник, как на рисунке внизу:

Нажимаем Ctrl+T, чтоб вызвать Инструмент Свободная Трансформация, далее кликаем правой кнопкой мыши и в появившемся меню выбираем пункт Distort (Искажение). Меняя положение боковых маркеров фигуры, добиваемся схожести с этой:

Идем Filter>Blur>Gausian Blur (Фильтр>Размытие>Размытие по Гауссу), радиус размытия ставим 1.0. Для этого слоя Opacity (Непрозрачность) выставляем на 45%.

Повторяя предыдущий шаг, рисуем еще одну фигуру:

Создаем новый слой и, задав основной цвет #f26521 и выбрав Инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool (U)) с радиусом скругления 20 пикселей, рисуем фигуру:

Теперь, выбираем Инструмент Прямоугольное выделение (Rectangular Marquee Tool (M)), выделяем прямоугольную область (см. рисунок) и удаляем (Delete) её.

Создаем новый слой. Удерживая клавишу Ctrl, кликаем по иконке предыдущего слоя (с прямоугольником) на Палитре слоев, так чтобы он выделился. Задаем для основного (foreground) цвета - #f7aa4e, фона (background) - #f26521 и, выбрав Инструмент Градиент (Gradient Tool (G)), заливаем им, чтоб получилось, как на картинке внизу:

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

Создаем еще один новый слой (Ctrl+Shift+N) и, выбрав Инструмент Rectangle Tool (Прямоугольник (U)), рисуем прямоугольник, как показано внизу. После этого идем в Layer Styles (Стили Слоя) (кликнув дважды по иконке слоя на Панели Слоев), выбираем пункт Наложение Градиента (Gradient Overlay) со следующими цветами: #cd0000 и #ff1a00.

Создаем новый слой и, выбрав Инструмент Линия (Line Tool (U)) цвета - #942236, рисуем вертикальную линию у правой границы, фигуры сделанной ранее.

Теперь, выбираем Инструмент Прямоугольное выделение (Rectangular Marquee Tool (M)) и выделяем прямоугольник, как показано внизу. Создаем новый слой и, выбрав Инструмент Кисть (Brush Tool (B)) диаметром около 20px, рисуем тень, как на рисунке внизу.

Осталось только вставить ещё одну иконку из скачанных ранее.

Урок переведен с этого сайта.

Вопросы пишите в этой теме.Флуд будет удалён!


В Мае будет журнал sims news!Не пропусти выход!
 
katttДата: Понедельник, 25.01.2010, 12:49 | Сообщение # 2
КоТэ в бешенстве
Группа: Проверенные
Сообщений: 413
Награды: 12
Репутация: 51
Статус:

Felepp, а вставить как?

Мы с тобою нарисуем идеальный мир...
 
RiyaДата: Понедельник, 25.01.2010, 13:11 | Сообщение # 3
Элита города
Группа: Проверенные
Сообщений: 810
Награды: 15
Репутация: 170
Статус:

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


И Супер-Бложек:)
 
katttДата: Воскресенье, 18.04.2010, 11:36 | Сообщение # 4
КоТэ в бешенстве
Группа: Проверенные
Сообщений: 413
Награды: 12
Репутация: 51
Статус:

Riya, бывает! Я просто посмотрела путь шапки, и в редакторе страниц нашла и заменила на ссыль из файлового менеджера...

Мы с тобою нарисуем идеальный мир...
 
RiyaДата: Воскресенье, 18.04.2010, 15:36 | Сообщение # 5
Элита города
Группа: Проверенные
Сообщений: 810
Награды: 15
Репутация: 170
Статус:

КиШ_doll, а у меня шапка в CSS меняется...это сейчас я в кодах, как рыба...мм...ну,не в воде, но в трехлитровой банке точно!)))
А раньше умудрилась же...боже...даже писать стыдно...
Quote (Felepp)
размером 766 на 418 пикселей

почему такой именно? Шапки и больших/меньших размеров бывают....а лучше выбирать размер 1200 пикселей, тогда шапки оптимизируются под любой размер монитора



И Супер-Бложек:)
 
lovelyДата: Суббота, 24.04.2010, 13:17 | Сообщение # 6
Обживающиеся в городке
Группа: Проверенные
Сообщений: 44
Награды: 2
Репутация: 8
Статус:

Riya, лучше шапку по частям делать.А потом в 1200 выкладывать.Так не растянута картинка будет.

В Мае будет журнал sims news!Не пропусти выход!
 
Форум » Компьютерная графика, Мир Софта » Учимся работать с Adobe Photoshop » Создаём шапки для сайтов.
  • Страница 1 из 1
  • 1
Поиск:


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