Проекти со Photoshop, Illustrator и CSS за веб дизајн

Усовршете ги претходно стекнатите вештини кои ги стекнавте во курсевите за Photoshop и Illustrator работејќи на практични проекти. Курсот е составен од 13 интересни проекти кои ги покриваат некои од најчестите работи со кои ќе се соочите како веб дизајнер.

Проект 1: Adobe генератор за графики

Заштедете си време при креирањето на веб и интерактивни графики со Photoshop и Adobe Generator. Ќе ви покажеме како да земете постоечка композиција и да експортирате засебни слики за мобилни апликации, веб сајтови, интерактивни проекти и презентации, оптимизирајќи, составувајќи и скалирајќи ги сликите. Треба само да ја изберете select the layer(s) to export, и да работите. Научете како да ја подобрите својата работа со овој можен додаток сега.

Проект 2: Автоматизирање на веб графики

Научете како да креирате графики во Adobe Photoshop употребувајќи варијабили и едноставна текстуална датотека. Овој проект ќе ви покаже како да го автоматизирате вашиот работен тек со комбинирање на засебни графички датотеки, типографија и Photoshop ефекти во прилагодени графики кои се подготвени за употреба.

Проект 3: Маски за отсекување

Во овој проект ќе ви покажеме како да употребувате маски за отсекување за да креирате интересни ефекти во веб дизајнот во Adobe Photoshop, без да ги оштетите вашите оригинални слики. Научете како да отсекувате фотографија зад текст, да креирате прилагодена форма со исекување со алатките Paint и Erase, да креирате слики силуети и да ги ограничите прилагодувањата на слоевите на одреден слој.

Проект 4: Креирајте помали графики со PNG-8

PNG-24 датотеките обезбедуваат одличен квалитет си дидадена придобивка на 8-битна транспарентност. Овој формат на датотека може да е навистина голем. Големите датотеки значат и подолго време на вчитување за корисниците. Добрата вест е дека сега можете да креирате променлива транспарентност на PNG-8 датотеки- датотеки кои се помеѓу 60% и 80% помали од PNG-24 датотеките—со ново отсекување на Windows, Mac, веб базирани алатки. Во овој проект ќе погледнете како да креирате компресирана PNG која убаво се прикажува на многу различни веб сајтови, особено оние кои целат на мобилни уреди.

Проект 5: Од Illustrator до HTML5 Canvas

Дали знаевте дека постои бесплатен додаток за Adobe Illustrator кој автоматски ќе ја конвертира вашата векторска графика во динамичка HTML5 Canvas слика? Во овој проект ќе зборуваме за Drawscript и же ви покажеме како да копирате и вметнувате JavaScript код од Illustrator за да конструирате, обоите и менувате транспарентност на слика со код. Ако не сте запознаени со HTML5 Canvas, овој курс е одличен вовед.

Проект 6: Добивање CSS од Photoshop

Панелот за слоеви во Photoshop содржи опција за автоматско извлекување на CSS ознака од постоечка композиција. Опцијата Copy CSS ви дозволува да ги префрлите стиловите, боите, позиционирањето, ефектите на раб, CSS3 прелевањата и CSS3 позицијата на анимациите од вашиот дизајн. Во овој проект ќе ви покажеме како да го извлечете неопходното CSS за визуелно да ги прикажете истите ефекти од вашиот компјутер на веб прелистувачот, инкорпорирајчи ги ознаките во HTML датотека. Забрзајте го вашиот работен тек со CSS употребувајќи ја оваа лесна и брза опција.

Проект 7: Снимки на слоеви

Откријте како да ги употребите снимките на слоеви во Adobe Photoshop за да направите сценарија на вашиот дизајн на интеракција. Во овој проект ќе ви покажеме како да креирате и менувате повеќе состојби на вашата Photoshop датотека за да симулирате повратна информација од корисникот, движење и интеракција со уредот, и тоа работејќи само во една PSD датотека. Откако вашиот дизајн ќе бида завршен, ќе видиме како да ги експортирате вашите снимки во повеќе датотеки, експортирајќи PDF датотека со повеќе страници. Ќе научите и како да им пристапите на Photoshop снимките од слоеви од InDesign.

Проект 8: Повеќе големини на графики

Со постоењето на многуте различни уреди на пазарот, веб дизајнерите се соочени со предизвикот да креираат повеќе верзии од своите графики за на телефони и таблети. Дозволете ни да ви покажеме како да ја искористите моќта на паметните објекти, маските за отсекување и исечоците во Adobe Photoshop за вашите графики да се кристално јасни на секаков екран. Научете како да произведете графики за веб за мали екрани, слики со стандардна големина, и графики со висока резолуција, од истата датотека.

Проект 9: Slice алатка

Научете какп да креирате повеќе оптимизирани веб графики од ена датотека во Adobe Photoshop или Illustrator со моќната алатка Slice. Зголемете ја вашата продуктивност експортирајќи повеќе графики од една композиција, а притоа задржете го интегритетот на дизајнот. Ќе ве научиме како да менувате големина, именувате и дуплирате исечоци, и да додавате транспарентност на завршените графики. Исто така, ќе ви покажеме техники на сечење со кои може да генерирате распореди базирани на CSS и распореди базирани на табела, како и видео анимации и кинемографи. Овие туторијали се одлични за веб сајтови, е-пошти, и други интерактивни проекти.

Проект 10: Паметни објекти

Научете да го забрзате процесот на вашиот дизајн и времето на продукција во Adobe Photoshop со употреба на паметни објекти. Креирајте паметни објекти од слоеви во вашата Photoshop датотека или од JPG датотеки, или исечете ги и вметнете ги од Illustrator. Исто така, ќе видиме и како да комбинирате паметни објекти со ефекти на слоеви и маски за отсекување, за да ја подобрите ефикасноста на вашиот процес на дизајнорање во Photoshop.

Проект 11: Sprite листи

Многу веб анимации и премини употребуваат sprite листи за да го намалат бројот на графики кои се потребни за едно веб искуство, притоа правејќи го процесот на полесен и вчитувањето на вашиот сајт побрзо. Научете техники Adobe Photoshop за да направите листи со мали сликички. Ќе ви покажеме како да комбинирате паметни објекти и помошни линии за да измерите и произведете совршено порамнети листи со мали сликички или sprite листи за вашите веб проекти.

Проект 12: Видео графики и анимација

Научете да уредувате видео и да дoдадете прилагодени графики и анимации на вашите проекти. Ќе почнеме со новите моќни алатки за видео уредување во Photoshop кои ќе ни дозволат да креираме и брендираме видеа за нашите интерактивни проекти и проекти на интернет. Откако ќе завршиме со уредувањето , ќе ви покажеме како визуелно да го обработите видеото како MP4 датотека која може да ја закачите на вашиот омилен веб сајт за видеа, инкорпорирана во вашиот сопствен сајт или вградена во iBook, интерактивно PDF, или дигитално списание.

Проект 13: Употребување симболи во SVG

Овој проект ќе ви покаже како да изградите ефикасни и убави графики и распореди од самиот почеток. Ќе ви покажеме како да креирате нови SVG графики и потоа да ги конвертирате во реупотребливи симболи со Adobe Illustrator. Потоа ќе видите како да ги прилагодите симболите за да одговараат на вашите распореди, уредувајќи ја позицијата, трансформациите и својствата на боите на секој примерок кој ќе го поставите. Оваа техника ви дозволува да изградите комплексни графики многу побрзо отколку да почнете од почеток.

Кому му е наменет овој курс?

Овој курс им е наменет на сите оние кои планираат професионално да се занимаваат со дизајн: веб дизајн, графички дизајн, UI & UX дизајн.

Предзнаења

За следење на овој курс потребно е поседување предзнаења опфатени со курсот:

• Illustrator CC 2015
• Photoshop CC 2015
• CSS: основи

Практичен дел

Во рамки на практичниот дел од курсот, студентот ќе добие задачи кои ќе треба да ги изработи и достави до својот ментор.

Сертификат

По успешното завршување на курсот, учесникот добива сертификат за успешно завршен курс. Под успешно завршување се подразбира навремено доставување на најмалку 80% од предвидените задачи.

Формат на курсот

Курсот се изведува на далечина, со користење на методологијата менторирано учење на далечина.

Вклучено во цената

• 30 дена пристап до материјалите за учење
• 4 x 15 мин. менторски сесии (1-на-1, online)
• сертификат за успешно завршен курс

Сподели

Биди другар, сподели со пријателите