Curs Adobe Photoshop si Adobe Illustrator pentru Web Design - Soft EDU

Go to content

Main menu:

Curs Adobe Photoshop si Adobe Illustrator pentru Web Design

Cursuri Adobe CC
Curs Adobe Photoshop si Illustrator CC pentru Web Design, Grafica in web design

Acest curs, consecutiv cursului Adobe Photoshop CC, trateaza modul de lucru cu Adobe Photoshop si Adobe Illustrator, special pentru Web Design.

Cursul Photoshop si Illustrator pentru Web Design se adreseaza utilizatorilor de nivel mediu, sau chiar celor incepatori, care au insa cateva notiuni elementare de lucru cu Photoshop: lucrul cu layere, cunoasterea principalelor instrumente Photohop, save / save as. etc. Pentru incepatori exista cateva lectii de acomodare cu instrumentele si modul de lucru.

Veti invata sa adaptati imaginile pentru web, sa salvati o imagine optimizata, sa creati grafic un layout pentru o pagina web, sa modificati claritatea unei imagini din pagina web, sa construiti un layout pentru responsive web design.

Puteti valorifica acest curs studiind in continuare Curs Adobe Dreamweaver CC sau Curs WebSite X5.

Adobe Photoshop este un editor grafic, nu unul Html, neavând capacitatea de a scrie si exporta cod HTML.
Atunci de ce îl folosim in web design? Pentru ca:

- Produce componente grafice utlizabile ulterior în web design;
- Releva o imagine a proiectului web;
- Încorporeaza elemente CSS de baza;
- Poseda un sistem elaborat de instrumente vectoriale ce permit crearea de imagini independente de rezolutie;
- Simuleaza comportamentul continutului adaptabil la rezolutie, ca Edge Reflow;
- Photoshop are destinatii multiple, ca: print, prezentari, editare grafica, corectie de imagine, colaje fotografice, web design.

Pentru fiecare din acestea se lucreaza într-un mod particular.

Cursul de fata va detalia tehnicile grafice caracteristice web design, va elabora fluxuri de lucru si tehnici specifice acestui scop.
Export Adobe Illustrator CC in HTML 5 CanvasAdobe Illustrator CC poate exporta fisiere vectoriale in cod Html 5, asigurand o dimensiune foarte redusa  a paginii web.

Procedura de export se realizeaza din Adobe Illustrator, prin intermediul Java Script Canvas Html 5, dar se pot exporta din Adobe Illustrator nu numai forme vectoriale, ci si background vectorial sau chiar animatie.
Doar cu titlu de exemplu, iata doua exemple de Java Script care confera animatie, aici si aici. Urmariti lectiile 37-40.
Update Adobe Illustrator CC 2016: exportul layout-ului paginii web in HTML / CSS este imbunatatit.
curs Adobe Photoshop si Adobe Illustrator pentru web design
Iata un exemplu video mai jos, alte doua mostre video youtube aici si aici, si un exemplu de layout web realizat in curs Adobe Photoshop si Adobe Illustrator pentru web design:
Layout Adobe pentru web design
Mostre din exercitiile Cursului Adobe Photoshop CC si Adobe Illustrator CC pentru grafica in web design:
Cuprins Curs Adobe Photoshop CC si Adobe Illustrator CC, pentru Web Design

1. Introducere De ce avem nevoie de Adobe Photoshop CC pentru web design? Care este fluxul de lucru in constructia unei pagini web?
Adobe Photoshop Adobe Illustrator pentru web design2. Pregatirea si setarea programului Adobe Photoshop CC 2015 pentru lucrul in web design. Setari specifice ale spatiului de lucru, salvarea particularizarilor ca nou spatiu de lucru, comutarea intre spatii de lucru. Crearea de noi documente specifice pentru web design.
3. Spatii de culoare. Coduri de culoare in web design, spatii de culoare. Codul hex al culorilor, RGB si RGBA. Setarea culorii in Adobe Photoshop, color management policies - gestionarea culorilor, salvarea setarilor. Lucrul cu imagini din exterior, care contin profile de culoare impachetate (mebed color profile). Setari pentru dialogul de export al imaginii pentru web design, export for web design.
4. Scheme de culori. Scheme de culori primare, tertiare. Kuler scheme analogice, monocromatice, triada, complementara, compusa.
Stabilirea unei scheme de culori pentru proiect, salvarea / incarcarea schemei. Conectarea Adobe Photoshop CC la serverul Kuler pentru crearea si salvarea unei scheme de culori, utilizarea schemei in interiorul Photoshop.
Utilizarea resurselor web gratuite si a celor incluse in pachetul Adobe Creative Cloud pentru a genera scheme de culori profesionale.
5. Swatches. Lucrul cu paleta de culori Swatch: stergerea culorilor, resetarea lor, adaugarea unei teme de culori la Swatch sau inlocuirea paletei Swatch. Exportul paletei particularizate Swatch pentru Adobe Exchange, in vederea utilizarii in alte componente Adobe.
6. Atribuirea culorii. Atribuirea culorilor din Swatch: catre layere, smart object, text.
Lectie pentru incepatori, utilizatorii de nivel mediu si avansat pot sari aceasta lectie.
7. Responsive Layout. Construirea unui layout pentru responsive web design, salvarea acestora ca template:desktop, tableta, iPad, iPhone, Android OS.
8. Artboard. Noul instrument introdus in Adobe Photoshop CC: Artboards. Inglobarea mai multor layouturi in acelasi document Photoshop, cu ajutorul Artboards. Multiple Artboards in acelasi document.
9. Lucrul cu Artboard. Importul unor elemente inserate in Artboard multiple, insert as linked, modificarea obiectului sursa duce la updatarea fiecarui Artboard, salvarea sau exportul Artboard / setului de Artboard.
10. Layere. Lucrul cu layere: crearea, duplicarea, stergerea, umplerea unui layer. Denumirea layerelor, gruparea lor, redenumirea grupurilor.
Deplasarea Artboards.
Layers Comp: automatizarea lucrului cu layere / compozitii de layere.
11. Selectii automate. Modalitati de selectare automata a layerelor. Cursantii de nivel mediu pot sari aceasta lectie.
12. Font. Probleme cu fonturile: missing font. Documentul Photoshop a fost creat pe alt computer, iar noi nu avem instalat acel font.
13. Lucrul cu forme. Comparatie vector versus pixel. Desenarea formelor vectoriale, custom shapes. Umpleri si contururi. Incorporarea "smart object" in Photoshop, capabilitatile smart object. Crop tool / resize image, detalii ale tehnicilor. Algoritmi de redimensionare a imaginilor.
Pentru lucrul cu precizie in editarea vectoriala, mergeti la Lectia 19.
14. Constructie Layout. Lectie de sinteza: vom aplica notiunile asimilate pana in acest moment pentru a construi un layout web, de la alegerea schemei de culori, gestionarea librariei de teme cromatice, la inserarea de smart object, construirea elementelor de layout.
Vom rezolva probleme inerente productiei grafice, ca identificarea si instalarea unui font necesar.
15. Definitivare layout. Importul elementelor de contact, lucrul cu fisiere EPS, transparenta, canal alpha, fluxul eps - Photoshop.
16. Responsive 1. Responsive web design: crearea unui layout fluid pentru mai multe rezolutii, plecand de la layoutul desenat in lectia precedenta. Ce inseamna layout responsive, exemple, mod de lucru.
17. Responsive 2. Analiza unui layout responsiv. Analiza continutului fluid. Resurse gratuite.
18. Pregatirea wireframe. Pregatirea imaginilor pentru wireframe layout, lucrul cu Adobe Camera Raw, redimensionarea imaginilor, salvarea acestora optimizat pentru web, schitarea layoutului, dimensiuni.
19. Wireframe. Crearea unui wireframe pentru layoutul web.
20. Styles. Crearea si salvarea stilurilor pentru text. Aplicarea stilurilor de text.
21. Formatare. Formatarea textului cu stiluri de text. Automatizarea lucrului.
22. Utilizare CSS. Utilizarea codului CSS creat in Photoshop pentru a genera Cascade Style Sheet externe fisierelor Html.
23. Wireframe - Layout. De la Wireframe la Layout-ul final. Finalizarea acestui layout web.
Social media icons in curs adobe photoshop cc pentru web design
24. Layout. Modificari In fluxul de lucru pot apare noi cerinte ale clientului, noi motive pentru a modifica layout-ul web.
25. Social Media. Lucrul cu fisiere eps / psd / png, inserarea simbolurilor social media, canal alpha - transparenta, editarea smart object cu transparenta.
Librarie gratuita cu 500 de elemente de interfata si UI (user interface) in format psd, eps, svg.
26. Stilul navigarii. Realizarea starii elementelor de navigare pentru diferite stari: default, hover, active, focus.
27. Imagine versus CSS. Cand folosim imagini si cand folosim CSS in web design. Domeniul de utilizare Photoshop.
Exemple: de la tehnicile grafice clasice la cele moderne: de la crearea de backround tile in Photoshop si sliceuri la CSS modern.
Photoshop asset generator.
28. Illustrator. Lucrul cu Adobe Illustrator - Adobe Photoshop, imagini cu transparenta pentru Logo, generarea CSS din Adobe Illustrator CC.
29. Sharpen 1. Lectie din cursul Adobe Photoshop CC: moduri de sharpen, compararea diferitelor filtre de sharpen
30. Sharpen 2. Lectie din cursul Adobe Photoshop CC: sharpen creativ, fara a folosi filtrele de sharpen. High pass sharpen.
31. Sharpen avansat. 1.  Aplicarea creativa a unei suite de tehnici Sharpen, amestecuri de layere (blending mode), combinata cu ajustari locale ale imaginii prin pictarea pe masca de layer.
32. Sharpen avansat 2. Operatia de marire a claritatii incepe din momentul fotografierii, continua cu ediarea in Adobe Camera Raw, apoi in Adobe Photoshop CC.
Tehnici avansate de Sharpen: Smart Sharpen si Unsharp Mask.
33. Flux de lucru Sharpen. Flux de lucru complex pentru marirea claritatii unei imagini prin mai multe tehnici Sharpen succesive, analiza comparativa a tehnicilor Smart Sharpen si Unsharp Mask, explicarea parametrilor din panoul de editare a filtrelor, analiza intre tehnica High Pass si High Frequency.
In doar 22 minute veti intelege functionarea tuturor acestor filtre.

Gata! Am invatat sa editam imagini special pentru web design, acum sa vedem inserarea aceste imagini in editorul HTML.
34. Flux de lucru Photoshop - Dreamweaver. Fluxul de lucru in web design, intre Adobe Photoshop CC, Adobe Illustrator CC si Adobe Dreamweaver CC, automatizarea transferului de imagini din modulul de design in Html.
Nu ar fi extraordinar sa putem face copy paste cu un fisier Photoshop, in Dreamweaver? Ei bine, aproape ca putem.
In versiunea Creative Cloud, Adobe a creat acest extraordinar instrument, indispensabil oricarui web designer.

Desenarea elementelor grafice cu Java Script si Html, din Adobe Illustrator CC
35. Adobe Illustrator export HTML 5 Canvas. Vom explora exportul elementelor vectoriale si bitmap din Adobe Illustrator catre HTML 5 Canvas, cu conversia automata a imaginilor in cod Html si java script, cu ajutorul unui uluitor plugin. Obtinerea si instalarea pluginului.
36. Ce este HTML 5 Canvas. HTML 5 Canvas reprezinta un container care inglobeaza grafica vectoriala sau bitmap realizata sub forma de cod Javascript.
37. Elemente de baza ale tehnicii HTML 5 Canvas. exportul in format CTX al elementelor vectoriale si bitmap, a textului si a fisierelor Adobe Photoshop importate in Adobe Illustrator
38. Export background. Optiuni de export javascript pentru un background
39. Pregatirea layoutului web pentru animatie, reamintirea tehnicilor de lucru din Curs Adobe Illustrator CC, necesare acestei etape.
40. Animatia JS, 1 Exportul din Adobe Illustrator a elementelor animate. Animatie automata exportata din Adobe Illustrator impreuna cu codul Java Script asociat.
Animarea unui obiect de-a lungul unei cai, prin Java Script exportat direct din Adobe Illustrator.
41. Layout 2 Construirea layoutului web in Adobe Illustrator CC.
42. Layout 3 Variante de layout pregatite pentru animatie Java Script, exersarea instrumentelor Adobe Illustrator
Web Layout Photoshop Illustrator CC
43. Animatia JS,  Animarea layoutului web prin Java Script exportat direct din Adobe Illustrator.
44. Detalii. Editarea detaliilor finale, retusuri ale layerelor care au secvente de cod asociate.
45. Coduri JS. Documentarea referitoare la sintaxa liniilor de cod asociate layerelor in Adobe Illustrator CC.
46. Illustrator - Photoshop - Dreamweaver. Fluxul de lucru in interiorul suitei Adobe Creative Cloud, intre Adobe Illustrator - Adobe Photoshop - Adobe Dreamweaver referitor la gestionarea, editarea si manipularea imaginilor pentru web design.
47. Bonus: Adobe Photoshop nu are Wrap text tool, fiind dificil sa generam un layout cu text infasurat in jurul unei imagini. Iata rezolvarea acestei probleme - un alt exemplu al aplicabilitatii acestui curs Photoshop / Illustrator.
48. Update Adobe Illustrator CC 2016: imbunatatiri ale fluxului de lucru pentru exportul layout-ului in format HTML / CSS.
Curs Grafica in web design cu Adobe Photoshop si Adobe Illustrator CC
 
Copyright 2017. Vizualizati intreg continutul la rezolutie de cel putin 1200 pixel.
Back to content | Back to main menu