Икони

Фотошоп FastWeb Курсът показва как да използваме Photoshop, за да създаваме скоростно качествен уеб дизайн и как да обработваме изображения с Photoshop според целите ни.

Безплатни 20 урока
регистрирай се и научи

Ако сте вече потребител - Регистриран съм
Видео
Назад Алтернативен видео плеър
¿ Напред
Иконките понякога са много важна част от сайта.
 Някои сайтове например този, са изградени само от четири-пет иконки и хубав фон.
 Да направим една иконка във фотошоп.
 Ще почна, като направя един голям файл.
 Иконката ни в крайна сметка ще е толкова голяма.
 Но за да стане хубава ще трябва първо да направя в голям размер и след това да я намалявам.
 Затова ще почна от тук.
 Искам да направя тефтер за контакти.
 Първо ще го маркирам.
 Абсолютно грубо.
 Сега няма да се занимавам с детайлите.
 Гледам да не правя прекалено малки пиксели.
 Например ако го направя така, то когато се намали следва да се слеят.
 Най-бързия начин да променим цвета е с Ctrl + U.
 Сега ще си направя един правоъгълник, който ще има светлина и сенки.
 Целта е да имитирам някакъв материал.
 Така плоскостите да не са от солиден цвят и така ще станат по-интересни.
 Копирам го.
 Поставям го на различни места.
 Това нещо може да се направи по различни начини, може да използвате ефекти на слоевете.
 Не е нужно да сме абсолютно прецизни.
 Все пак това ще се намали поне 20 пъти.
 Пак започнах да клонирам от този layer, ако вилича малките те няма да се получат красиви.
 Това ще го оправя за да получа по интересен ефект, а не просто солиден цвят.
 От тук избирам Soft Light.
 Mоже би тук също.
 Тук Hard Light ми харесва повече.
 Слагам един @ символ.
 Сега мога да му направя един reflection върху масата върху, която стой.
 Селектирам всичко и прилагам merge.
 Reflection не е задължително да е перфектен.
 Въпроса е да работи.
 Да видим какво се е получило.
 Тези два обекта, тук ще ги направя на smart обект.
 Тогава ще ги намаля, така се запазва качеството.
 Икона става по-добра.
 Това е моята малка иконка.
 Мога да влезна вътре и да я поправя.
 Например по този начин.
 Мога да и сложа някой друг филтър.
 Мога да сложа и във външния файл, но там вече иконката е намалена.
 Слагам филтъра да е High Pass.
 С малка прозрачност.
 Да видим какво се е получило.
 Сега прилича повече на иконка.
 Мога да го направя малко по-светло.
 В зависимост от това какво ни трябва.
 Тук е прекалено светло.
 Това е нашата иконка.
 Това е иконката на 100 %.
 Ако не ви харесва нещо, може да си го преправите.
 Например Тук прекалено много изсветлява ми се струва.
 След което може и да я заоблим.
 Ще изключа предишните лeъри, избирайки copy merged.
 Сега ще приложа филтъра Median.
 Първо ще дам crop за да увелича размера на Smart файла.
 Избирам Median.
 Така мисля че се получи много добре.
 Получихме една добра иконка.
 Ако се бяхме опитали да направиме, тази иконка пиксел по пиксел, с някои pensil, тo със сигурност щеше да стане много по-зле.
 Когато разработваме големи файлове и ги превърщаме в малки, накрая полученото качество е доста по-голямо.
 Ако реща да направя нова иконка, трябва да спазвам следната формула.
 Има три точки към които може да клони нашата иконка.
 Нашата иконка е червената точка.
 Може да е красива за сметка на смисъла и спазването на стила.
 и пък да е много смислена, но пък да не спазва красота и спазване на стил.
 Когато е по-средата е най-оптимално.
 Ще еднаво красива, ще има смисъл и ще спазва стила.
 Какво имам предвид, когато казвам спазване на стил.
 Ако бяхме направили тази иконка без прелики, или пък да е чисто бяла с друг градиенти, то тя нямаше да пасва на тази иконка и на другите иконки в сайта.
 и пак ще стане грозно.
 Въпреки че сама иконката красива, но ако неспазване стила на сайта, то тя нямаше да стои добре.
 Другото нещо е смисълът.
 Ако искаш да направя красива иконка и да спазя само стила, но да няма никакъв смисъл.
 Пак нямаше да е добре.
 Или пък да е само красива и да не спазва смисълът, нито стилът.
 Така че когато правите една иконка, трябва и трите неща да ги имате предвид, така че да пасне точно по средата, на смисълът, красотата и стилът.

Въпроси и отговори

  • Как прихващаме точка от обект, който вече е начертан (1:13) ?

    Десислава :

    Как прихващаме точка от обект, който вече е начертан (1:13) ?

    Ангел Арънски:

    В урока съм го направил на око.

    Всъщност във Photoshop няма 'snap' (прихващане) към точка от обект, понеже тези точки са растерни.
    За Photoshop нашето работно пространство е една матрица от пиксели, а пък за векторните програми е списък с точки и линии/връзки между тях.
    Има обаче друг вариант. Да използваш 'GRID' както е показано на изображението, или да си направиш guidelines (помощни линии). Вече към тях може да използваш snap. 
    1. View / Show / Grid 
    2. View / Show / Pixel Grid 
    3. View / Snap to / Grid
    4. View / Snap

  • Защо когато смаля фигура и отново кликна на нея ми показва мислените линии на голямата фигура, чиито краища свършат далеч от малката фигурка?

    Venko Stoev:

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

    Ангел Арънски:
    Не съм сигурен какво точно се случва, но ако имаш разни дори почти невидими пиксели на слоя си, photoshop ще ги включва в рамките на transform инструмента. Случва се доста често и трябва да се почистват.

    Не ползвам Transform perspective, а задържам Ctrl+shift докато движа точките.

    Георги:

    Може и само с Ctrl,но така ще изгубим съотношението височина/ширина което се подържа от Ctrl+Shift

  • Защо след като промених съдържанието на смарт обекта, при връщане в т. нар. изходен фаил, не е актуализирано? Къде греша?

    Валентина Калоева:

    Adobe Photoshop CS6, V.13.1.2

    Валентина Калоева:

    Разбрах. РедактиранияSmart Object (File -Save) - източника Smart Object в оригиналнияфайл се актуализира.

    Ангел Арънски:

    Да, трябва да се запише и чак тогава се актуализира в основния файл

  • Как да отворя Hue/Saturation ?

    Георги:

    Искам да попитам как отворихте Hue/Saturation в урока ?

    Ангел Арънски:

    CTRL + U 

    Image / Adjustments / Hue & Saturation
    Layer / New Adjustment Layer / Hue & Saturation

  • Ето как се получи при мен...

    Александрина Ангелова-Димитрова:

    Благодаря за поредния полезен урок :) Надявам се, че съм успяла да постигна баланс между "красота-смисъл-стил"...



    Ангел Арънски:

    Интересни светлни върху корицата. Приличат на прожектори :)

    Venelina Ilieva:

    Всичко е въпрос на личен стил Веселин . Колегата е ползвала градиенти за иконката си ,никъде във видеото не се казва,че не може.

  • А ето как се получи при мен

    Цвета Попова:

    Не е много добре ,но ще поработя още

    Ангел Арънски:

    Като форма е ок, просто цветовете са прекалено тъмни и се сливат

  • Ето как стана моята иконка..

    Михаела Занева:

    Зелена и свежа, като урокът Ви!

    Ангел Арънски:

    Когато я намаля има интересен Sci-fi вид :) 

  • Как да сейвна файла в .ico format, форамата за икони? В какъв формат са поставените в даден сайт икони?

    Димитър Димитров:

    PS CS5.1

    Ангел Арънски:

    ICO файлвете почти не се ползват. (Единствено за иконката до адреса на сайта) или може би windows приложение. Ползвай https://www.icoconverter.com/ и ще преобразуваш gif в ico

    Димитър Димитров:

    Благодаря за отговора.

  • Упражнения към урока

    Алекс:

    Ето и моето

    Алекс:

    забравих ефекта долу

  • Какъв е правилния начин на запис на иконката?

    Alessia:

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

    Ивелина Цветкова:

    Във Photoshop CC има и опция за експорт на отделни леъри (десен бутон върху леъра и ще ти излезе в контекстното меню) и настройка после на размера в диалоговия прозорец. А това, че качеството се разваля, не е точно така, защото най-вероятно я зумваш до размер по-голям от 24х24. А за иконки най-добре работи в Illustrator. Там можеш да експортираш формат svg, който е scalable и няма никога да ти се разваля качеството, независимо колко е малка или голяма иконката.

Напред