неделя, септември 21, 2008

Урок за GIMP - създаване на web 2.0 бутон

Понеже няма много уроци за GIMP, а според мен те са много важни за популяризирането на този софтуер, мисля да пусна поредица от няколко урока. Не съм особено кадърен графичен дизайнер (да не кажа никак :) за това ще преправя няколко урока за photoshop. Така тъкмо ще можете да видите как определен ефект на photoshop се постига използвайки GIMP.

Днес ще направим един бутон за web сайт.
Започваме с празно прозрачно изображение с размер 1024/768 (самия размер не е особено важен), но тъй като разполагаме с такъв шаблон така е по-лесно. Ctrl + N, избирате шаблон, прозрачен фон и "добре". Избираме цвят #02C0E2 и заливаме с кофата целия фонов слой. След това избираме цвят #016E8D и правим преливка (от цвят до прозрачност) за да се получи нещо такова :

Слагаме нов слой (Слой / Нов Слой) и с уреда за правоъгълно избираме, селектираме област с размер по ваш избор, която всъщност е бъдещия бутон. След това Избиране / Заоблен правоъгълник и избираме радиус 10%. Заливаме селекцията с цвят #0195B6. Смаляваме селекцията с 10 пиксела - Избиране / Смаляване / 10.

Заливаме новата селекция с цвят #109CC4. И с уреда за преливки правим преливка от горе надолу с цвят #20CAED. Върху същата селекция правим още една съвсем лека заливка от долу нагоре с цвят #006e85 за да се получи това:
Създаваме нов слой и в него с уреда за избиране на пътеки правим тази извивка и задаваме да се създаде селекция.
На тази селекция прилагаме преливка с чисто бял цвят за да се получи нещо на картинката. Не се притеснявайте ако се получи нещо прекалено бяло. Дори целим това. Идеята е след като завършим прилагането на преливката от менюто със слоеве да намалим плътността на слоя. В дадения случай съм я намалил до 48,6%.
Тук се изправяме пред нов проблем, както и да нагласим селекцията с уреда за пътеки, бялата преливка няма как да стане със заоблени краища както бутона ни. Тогава прилагаме следния трик. Върху слоя с бутона от палитрата със слоеве, десен клик и избираме "превръщане на прозрачността в селекция", избираме слоя с бялата преливка, Избиране / Обръщане на селекцията и натискаме ctrl+X. По този начин реално изрязваме от слоя с преливките всичко, което е извън заоблеността на бутона.
Добавяме текстовия слой под бялата преливка. Самия текст вие си избирате как да го направите. За да довършим бутона избираме бял цвят, селектираме от палитрата със слоеве върху основния му слой и натискаме "превръщане на прозрачността в селекция". От новополучената селекция натискаме с десен бутон върху изображението и избираме Редактиране / Очертаване на селекцията с 3 пиксела. Обръщаме селекцията - Избиране / Обръщане и прилагаме Филтри / Гаусово замъгляване. Така се получава леко размазаното бяло очертание на бутона.

Следва сянката под бутона, която за мен е леко излишна, но в оригиналния урок така го бяха направили, а целта е поне малко да се придържаме към него за да не каже някой "А, хванах те, това не можеш да го направиш с GIMP !" :D
Има много начини да се направи това, но аз предлагам следния:


Избирате Филтри / Светлина и Сянка / Хвърляне на сянка и слагате следните стойности (от снимката) на сянката с цвят #045668. Слоя който се получава е голям точно колкото бутона за това го преоразмеряваме на половина само по височина - Слой / Преоразмеряване на слоя(трябва да махнете връзката между ширина и височина). Прилагате Гаусово Замългляване с радиус 25-30 и сте готови. :)
Оригиналния урок за photoshop се намира тук. Аз не съм графичен гуру дизайнер за това не претендирам, че начините, които използвам са най-правилните, но за мен работят и се надявам да са полезни на някого. Ако искате да преправя някой урок за photoshop така че да може да се изпълни на GIMP пуснете един линк и да видим дали ще мога да се справя :)
От тук може да си изтеглите xcf изображението.

Open Source forever, brothas ! :)