Вверх страницы
Вниз страницы
Неожиданно, правда? Спустя 4 года молчания, Стайл Веб снова открывает свои объятия. You are welcome =)


StyleWeb

Объявление

       





! АКТУАЛЬНО на февраль 2016!

Кто всё - таки  заинтересован в восстановлении SW FORUM`а, с радостью ждём вас в ЛС у ПтичьеМолоко

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » StyleWeb » Архив SW » Урок № 59. Как сделать бар.


Урок № 59. Как сделать бар.

Сообщений 1 страница 15 из 15

1

Открываем фотошоп и создаём новый новый файл:
http://keep4u.ru/imgs/s/080707/c0/c0a732914b3c297a22.jpg

Появиться такая табличка, в которой мы зададим размер нашего будущего рисунка. Для удобства, мы переведём в пикс:
http://keep4u.ru/imgs/s/080707/c7/c7ad437af1a838d70e.jpg

Затем зададим размер бара, который будет у нас - 400x75 (большие бары, делать не рекомендую, чем меньше размер, тем больше мастерства нужно, чтобы сделать красивую картинку):
http://keep4u.ru/imgs/s/080707/da/daf98ce6c56bffd5a5.jpg

Появиться такая картинка, мы разворачиваем её для удобства:
http://keep4u.ru/imgs/s/080707/87/87f19a519dbcdad167.jpg

Это поле для нашего будущего бара. Зальём фон, для этого выберем инструмент "градиент":
http://keep4u.ru/imgs/s/080707/2b/2b4a707ad917897a64.jpg

Затем выберем цвет для градиента. Их нужно два. Сначала выберем один, нажав на верхний квадратик с цветом:
http://keep4u.ru/imgs/s/080707/ae/ae34b7db8232d78a2d.jpg

Выберем бледно розовый, передвигая бегунок на розовый цвет и двигая кружок в поле с оттенками:
http://keep4u.ru/imgs/s/080707/1a/1abfad0200f9b17a1d.jpg

Затем выберем второй цвет, нажав на квадратик снизу. Это будет бледно сиреневый цвет:
http://keep4u.ru/imgs/s/080707/bf/bf693116725ac6c7e4.jpg

Теперь выберем тип градиента. Перейдём в верхнее меню и делаем, так, как показано на картинке:
http://keep4u.ru/imgs/s/080707/66/664749bfab21048359.jpg

Делаем мышью косую линию на нашем рисунке:
http://keep4u.ru/imgs/s/080707/f9/f9a1c747ffa7c35b6d.jpg

У нас получился вот такой фон:
http://keep4u.ru/imgs/s/080707/21/2163198e92b729b11c.jpg

Можно сделать дубликат слоя, и тогда мы сможем убрать ненужный слой, если он нам не понравиться и начать заново. Мы же сделаем дубликат слоя, чтобы создать дополнительный фон для нашего бара, и тогда мы сможе выбрать, какой фон лучше. Наведём мышь на середину таблички со слоем, нажмем правую кнопку мыши, затем выберем - "Создать дубликат слоя". Появиться табличка. Нажимаем ОК. У нас получилось два слоя в одинаковым фоном. Впоследствии, мы из раскрасим по-разному и выберем какой лучше. Начинаем раскрашивать наш фон. Выберем инструмент "кисть". Теперь переходим в верхнее меню и выбираем кисть с цветочком:
http://keep4u.ru/imgs/s/080707/c0/c07fa733615a34192b.jpg

Затем выберем цвет кисти. У нас пусть будет бледно зелёный. Теперь начинаем разрисовывать наш фон, ляпая на нём цветочком.
Вот как получилось. Не надо слишком заляпывать фон, а то будет некрасиво.:
http://keep4u.ru/imgs/s/080707/dd/dd277765c82fc35b7b.jpg

Если увас что-то не получилось, или вас не устраивает результат, то всегда можно сделать шаг назад и убрать ненужное действие. Теперь сделаем другой, запасной фон. Сначала, я опять создала дубликат слоя (я конечно перестраховываюсь, но это иногда спасает). Затем раскрасим новый слой звёздочками, поменяв рисунок кисти:
http://keep4u.ru/imgs/s/080707/ce/ce118dcea67e5cd8f9.jpg

Фон готов. Начнём вставлять в него картинки. Чтобы было удобней работать, мы создадим новое окно, и выберем подходящую картинку
http://keep4u.ru/imgs/s/080707/19/199497cef11452974c.jpg

Начнём вырезать нужный фрагмент. Для этого выберем инструмент "Лассо" - "прямолинейное лассо". Настраиваем его. Ставим расушевка - 7 пикс., чтобы вырезаные края не были острыми, а были слегка размытыми и мягкими, для нашего случая это и надо:
http://keep4u.ru/imgs/s/080707/0c/0c1d49d1323128e821.jpg

Теперь начинаем аккуратно вырезать. Не обязательно вырезать всю Блум. Она всё равно вся не влезет в бар. Вырежем по-пояс:
http://keep4u.ru/imgs/s/080707/96/96c311367bfb3d318e.jpg

Когда закончим вырезать и соединим линию, у нас появиться бегающий контур. Не бойтесь, если выделенный контур не совпадёт с теми линиями, по которым вы вырезали. Это получается от того, что мы сделали растушевку 7 пикс. Бегающий контур показывает резкую часть будущей картинки, остальное будет размыто, этоого мы и добивались. Чем больше пикс. вы поставите в "Растушевке", тем более плавными будут линии бегающего контура, может вообще, появиться кружок. Этого не надо бояться, когда вырежете, результат всё равно будет хороший. Теперь вырежем картинку на новый слой. Для этого нужно навести мышку в центр выделенного рисунка и нажать правую кнопку мыши. Появится такая табличка, выберем "Скопировать на новый слой":
http://keep4u.ru/imgs/s/080707/52/52fa3bc3212d11268e.jpg

Теперь, чтобы увидеть результат вырезания, мы выключим нижний слой. Для этого надо просто нажать на "глаз", (потом этот слой всегда можно будет включить, повторно нажав на "глаз"):
http://keep4u.ru/imgs/s/080707/c9/c96c78760b21a43d64.jpg

Сечас будем переносить вырезанную Блум на наш фон. В другое окно. Для этого надо сделать так: Нажать вверху мен." Выделение" и выбрать - "Загрузить выделенну. область". Появиться табличка, просто нажмите ОK:
http://keep4u.ru/imgs/s/080707/53/5380b3a4553ae2e747.jpg

Теперь нажимаем вверху, меню "Редактирование" и выбираем "Скопировать":
http://keep4u.ru/imgs/s/080707/67/67b06b8ceb9e2d0aac.jpg

Затем переходим в меню" Окно" и выбираем внизу, окно с нашим фоном, которое под №1:
http://keep4u.ru/imgs/s/080707/98/988dc752a1fbb143bb.jpg

Теперь выбираем вверху, меню "Редактирование" и "Вклеить":
http://keep4u.ru/imgs/s/080707/87/879b2c00d621526225.jpg

Вот появилась Блум в новом слое:
http://keep4u.ru/imgs/s/080707/b1/b1b0dc89e3021a0a1d.jpg

Будем уменьшать и поворачивать слой с Блум, стараясь втиснуть её в наш бар. Для этого заходим в меню "редактирование" и выбираем "Свободное трансформирование":
http://keep4u.ru/imgs/s/080707/a7/a7a8429bf84c31c034.jpg

Появиться такой прямоугольник, вокруг картинки с Блум, который можно передвигать, просто схватив мышкой, уменьшать, потянув за угол, или поворачивать, двигая уголок в стороны:
http://keep4u.ru/imgs/s/080707/89/89ff5520f2b1a14008.jpg

Блум готова, теперь добавим в бар Ская. Не буду объяснять как это делать. Это делаеться так же как и с Блум. Сначала откроем новый файл с картинкой Ская.
http://keep4u.ru/imgs/s/080707/59/5910b13c9f56a13f83.jpg
http://keep4u.ru/imgs/s/080707/39/39bc06816976e98393.jpg

Чтобы Блум оказалась на первом плане, а Скай позади неё, мо схватим мышкой слой со Скаем и перетащим его прямо за слой с Блум.
Теперь сделаем Ская немного прозрачным, для этого двигаем бегунок непрозрачности:
http://keep4u.ru/imgs/s/080707/ad/ad6d00d796eaf37ba9.jpg

Но у нас получилось, что на лице Ская стали просвечивать цветы. Некрасиво.... будем это исправлять. Перейдём к нашему самому первому слою, который залит только градиентом, без рисунков. Чтобы был виден самый нижний слой, с которым мы будем работать, Отключим все верхние слои. Для этого мы понажимаем на "глазики"(слой со Скаем, можно оставить):
http://keep4u.ru/imgs/s/080707/37/37764f59cc77a3a392.jpg

Будем вырезать прямоугольник, который замажет цветочки на лице Ская:
http://keep4u.ru/imgs/s/080707/9e/9ea4ac17ab3f960e7f.jpg
http://keep4u.ru/imgs/s/080707/69/698601fc08fa8b5a7c.jpg
http://keep4u.ru/imgs/s/080707/f9/f9c80b76909828b30d.jpg
http://keep4u.ru/imgs/s/080707/be/be5e91bbfd84c6a692.jpg

Теперь наш слой с прямоугольником на месте.  Включиаем все остальные слои и уменьшаем, подгоняем слой с прямоугольником. нажав вверху "Редактирование" и "Свободное трансформирование":
http://keep4u.ru/imgs/s/080707/a6/a60a64d65f1b8f3934.jpg

Вот что выйдет:
http://keep4u.ru/imgs/s/080707/92/9285e0d95a571a2fcd.jpg
http://keep4u.ru/imgs/s/080707/01/014013845f52b1f15f.jpg

Отредактировано Арианна (7 Июл 2008 09:18:29)

+1

2

ой((( а де скрины?

0

3

:...МиЛаФФкО...:
Сейчас исправлю, секунду)

0

4

Арианна
спасибки)))

0

5

:...МиЛаФФкО...:
Получается?))

0

6

Арианна
зай) а ты можешь картинки нормульно выложить...))) ато как то ... немного непонятно...

0

7

:...МиЛаФФкО...:
Попытаюсь, просто урок не мой, я его немножко "стырила"  :dontknow:  ^^

+1

8

Арианна
ааа)))))) круть...спс

еси скрины твои знач твой=)

0

9

:...МиЛаФФкО...:
Ну как те сказать чтоб стыдно не было... Скрины тож стыбзила, воть какая я гадина  :tired:

0

10

Арианна, когда берёшь чужой урок, то нужно оставлять ссылку туда, откуда он взят, ну чтобы автору не обидно было.

0

11

Я сделала бар:
http://i075.radikal.ru/0807/76/ce540a83eb42.gif

0

12

симпатяфно)

+1

13

Вероника
Автора который выстаылял урок, удалили с форума, так что думаю безсмысленно, кстати хорошо получилось  :cool:

+1

14

Арианна
У меня скрины не отоброжаются, вместо них крестик и ссылка в рамке  :'(

0

15

Классный урок! То что надо+)

0


Вы здесь » StyleWeb » Архив SW » Урок № 59. Как сделать бар.