• Авторизация


ФШ, делаем разрезную рамку для сайта на майле, урок от Ларисы Гурьяновой 19-11-2011 22:02 к комментариям - к полной версии - понравилось!

Это цитата сообщения Н_НИНА Оригинальное сообщение

ФШ, делаем разрезную рамку, урок от Ларисы Гурьяновой

[показать]

ПАМЯТКА НАЧИНАЮЩИМ ФОТОШОППЕРАМ

ДЕЛАЕМ РАЗРЕЗНУЮ РАМКУ В ФШ

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

[700x]
Здесь будет ваш текст
[700x]



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

Сначала запомним некоторые важные моменты.

1. Работать можно с любым размером рамки, но сохранять - не более 700 пикселей, иначе рамка растянет блог в сторону.
2. Каждый элемент рамки делается на отдельном слое! Не забываем об этом!!!
3. Рамку украшаем как угодно, но помним, что часть рамки (там, где будет текст), должна быть однотонной, без лишних деталей


Когда я делаю рамку, я не представляю, что получится в финале...Иногда фантазия уводит совершенно далеко от того, что задумывалось... В инете есть замечательные готовые скрап-наборы, вот сейчас мы одним таким и воспользуемся... Смотрим скрап-набор.

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

Откроем в ФШ [показать] Уменьшим его до 800 пикселей.

[700x]

[показать]

Точно так же поступите еще с двумя фонами:

[показать] и [показать]

Откройте в ФШ новый файл размером 800х600 пикселей с прозрачным фоном

[показать]

[показать]

[показать]

[показать]

[показать]

[показать]

Ну, вот подготовительная работа закончена. А теперь будем украшать нашу рамку.

Сначала поработаем инструментом выделения. Любым! Хотите прямоугольным, а я хочу круглым.
Сначала вырежем уголки из рамки. Сделали круглое выделение (помним, что подредактировать его можно, нажав Select -Transform Selection (Выделение - Трнсформировать выделенную область).

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

Я поставила выделение на край рамки, сняла трансформацию клавишей Enter и нажала на компьютере Delete (Удалить). Потом, не снимая выделения, перешла на слой с ромашками и снова - Delete. Видите, как преобразилась рамка?
Выделение пока не снимаем!
[показать]

Теперь снова жмем Select -Transform Selection (Выделение - Трансформировать выделенную область) и стрелочкой на компе гоним наше выделение вниз, к нижнему уголку рамки (мы же хотим одинаковые дырочки?)
Пригнали, поставии как надо, сняли трансформацию - Enter И опять по-новой....Встали на верхний слой - Delete (Удалить). Перешли на нижний слой - Delete (Удалить). Второй уголок готов.
Снова трансформируем выделение и гоним его вправо....И т.д.
После всех манипуляций у вас получится вот такая заготовочка. Выделение, наконец-таки, можно снять Ctrl+D

[показать]

Теперь будем делать кнопочки и вставлять их в уголки рамки. Вернее, сделаем одну кнопку, а потом будем ее только копировать.
Не забыли Правило № 2? Каждый элемент рамки делаем на новом слое!
Следовательно, делаем новый слой, жмем справа на нижний белый квадратик

[показать]

Инструментом выделения на этом новом слое сделали кружок. Не попали с размером? Не беда...Мы умеем трансформировать выделение... Еще раз...Select -Transform Selection (Выделение - Трнсформировать выделенную область) Поправили, поставили кружок на место и снимаем трансформацию - Enter .
Теперь "ведерком" залили кружок зеленым узором (pattern), применили к нему стили слоя - Тиснение и Обводка, все точно так же, как с рамочкой. Хорошая кнопочка получилась?
Теперь жмем Ctrl+J - создали копию слоя. Инструментом перемещения переносим кнопку во второй угол.
Опять жмем Ctrl+J - вот и третья кнопка готова. Перемещаем ее на место. И точно так же поступаем с четвертой! Ну, вот так гораздо веселее стало!!!

[показать]

Теперь точно так же, как и с кнопочкой, поступим с полосками. Что помним? Что каждую новую деталь делаем на новом слое!!
Создали новый слой. Инструментом прямоугольного выделения нарисовали полоску. Залили ее узором. Применили стили слоя - тиснение и обводку. Словом, ничего нового... Получилась широкой? Снимаем выделение - Ctrl+D, нажимаем Edit - Free Transform (Редактирование - Свободное тансформирование) и исправляем длину и ширину полоски... Потом сняли трансформацию - Enter
Делаем копию полоски - Crl+J и инструментом перемещения передвигаем вторую полоску на противоположную сторону рамки.
Точно так же поступаем со всеми выпуклыми частями рамки. Их можно выделять также другими инструментами, например, Многоугольное лассо (Polygonal Lasso Tool)
C его помощью можно сделать вот такую кнопочку
[показать]

Вот как выглядит рамка на этом этапе.

[показать]

Теперь встаем на слой с зеленым фоном рамки, будем делать в нем дырочки.
Сначала сделаем большое прямоугольное выделение и нажали Delete (Удалить), сняли выделение Ctrl+D

[показать]

Теперь делаем круглые дырочки. Сделали круглое выделение на слое с зеленым фоном. Свободным трансформирование поставили куда надо.
Сняли трансформацию - Enter.
Нажали Delete (Удалить),. Выделение не снимаем!
Жмем ...Select -Transform Selection (Выделение - Трансформировать выделенную область) и стрелочкой компа гоним кружок вправо...до конца рамки...

[показать]

И опять все по-новой...Трансформируем, двигаем на место, снимаем трансформацию, удаляем...
Надеюсь, вы уже запомнили.. Когда сделали все дырочки, сняли выделение Ctrl+D

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

[показать]

Ну, а дальше..., у кого как работает фантазия... Скрап-набор перед вами, творите...
Не забудьте подписать свою работу. У меня вот что получилось...

[показать]

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

Прежде чем сохранять рамку, надо убрать лишние прозрачные пиксели по краям рамки.
Нажимаем Image - Trim... (Изображение - Тримминг...), ОК!

[показать]

Но...может быть такое...С одной стороны рамки прозрачные пиксели не убрались. Поступаем таким образом.
Инструментом перемещения двигаем рамку к этому краю. Подвинули? И снова повторите Image - Trim... (Изображение - Тримминг...), ОК!

[показать]

Вот, теперь совсем другое дело!
Мы помним, что ширина нашей рамки не должна быть больше 700 пикселей.
Проверяем - Image - Image Size (Изображение - Размер изображения) Если больше или намного меньше, исправляем (не забудьте поставить галочку на сохранение пропорций).

[показать]

Теперь сохраняем нашу рамку. Жмем File - Save for Web...(Файл -Сохранить для Веб...)

[показать]
[показать]
[показать]

Все, работа в ФШ закончена. Теперь будем собирать нашу рамку.
Не мною придумана вот такая замечательная формула разрезной рамки:

<div align="center"><img data-cke-saved-src="АДРЕС ВЕРХНЕЙ ЧАСТИ РАМКИ" src="АДРЕС ВЕРХНЕЙ ЧАСТИ РАМКИ" border="0" /><table border="0" background="АДРЕС СРЕДНЕЙ ЧАСТИ РАМКИ" cellpadding="0" cellspacing="0"><td width="700" valign="middle"> <center><i><text color="#1d4970" size="5"><text face="Monotype Corsiva"><center><b> ВАШ ТЕКСТ</b></center></text></text></i></center></td></table><a data-cke-saved-href="АДРЕС ВАШЕГО БЛОГА" href="АДРЕС ВАШЕГО БЛОГА" target="_blank"><img data-cke-saved-src="АДРЕС НИЖНЕЙ ЧАСТИ РАМКИ" src="АДРЕС НИЖНЕЙ ЧАСТИ РАМКИ" border="0" /></a></div>



Как узнать адреса частей рамки? Очень просто. Идем в Радикал-Фото.

[показать]
[показать]

Аналогично узнам и вставляем адреса средней и нижней частей рамочки.
Адрес блога узнаем так.

[показать]

Ну вот, пожалуй, и все! Вставив в формулу все свои значения, получаем вот такую рамку:

[показать]
Здесь будет ваш текст.
Надеюсь, что у вас все получилось.
Удачи вам в творчестве!!!

[показать]
для вас Лариса Гурьянова

вверх^ к полной версии понравилось! в evernote
Комментарии (1):
Nabrilin 21-11-2011-15:44 удалить
Очень подробное объяснение.Где взять время для всего,всего,всего .... Или меня слишком много интересует.


Комментарии (1): вверх^

Вы сейчас не можете прокомментировать это сообщение.

Дневник ФШ, делаем разрезную рамку для сайта на майле, урок от Ларисы Гурьяновой | selinata - И смеха "ради" и познания "для" | Лента друзей selinata / Полная версия Добавить в друзья Страницы: раньше»