-–убрики

 -÷итатник

јватары Ђ∆енские именаї - (1)

јватары Ђ∆енские именаї (имена дл€ девушек) ѕолное собрание именных аватаров, сделанных мной за ...

–озы png - (0)

Ђрозыїклипарт ‘отографии в альбоме Ђрозыї, автор ya.semira на яндекс.‘отках https://img-fotki....

–ебусы Ђƒень учител€ї - (0)

–ебусы Ђƒень учител€ї ≈сли ¬ы любите ребусы, заходите, http://www.igraza.ru ломайт...

— днем учител€! - (0)

— днем учител€ ќхапки цветов вам ложатс€ на стол, √де стопки тетрадок ждут снова оценок. ћы зна...

Ѕланки дл€ наградных документов - клипарт - (2)

Ѕланки дл€ наградных документов - клипарт     липарт "Ѕланк...

 - нопки рейтинга Ђяндекс.блогиї

 -ѕодписка по e-mail

 

 -—татистика

—татистика LiveInternet.ru: показано количество хитов и посетителей
—оздан: 25.01.2009
«аписей:
 омментариев:
Ќаписано: 66406


яркий макет дл€ сайта - урок фотошопа

¬оскресенье, 13 »юн€ 2010 г. 08:40 + в цитатник

яркий макет дл€ сайта



¬ данном уроке описываетс€ метод создани€ красочного и €ркого макета дл€ сайта.




„асть 1


Ўаг 1. ¬ этом довольно коротком уроке, состо€щем всего из 18 шагов, мы создадим красивый, €ркий макет.
ЌачнЄм с создани€ панели меню и пол€ дл€ содержани€. » так, создаЄм новый документ в Photoshop размером 800х600 пикс., делаем чЄрный фон. ¬ыбираем Rectangle Tool (инструмент ѕр€моугольник) и создаЄм серый (191b1b) пр€моугольник.



—екци€ дл€ содержани€ будет разделена на два главных сегмента. ¬ыбираем Rounded rectangle Tool (инструмент ѕр€моугольник со скруглЄнными кра€ми), устанавливаем радиус, равный 12 и создаЄм два тЄмно-серых (080808) пр€моугольника со скруглЄнными кра€ми.



Ўаг 2. “еперь мы создадим панель меню. Ќа палитре Foreground (палитра переднего плана)
мен€ем цвет на коричневый/оранжевый (b21e00) и создаЄм более узкий пр€моугольник со скруглЄнными кра€ми.



–астрируем этот пр€моугольник, нажав правой кнопкой мыши на этот элемент в панели слоЄв и выбрав ЂRasterize layerї (растрировать слой). Ёто добавит гибкость в работе с формой пр€моугольника. ¬ыдел€ем созданный пр€моугольник, нажав на него на панели слоЄв и в меню Select (¬ыбрать), выбрав Load Selection («агрузить выделение).



Ўаг 3. ”станавливаем оранжевый цвет (ff4a00) заднего фона, выбираем Gradient Tool (инструмент √радиент) (ii) и
нажимаем на Linear
gradient (Ћинейный градиент)
(iii).



—оздаЄм эффект градиента в пр€моугольнике, провед€ вертикальную
линию от верхней границы пр€моугольника к нижней.



Ўаг 4. —оздаЄм новую группу (в более старых верси€х Photoshop набор слоЄв), назвав еЄ Ђћенюї и помещаем
пр€моугольник со скруглЄнными кра€ми в неЄ. —оздаЄм персиковый (ffc981) пр€моугольник со скруглЄнными кра€ми на прежнем
пр€моугольнике, растрируем его и делаем выделение при помощи меню Select > Load Selection (¬ыбрать > «агрузить
выделение).




Ўаг 5. ”станавливаем оранжевый цвет (ff5e00) заднего фона, создаЄм Linear
gradient (линейный градиент) во втором пр€моугольнике со скруглЄнными кра€ми.



ƒл€ текста в данном примере  используютс€ параметры, указанные ниже.



„асть 2.

Ўаг 5. Ёто втора€ часть нашего урока, в котором мы создаЄм современный макет сайта. ¬ этой части мы будем создавать шапку сайта. ћы используем эту замечательную картинку заката, котора€ была уменьшена до размера 900х675 пикс.  ак показано ниже, уменьшенна€ картинка заката была помещена пр€мо над панелью меню.




Ўаг 6. “еперь мы немного украсим нашу шапку,
чтобы она смотрелась интересней. ЌачнЄм с узора обесцвеченных
квадратов. —оздаЄм новую группу, называем еЄ Ђ вадраты слеваї и
создаЄм в ней белый квадрат.




Ўаг 7. ¬ панели слоЄв уменьшаем Opacity
(Ќепрозрачность)
созданного квадрата до 60%. “еперь, когда
у нас есть один квадрат, мы можем создать дубликат этого сло€,
кликнув правой кнопкой мыши на данный элемент в панели слоЄв и
выбрав Duplicate layer (создать дубликат сло€). ¬
дубликате выбираем другой уровень Opacity (Ќепрозрачности),
например, ставим 40%.




Ўаг 8. ѕродолжаем создавать дубликаты квадрата,
выбира€ разные уровни Opacity (непрозрачности) дл€
каждого квадрата, размеща€ квадраты в сетку ниже.



ќкончив заполнение сетки слева, делаем дубликат группы Ђ вадраты
—леваї, перемещаем еЄ в левую часть и отражаем по горизонтали Ц
Edit > Transform
> Flip
Horizontal (–едактировать >
“рансформировать > ќтразить по горизонтали).



„асть 3.

Ўаг 9. Ёто треть€ часть нашего урока, в котором мы
создаЄм €ркий современный макет сайта. ¬ этой части урока мы
закончим графическую работу с шапкой нашего макета. ‘игуры,
использованные в шапке, могут запросто быть созданы самосто€тельно
в программе Photoshop. ќднако, дл€ того, чтобы не тратить много
времени, мы используем другую замечательную бесплатную графику
, котора€ поможет нам получить прекрасный результат. ¬ы, конечно
же, можете использовать любые другие элементы графики, возможно
даже один из замечательных
Vector Packs for Designers
, созданных компанией УGo mediaФ.
ќткрываем Image (»зображение) в Photoshop и
перемещаем его пр€мо над левыми квадратами. ¬ панели слоЄв мен€ем
Blending mode
(–ежим наложени€) изображени€ на
ЂScreenї
(осветление).
“аким образом, мы уберЄм чЄрный цвет, но
оставим контур фигуры.  




Ўаг 10. ѕеремещаем изображение в верхний левый
угол.



 ак видите, наше изображение не очень хорошо выгл€дит на фоне
заката, так как часть круга получилась отрезанной. ћы можем это
исправить, использу€ Eraser Tool
(инструмент Ћастик) (i) и
Soft Brush
Tool (инструмент ћ€гка€ кисть)
(ii) размером примерно 35, дл€ того, чтобы стереть отрезанные
части.



Ўаг 11. Ѕудьте осторожны, стира€ эти части,
чтобы не стереть соседние части фигур. ѕосле этого, создаЄм
дубликат фигурной графики и перемещаем его в верхний правый угол
шапки. »спользуем Eraser Tool (инструмент Ћастик), чтобы стереть
отрезанные части.




Ўаг 12. “еперь мы создадим ещЄ немного кругов,
которые в основном будут использоватьс€ в заголовках содержимого. ¬
панели инструментов выбираем Custom Shape Tool (инструмент ѕроизвольной
фигуры)
.  Ќа верхней панели нажимаем на стрелочку
вниз (i), чтобы увидеть выбранную группу фигур. “еперь нажимаем на
стрелочку вправо (ii), чтобы увидеть список таких фигур, как
стрелки, орнаменты и др. ¬ыбираем
ЂShapesї
(‘игуры)
. —ейчас перед ¬ами должна быть группа Ђфигурї.
¬ыбираем ЂCircle
frameї (ќкружность) (iii).



—оздаЄм белую окружность на том месте, где была стара€.



Ўаг 13. »спользу€ Magic Wand Tool
(инструмент ¬олшебна€ палочка)
(i),
делаем выделение (ii) внутри окружности.



—жимаем выделение при помощи меню Select >
Modify >
Contract(¬ыбрать > ћодифицировать >
—жать
) на 4 пикс., заливаем его белым цветом, использу€
Bucket tool (инструмент «аливка).



Ўаг 14.  опируем новую фигуру и перемещаем на
правую сторону.



„асть 4.
Ўаг
15.
Ёто последн€€ часть нашего урока, в котором мы создаЄм
€ркий современный макет сайта. ¬ этой части урока мы добавим
заголовки содержимого и внесЄм последние штрихи в панель меню. ¬
данном примере дл€ заголовков были использованы параметры,
указанные ниже:



ƒл€ создани€ рамки, делаем выделение, использу€ текст при помощи
меню Select > Load selection (¬ыбрать > «агрузить
¬ыделение)
. ”величиваем выделение при помощи меню
Select > Modify > Expand (¬ыбрать > ћодифицировать
> –асширить)
на 3 пикс. и заливаем новый слой серым
цветом.



Ўаг 16. ƒелаем дубликат нашей круглой фигуры и
перемещаем еЄ под заголовок. »змен€ем еЄ размер при помощи меню
Edit  > Transform > Scale (–едактировать >
“рансформировать > ћасштабировать)
, делаем ещЄ
несколько дубликатов, также измен€ем их размер, дл€ того, чтобы
создать узор.




Ўаг 17. —оздаЄм ещЄ несколько заголовков,
немного измен€€ узор. ƒл€ основного текста в данном примере
используютс€ параметры, указанные ниже.



“еперь добавим последние штрихи в панели меню, чтобы меню
гармонировало с графикой шапки нашего сайта. Ќажимаем на группу
меню в панели слоЄв и мен€ем Blending mode (режим
наложени€)
на ЂScreenї (ќсветление).




Ўаг 18. ћеню слишком сильно сливаетс€ с шапкой,
поэтому делаем дубликат группы меню



мен€ем Blending mode (–ежим наложени€) на
ЂNormalї
(ЂЌормальныйї)
и уменьшаем его Opacity
(непрозрачность)
до 25%



Ўаг 19. “еперь у ¬ас на экране должно
получитьс€ следующее:



ѕереводчик: ёжакова Ќаталь€.

–убрики:  ”роки photoshop, corel draw, gimp


ѕроцитировано 11 раз

medissa71   обратитьс€ по имени ¬оскресенье, 13 »юн€ 2010 г. 10:57 (ссылка)
ќчень интересно!
ќтветить — цитатой ¬ цитатник
Ёрик_бЄрн   обратитьс€ по имени ¬оскресенье, 13 »юн€ 2010 г. 15:42 (ссылка)
ќргоромное спасибо, правда очень интересно)
ќтветить — цитатой ¬ цитатник
Ћила-ƒжули€   обратитьс€ по имени ¬оскресенье, 13 »юн€ 2010 г. 21:39 (ссылка)
ќгромное спасибо!!!ќчень все пон€тно и интересно!!!!¬от пытаюсь из традиционных художественных приемов перейти на компьютерные технологии.¬аша информаци€ просто подарок!≈ще раз спасибо что делитесь опытом)))))
ќтветить — цитатой ¬ цитатник
јнуфриев_јлекс   обратитьс€ по имени ¬торник, 15 »юн€ 2010 г. 01:24 (ссылка)
просто чудо +10
ќтветить — цитатой ¬ цитатник
ѕерейти к дневнику
 омментировать   дневнику —траницы: [1] [Ќовые]
 

ƒобавить комментарий:
“екст комментари€: смайлики

ѕроверка орфографии: (найти ошибки)

ѕрикрепить картинку:

 ѕереводить URL в ссылку
 ѕодписатьс€ на комментарии
 ѕодписать картинку