Преглед на урок

Graduation hat icon

Graduation hat icon




Photoshop е идеална програма за създаване на качествени икони в уеб дизайна. В този урок ще ви покажа как да направите професионална, лъскава и изчистена икона. Техниките, които ще използваме в урока ще ви бъдат много полезни в правенето на бъдещите ви уеб иконки.

1. Направете нов документ с големина 600x600 px. Запълнете го с цвят #d6d6d6.

Натиснете върху изображението за цял размер


2. Да създадем основата на иконата. Вземете Rectangle Tool (U) в режим Shape Layers и направете квадрат.

Натиснете върху изображението за цял размер


3. С помощта на Free Transform (Ctrl+T) завъртете квадрата, както е показано на следващата снимка. След това отново натиснете Ctrl+T и го свийте.

Натиснете върху изображението за цял размер


4. Натиснете Ctrl + R, за да извикате Rulers, след това поставете хоризонтални и вертикални линии така, както е показано на снимката:

Натиснете върху изображението за цял размер


5. Дублирайте пирамидата (Ctrl+J) и я поставете над първата. Добавете още една хоризонтална линия до горния й ръб, след което изтрийте дублирания слой.

Натиснете върху изображението за цял размер


6. Вземете Pen Tool (P) с цвят #feb624 и нарисувайте друга форма, така, както е показано на снимката по-долу:

Натиснете върху изображението за цял размер


7. По същият начин нарисувайте същата форма, но от дясната страна с цвят #e49e11.

Натиснете върху изображението за цял размер


8. Поставете слоят със сънята форма над всички останали, преместете я така, както е показано на втората илюстрация от следващата снимка, след това с Free Transform (Ctrl+T) увеличете размера й.

Натиснете върху изображението за цял размер


9. Преименувайте слоя със синята форма на "Top part" и сменете цвета с този #ffd931. Дублирайте го.

Натиснете върху изображението за цял размер


10. Преименувайте дублирания "Top part" слой на "border", сменете цвета му с този #b14f00 и преместете този слой под оригиналния. До момента вашата лента със слоеве трябва да е подредена така:



11. Активирайте слоя "border", след това натиснете стрелката сочеща надолу от клавиатурата. По този начин вие изместихте слоя с 1 px надолу. Сега задръжте Alt и натиснете 4 пъти върху същата стрелка. Това ще копира 4 пъти слоя "border".

Натиснете върху изображението за цял размер


12. Сега слейте всички "border" слоеве. Премахнете помощните линии, защото те вече не са ни нужни. Отидете на View > Show > Guides или натиснете Ctrl+H.



13. Готови сме със създаването на уеб иконката. От тук нататък ще я направим да изглежда по-реалистично. Активирайте слоя "Top part" и направете нов слой . По този начин новият слой ще се появи над всички останали. Задръжте Ctrl и кликнете върху слоя "Top part", за да заредите селекция. Сега вземете Gradient Tool (G) с оранжев към прозрачен цвят за преливката и запълнете с нея селекцията.

Натиснете върху изображението за цял размер


14. С помощта на Pen Tool (P) с бял цвят нарисувайте отблясък по ръбовете на иконката. Намалете Opacity на този слой на 30%.

Натиснете върху изображението за цял размер


15. Ще поработим малко върху дясната страна на пирамидата. Селектирайте дясната страна на иконката и направете нов слой. Вземете Gradient Tool с преливка от #e37a05 към прозрачен цвят и запълнете селекцията с наклона.

Натиснете върху изображението за цял размер


16. За лявата страна на иконката ще приложим друг метод за добавяне на светлосенки. С Pen Tool (P) и бял цвят нарисувайте форма като тази на снимката по-долу, след което поставете Opacity 30%.

Натиснете върху изображението за цял размер


17. Сега ще е нужно да вмъкнем повече светлина по лявата страна на иконката. За целта, селектирайте слоя, направете нов и вземете Gradient Tool с цветове за преливката от #f3cf37 към прозрачен цвят. След това направете наклона така, че жълтият цвят да е в десния ъгъл на селекцията. Тогава поставете режим на смесване Overlay.

Натиснете върху изображението за цял размер


18. Ще добавим сянката на горната част на иконката, която пада върху стените й. С Pen Tool (P) и черен цвят направете форма като тази на снимката по-долу. Преименувайте слоя на "Shadow 1" и поставете Opacity 30%.

Натиснете върху изображението за цял размер


19. С Ellipse Tool (U) и цвят #c54400 направете кръг в центъра на иконката. След това с помощта на Free Transform смалете кръгчето така, както е показано на снимката по-долу.

Натиснете върху изображението за цял размер


20. С Pen Tool направете форма като тази:

Натиснете върху изображението за цял размер


21. Направете малко синьо кръгче в края на нишката, която направихте.

Натиснете върху изображението за цял размер


22. Сега ще използваме Pen Tool и Brush Tool Направете нов слой под този със синьото кръгче. Вземете Pen Tool в режим Paths и направете линия като тази на снимката по-долу:

Натиснете върху изображението за цял размер


23. Сега вземете Brush Tool с цвят #ee4c05 и натиснете F5. След това направете тези настройки:



24. Активирайте отново Pen Tool, натиснете десен бутон върху линията и от падащото меню изберете Stroke Path.

Натиснете върху изображението за цял размер


25. Повторете тази стъпка множество пъти, като всяка нишка я поставяте върху нов слой. Променяйте цвета и местоположението на нишките.

Натиснете върху изображението за цял размер


26. Сега можете да слеете всички слоеве на нишките в един. Наречете го "Mot". Добавете им сянка.

Натиснете върху изображението за цял размер


27. И последното нещо, което трябва да направите е да добавите още отбясъци. Следвайте снимките по-долу.

Натиснете върху изображението за цял размер

Натиснете върху изображението за цял размер


С това приключихме! Лесно можете да смените цвета на иконката. Просто кликвате върху слоевете на стените и избирате цвят, който предпочитате. Ето как стои иконката в тъмно и светло сив цвят:

Натиснете върху изображението за цял размер



Превод: almavez
Автор: Constantin Potorac
Източник

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: maqpen4eva

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.