Направете своята безплатна регистрация и се възползвайте от пълните възможности, които предлага iTSchool

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

Икони за десктоп / пиксел арт

Икони за десктоп / пиксел арт




Да направим икони за вашият десктоп(по конкретно за “Моят компютър” и “Кошчето”).

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

1. Отворете нов документ 32 x 32 pixels. Resolution 72 pixels/inch. Запишете документа с някакво име по ваш избор. Аз го записах като home.psd

2. Ще отворим и втори докумен свързан визуално към вече създадения. Единият е работен, а другия ще виждаме пикселната графика в actual pixel
Ето как ще стане това: Window > Arrange > New Window for home.psd

Вижте този линк ТУК

3.Взимаме Pencil Tool и за foreground слагаме # 634116 и рисуваме следната фигура на прозрачен нов лаер:



4. Създаваме нов лаер и оцветяваме фасадата със следната палитра:





5. Следва покривът на нов лаер. Първо оцветете целият покрив само с # de7a4b
После ще нарисуваме циглите:



Можете да увеличавате размера на Pencil Tool чрез квадратните скоби. Лявата го намаля а дясната го увеличава.
На нов лаер ще нарисуваме циглите. Цветовете са следните, тъмен # b45732 , и светъл
# e8a387

Първи етап:

Втори етап:

Трети етап:

6. Създаваме нов лаер и рисуваме стълбите. Цветовете са от тъмно към светло:
# 444444 # aaaaaa # e1e1e1



7. Почти приключихме. На нов лаер ще направим градинка плюс цветчета обрасли фасадата: Тъй като цветовете тук са доста, направете ги или по ваш избор или чрез Print Screen ги вземете от тук.



Готови сме с иконата за “Моят компютър” Предполагам периодично сте записвали PSD файла. Не го записвайте все още в друг формат. Това ще направим след като сме готови и с иконата за кошчето, защото за тази цел ще ви е нужен нов файлов формат за икони-ICO който усложливо ще ви предоставя и ще ви обесня как да инсталирате на вашият фотошоп.

8. Създайте нов документ по примера на стъпка 1 и 2 и го наименувайте ko64e.psd
От тази творба ще създадем две икони за пълно и празно кошче.

9.На нов лаер нарисувайте с черно следната фигура:



10. На нов лаер нарисувайте същата фигура, като увеличите растоянието по средата с четири пиксела и разположете така:



11. Дулирайте лаерът .Ctrl+T е комбинацията за Free Transform елате с мишката върху трансформиращата селекция и изведете чрез десен бутон падащото меню и посочете
Flip Vertical



Нагласете така:



12. Свържете основата с вече оразувалата се елипса по крайните пиксели, като за да е прецизно кликвате върху единият краен пиксел на елипсата, задържате Shift и кликвате в долният краен пиксел на основата. Трябва да се получи така:



13. На нов лаер оцветяваме кошчето с # 9d6742



14. На нов лаер ще нарисуваме дъски, защото това всъщност е ведро. Цветовете ще видите от самата рисунка: Ако не знаете как се прави Print Screen, сега е момента да научите. Намерете копчето Print Screen на вашата клавиятура докато сте отворили урока, задръщего замалко натиснато. Пуснете и се върнете в фотошопа, вече сте заснели десктопа си. Ctrl+N отваряте нов документ. Дайте ОК или просто натиснете Enter. Ctrl+V или Edit>Paste ще пуснете вече заснетото пространство в документа. После чрез пипетата, така наречения Eyedropper Tool взимате нужните ви цветове.
Трябва да се получи това.



15. На нов лаер рисуваме обков така:



16. Готови сме с иконата за празно кошче, но в същия файл трябва да направиме как ще изглежда и пълно кошче. На нов лер нарисувайте главата на това човече:



17. И като последно ще нарисуваме вода във ведрото.



18. Сега идва интересната част трябва първо да инсталираме във фотошопа ICO формат за да можем да запишем иконите в нужният за тях формат.
Изтеглете формата от ТУК
След като сте го изтеглели го поставете в следната директория на папката където е инсталиран вашият фотошоп. Предполага се че ако вашият хард диск е на няколко дяла по подразбиране сте инсталирали фотошопа на С, но и да е на друг дял нещата са аналогични:
C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats
Копирайте и пуснете плъгин формата който изтеглите в тази директория. Върнете се във фотошопа и проверете дали сте записали иконите които направихме, след което затворете фотошопа, стартирайте го отново и отворете файловете на иконите които създадохме. Формата е вече инсталиран. Премахнете белият беграунд на файловете за да запишеме иконите на прозрачен фон. Ако сте готови нека записваме сега в форматите които фотошоп ви предлага трябва да съществева и новият.

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


Запишете иконите в папка по ваш избор. Нека ги инсталираме сега. Предлагам ви следната безплатна програмка за управление и инсталиране на икони във вашия компютър.Тя е в rar архив който разархивирайте в предварително подготвена папка.

ИЗТЕГЛИ


Тя се стартира директно без инсталация. След като стартирате посочете от падащото меню Desktop Icons

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


Сега вие виждате иконите които обикновенно са приложени на десктопа.
Посочвате иконата за “Моя компютър” и с десен бутон извеждате падащото меню и посочвате Change Icons

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


От преглед отваряте прозореца от който да откриете директорията в която сте записали иконите.
След като я отворите посочете иконата с къщичката и дайте Apply
Иконата е вече приложена.

Вярвам че ще бъдете истински удовлетворени от наученото и полученият резултат.

Ето ги иконите:


Ето и как те стоят на моят десктоп:

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


Автор: kreksofin

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




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

Коментари

tera83

Тези икони не ми допадат, но урока е страшно полезен за което благодаря!

Elfata

Ахаха крексофин маняче си ;) :bo:

kreksofin

Много мерси. То си е мания

Lar4eto

пиксел арта е мн красив ама голяма играчка си е докато стане :)

Killerkata

Направих си иконките, сейвнах ги в ico, но като дам apply на програмката нищо не се променя.
А като й дам Close излиза някакъв error.

Killerkata

Аа, не, стана, но с малко закъснение. :]

Axvabar

Пиксел великолепен урок!!!!! Еи такива уроци трябва да има!!!Програмата е великолепна и несамо на Desktop еми и на сичко дръго можеш да смениш това е супер за разведряване на скучните Windows икони.Мерси!Ного обичам такива програми.

rorotasula

Има същия такъв урок и за пиксел курсори потърсиго, много е готин. Ма май е в форума и не е качен още. Но в добавете урок ще го видиш.

kreksofin

Не зависи от мен, други одобряват уроците, но сигурен съм ще го качът някой ден :)

B.U.S.T.T.E.R.

Офф незнам хора стигам до плъгина за .ico формат качвам го файл форматс стартирам го гледам не ми го дава във save as спирам фотошопа пускам го пак и пак го няма вече незнам.............

kreksofin

C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\Adobe Photoshop Only\File Formats

Надявам се го слагаш тук. Ако всичко е така рестартирай компа. Не съм сигурен дали версията на шопчето е от значение. Аз съм със CS2

B.U.S.T.T.E.R.

Рестартирах какво не ли не правих не и не естествено със CS 2 съм...
Обаче имам един готов курсор във формат .cur направих го .ico и го отворих да го редактирам когато искам да го запиша

http://img376.imageshack.us/img376/5904/savesyq5.jpg

Teatime>_O

Полезно ;) но аз не си играх да си тегля онази програмка, ми направо си кликам върху папката с десен бутон, properties -> customize -> change icon ама не се и съмнявам че с програмката става :)

krisi94

Урока е наистина супер на на мен също не иска да ми сложи тоя .ICQ формат, няколко пъти си пусках фотошопа отначало ама не го слага в менюто където избирам в какъв формат да го запише. Иначе файла го сложих където трябва, къде бъркам?

sedri

kreksofin урокит е супер и няма проблем с ICQ формат при мен.

kreksofin

Щом си минал през този етап коректно: C:\Program Files\Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats

не би трябвало да имаш подобен проблем, рестартирай целия комп и виж отново. Незнам аз лично какво може да не е наред.

kreksofin

merili чудесен опит очаквам да се появиш в форума и пиксел арт мания

r3pr3sS3d

мн се извинявам но може ли някои да ми каже как да премахна белия фон

maqpen4eva

Белия фон е работен, а рисунката се прави на нов прозрачен слой - пише го в началото на урока!
Преди да запазиш в GIF или PNG трябва да изключиш или изтриеш слоя с белия фон!

maqpen4eva

Белия фон е работен, а рисунката се прави на нов прозрачен слой - пише го в началото на урока!
Преди да запазиш в GIF или PNG трябва да изключиш или изтриеш слоя с белия фон - това е по принцип, a в конкретния случай запазването става в ICO и подробно е описано в урока!

katy144

ееее много мерси моите станаха мнго яки 10 x

didss

Страницата с изтелянето на рара не ми се отваря, излизат ми само едни букви ;d

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

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