Majoritatea designerilor care lucrează pe site-uri web sau aplicații mobile sunt obișnuiți să folosească programul Adobe Photoshop. Cu toate acestea, în anumite privințe, Adobe Fireworks are o serie de avantaje față de Photoshop tradițional.
Să evidențiem principalele avantaje și câteva caracteristici specifice ale Fireworks. La sfârșitul articolului este postat un videoclip, care demonstrează clar câteva aspecte ale funcționalității programului.
1. Lucrul cu obiecte
1.1 Selectare
Când treceți cu mouse-ul peste un obiect, în jurul acestuia apare un dreptunghi roșu (sau vârfurile dreptunghiului dacă este un grup), indicând faptul că acesta poate fi selectat. Obiectul selectat este evidențiat cu albastru. După părerea mea, selectarea și mutarea obiectelor în Fireworks este mai ușoară și mai rapidă decât în Photoshop, căruia îi lipsește această funcționalitate.
1.2 Grupuri: lucru rapid cu obiecte
Gruparea obiectelor
Lucrul în Fireworks se bazează în mare măsură pe gruparea și degruparea obiectelor. Acest lucru vă permite să tipăriți machete mult mai rapid decât în Photoshop, unde lucru rapid cu grupuri nu este posibil. Acolo, gruparea elementelor duce la crearea unui folder, iar pentru a selecta un folder mai târziu, trebuie să vă referiți la panoul de straturi. Fireworks nu are nicio problemă cu alegere rapidă atât întregul grup cât și componentele acestuia fără a utiliza panoul de straturi.
Principiul muncii din program poate fi descris ca „ceea ce văd în spațiul de lucru, așa că lucrez” (prin analogie cu conceptul WYSIWYG) - acest lucru vă permite să nu fiți distras și să lucrați mai repede. Atribuirea minuțioasă a numelor fiecărui strat și fiecărui folder (de exemplu, „antet”, „subsol”, etc.) este complet inutilă - este mai ușor să descrii toate stările interfeței și să le explici direct pe aspect, va arăta mai clar.
Comenzi rapide de la tastatură: grupare - ⌘ + G, degrupare - ⇧ + ⌘ + G.
Meniul: grupare / degrupare - Modificare → Grupare / Degrupare.
1.3 Ușurința în utilizare a straturilor
Acest punct este direct legat de cel anterior: absența folderelor în fișierele de lucru vă permite să mutați straturi de-a lungul ierarhiei documentelor fără a limita nimic și a complica nimic (cu toate acestea, funcționalitatea folderelor este furnizată). Manipularea obiectelor este de obicei limitată la mișcare elementară mai sus sau mai jos în ierarhia straturilor. Din nou, panoul Straturi primește o atenție minimă. În acest sens, Fireworks este similar cu Illustrator.
Comenzi rapide de la tastatură: deplasarea în sus / în jos - ⌘ + / ↓, în sus / în jos toate straturile - ⇧ + ⌘ + / ↓.
Meniul: mutați mai sus / jos etc. - Modificare → Aranjare → Aduceți înainte / Aduceți înapoi etc.
1.4 Elemente de aliniere
Interfața de aliniere este situată în panou Alinia... Pe lângă alinierea elementelor unele față de altele, care este disponibilă și în Photoshop, există o aliniere a elementelor în raport cu întreaga pânză. Foarte la îndemână atunci când lucrați cu machete centrate.
Instrumentul pentru selectarea „în spatele” unui obiect este numit Selectați În spatele instrumentului, este ascuns în meniul drop-down instrument Instrumentul Pointer... Vă permite să selectați obiecte ascunse sub obiectul care se suprapun, fără a-l muta pe acesta din urmă în lateral sau a-i opri vizibilitatea. Mai mult, puteți selecta oricare dintre multele obiecte stivuite „într-o stivă”. Pentru a face acest lucru, trebuie să faceți clic de mai multe ori pe obiectul situat în partea de sus și să îl selectați pe cel corespunzător din listă - de sus în jos.
Comenzi rapide de la tastatură: selectați instrumentul Select Behind - V sau 0 (dacă este necesar, apăsați de două sau mai multe ori).
1.6 Ghiduri „inteligente” ( )
Pe măsură ce mutați un obiect, ghidajele întrerupte par să arate unde acel element se aliniază cu alte obiecte de pe pânză. Puteți activa / dezactiva „fixarea” unui obiect în ghiduri.
Comenzi rapide de la tastatură: Afișați Ghiduri inteligente - ⌘ + \, Restați la Ghiduri inteligente - ⇧ + ⌘ + \.
Meniul: Afișați Ghiduri inteligente: Vizualizare → Ghiduri inteligente → Afișare Ghiduri inteligente, Aliniați la Ghiduri inteligente: Vizualizare → Ghiduri inteligente → Afișați Ghiduri inteligente.
1.7 Distribuție
Panou Alinia(vezi paragraful 1.4) conține un bloc Spaţiu, care vă permite să distribuiți obiecte la o distanță egală, atât pe orizontală, cât și pe verticală.
2. Stiluri
2.1 Copiere stiluri
Un stil de obiect poate avea multe componente (sau atribute, atribute), de exemplu, culoarea umplerii, contur, tipul, dimensiunea etc. Copierea unui stil de la un obiect la altul se face foarte rapid: selectați obiectul original, apăsați ⌘ + C. Apoi selectați ținta și apăsați ⇧ + ⌥ + ⌘ + V.
Comenzi rapide de la tastatură: stil de copiere - ⌘ + C, stil de lipire - ⇧ + ⌥ + ⌘ + V.
Meniul: stil de copiere - Editare → Copiere, inserare stil - Editare → Lipire atribute.
2.2 Modele
În Fireworks, puteți atribui un model de umplere unui obiect, care poate fi orice imagine. În acest caz, obiectul poate fi transformat cu ușurință fără a perturba desenul modelului prin manipularea punctelor de ancorare ale conturului obiectului.
2.3 Linii
Linii create instrument vectorial Instrument de linie(tasta N), puteți personaliza (personaliza). Uneori doriți să redați un link subliniat. Pentru a face acest lucru, în panou Proprietăți trebuie să faceți clic pe butonul Editați cursa, în grafic Dash schimbați valoarea în O singură liniuță... Lungimea curselor și decalajele dintre ele pot fi reglate în același loc.
2.4 Gradienți
Lucrul cu gradienți în Fireworks este mai simplu și mai convenabil decât în Photoshop. Există două puncte de ancorare: unul rotund indică începutul gradientului, unul pătrat la sfârșitul gradientului. Acesta din urmă determină și lungimea gradientului. Fără ferestre pop-up multiple precum Photoshop (una dintre cele mai proaste caracteristici ale programului).
2.5 Colțuri rotunjite
Prin crearea unui dreptunghi cu instrumentul Instrument dreptunghi(cheie U), selectați din panou Proprietățiîn câmp Rotunjime valoarea necesară, precum și unitatea de măsură pentru rotunjimea colțurilor. Dreptunghiul rezultat poate fi transformat prin manipularea vârfurilor sale, în timp ce colturi rotunjite va persista.
3. Simboluri
Simbolurile sunt obiecte care pot fi copiate de mai multe ori, păstrând unele proprietăți și modificând altele. De exemplu, puteți crea un simbol de buton cu capacitatea de a-l întinde la lățimea sa și capacitatea de a schimba textul de pe el. Schimbând culoarea unui buton, îl schimbați în toate celelalte copii ale simbolului butonului.
Se numesc simboluri complexe simboluri componente... În ele, puteți configura mulți parametri folosind panoul Proprietăți simbol... De exemplu, în cazul unui simbol de buton, aceasta este culoarea de umplere, fontul, culoarea textului și așa mai departe.
O proprietate specială a simbolului este capacitatea de a scala în același timp păstrându-și toate fețele ( 9 – scalarea feliei). Este de dorit să îl creați și să îl personalizați în etapa creării unui simbol.
4. Măști
Lucrul cu măști în Fireworks este rapid și simplu. Cel mai simplu mod: plasați un obiect vectorial deasupra stratului, care va fi masca. Selectați ambele obiecte, faceți clic Click dreapta mouse-ul și selectați Grupați ca mască.
5. Snap la pixeli
Fireworks se concentrează pe crearea de grafice pe ecran. Obiectele vectoriale sunt create cu o referință inițială bazată pe pixeli. Dacă, ca urmare a manipulării obiectului sau a importului de grafică din exterior, ancora este ruptă, o puteți restabili oricând apăsând comanda rapidă de la tastatură ⌘ + K.
Din păcate, există o eroare în program: uneori, atunci când redeschideți fișierele, puteți constata că în obiectele vectoriale care nu sunt convertite în curbe (căi), aprinderea la pixeli se pierde, iar marginile obiectelor devin indistincte. Prin urmare, este recomandat să convertiți cât mai des posibil obiectele vectoriale, cum ar fi dreptunghiuri, în curbe.
Comenzi rapide de la tastatură: Aliniați la Grila de pixeli - ⌘ + K.
Meniul: Aliniați la Grila de pixeli - Modificați → Aliniați la Pixel.
6. Fișiere sursă
Fișierele de lucru Fireworks sunt salvate cu rezoluția png... Avantajele lor sunt că aceste fișiere:
- cântăresc mult mai ușor decât fișierele PSD similare.
- poate fi vizualizat pe orice computer fără a salva din nou în alte formate (mulți oameni nu pot deschide fișiere psd pe computerul lor). Acest lucru crește viteza de transfer și afișare a fișierelor altor persoane.
7. Importați din Adobe Photoshop / Adobe Illustrator
Fireworks deschide fișiere PSD, totuși cu unele limitări și erori. Din păcate, acest mecanism nu a fost complet elaborat de Adobe.
Grafica vectorială poate fi importată din Illustrator. În special, este convenabil să utilizați standardul Copiere → Lipire. Totodată, se păstrează acuratețea afișării graficelor (pentru a obține cea mai mare acuratețe, recomand în Illustrator să efectuați operația pe obiecte extinde, aducându-le la cele mai simple contururi).
8. Exportați parametrii în CSS
O caracteristică convenabilă a programului pentru crearea de site-uri web este exportul proprietăților obiectului în CSS. Acestea pot include culoare (poate fi un gradient), umbre, font etc. - orice poate fi descris Proprietăți CSS... Pentru a efectua această operație, utilizați panoul Proprietăți CSS.
Comenzi rapide de la tastatură: apelați panoul Proprietăți CSS - Fn + ⌘ + F7.
Meniul: apelați panoul CSS Properties - Fereastra → CSS Properties.
9. Prototipuri
Fireworks este, de asemenea, un instrument complet de prototipare a site-ului web aplicatii mobile... Lucrând în program, puteți să rafinați simultan designul și să exportați machetele la un prototip. Drept urmare, puteți obține un set de fișiere html, urmând link-urile în care vă puteți „click” și vă puteți imagina cum va funcționa viitorul site.
Video
Ca supliment la articol, am înregistrat un videoclip pentru a arăta clar câteva dintre principiile programului descris mai sus.
Concluzie
Astăzi, Fireworks face parte din Adobe Nor creativ, deși, din păcate, Adobe a refuzat dezvoltare ulterioară al acestui produs demn (cu care aderenții Fireworks din întreaga lume au fost nespus de supărați), promițând să creeze analogi adecvati, pe care, totuși, încă nu le vedem.
În țara noastră, acest editor grafic nu a câștigat popularitate. S-a întâmplat ca costul pachetului Adobe Creative Suite în țara noastră să fie în medie egal cu costul traficului de internet pentru descărcarea acestuia, sau cu costul suportului pe care este înregistrat. Acesta este parțial motivul pentru care toată lumea folosește Adobe Photoshopși Adobe ilustrator pentru a crea web design. Ei bine, acum, pentru mine personal, este timpul să mă gândesc la licențierea software-ului.Eu nu sunt web designer, sunt programator. Principalele sarcini cu care le rezolv editor grafic este modificarea minimă a rasterului și grafica vectoriala, tăierea designului finit, optimizarea imaginilor, realizarea de prototipuri etc. Photoshop și Illustrator rezolvă aceste probleme fără probleme, dar și Fireworks le poate rezolva. Acum să ne amintim costul Photoshop + Illustrator (700 USD + 600 USD) și să comparăm cu costul Fireworks (300 USD).
Se întâmplă adesea ca Fireworks să nu facă față afișării nativelor fișiere Photoshopși Ilustrator. Există erori la afișarea unor efecte. În astfel de cazuri, o captură de ecran de referință ajută de obicei, ceea ce vă permite să înțelegeți unde este problema și, dacă este posibil, să o remediați. De asemenea este si editori alternativi(Gimp, Pixelmator) care se deschid dosarul original, dar deja cu propriile erori, care nu sunt prezente în Fireworks.
Astfel, este puțin probabil ca Fireworks să fie de interes pentru designerii care lucrează deja în Photoshop, principalii săi utilizatori sunt programatori, designeri de layout, designeri și o mică parte din designeri (cel puțin în Rusia).
Compilare video cu focuri de artificii
După ce am scotocit în Runet după un videoclip despre artificii în rusă, am dat peste un fel de vid. Toate linkurile disponibile erau pe Youtube. Așa că m-am îndreptat către el și rezultatele căutării erau sub habrakat. Cine va fi interesat de aceste videoclipuri? În primul rând, pentru programatori, parțial pentru designerii de layout care doresc să înțeleagă cum este creat designul web și de ce nu au întotdeauna nevoie de Photoshop.Procesul de creare a site-ului în Fireworks
Desigur, nu va funcționa pentru a crea un site web cu drepturi depline într-o perioadă scurtă de timp a videoclipului. Prin urmare, nu există timp pentru un desen amănunțit al designului, iar capacitățile Fireworks sunt în mod evident inferioare Photoshop. Aspectul rezultat se bazează pe tabele. Acesta este mai mult un prototip decât un site real, dar poate fi potrivit pentru sarcini simple. Scopul articolului și al acestor videoclipuri este de a arăta capacitățile Fireworks, că în multe cazuri este capabil să înlocuiască Photoshop și Illustrator. Ca programator, a fost interesant pentru mine să observ munca unui designer și să învăț unele dintre cele mai simple acțiuni.Video de la ML Web Consulting
Foarte frumos videoclipul in 2 parti. Mai întâi, se creează un aspect al designului site-ului în Fireworks, apoi proiectul este exportat în Dreamweaver, o mică editare și site-ul este gata. A durat 20 de minute pentru a crea site-ul pentru videoclip, dar autorul avea deja spațiile libere. Dar, cu toate acestea, în scurt timp, s-a dovedit un design destul de frumos și un aspect funcțional pe mese.Video de la NeaceDesign
Totul este corect aici. Autorul videoclipului a creat un site de portofoliu pentru fotograf în 10 minute. A ieșit simplu și drăguț.Videoclipuri de la crearegroup
Aceste videoclipuri arată procesul de creare a unui site web (prototip) de la obținerea unui aspect la format Photoshop, la site-ul finit, ușor modificat în Dreamweaver. Doar 15 minute cu explicații.Videoclipuri de la flashwebcenter
Public link-uri către aceste videoclipuri. Calitatea înregistrării nu este foarte bună, comentariul nu se aude întotdeauna. Iar deciziile de design personal mi se par puțin ciudate. Dar întregul proces este afișat de la început până la sfârșit, doar 30 de minute pe site. În țara noastră, acest editor grafic nu a câștigat popularitate. S-a întâmplat ca costul pachetului Adobe Creative Suite în țara noastră să fie în medie egal cu costul traficului de internet pentru descărcarea acestuia, sau cu costul suportului pe care este înregistrat. Acesta este parțial motivul pentru care toată lumea folosește Adobe Photoshop și Adobe Illustrator pentru a-și crea design-urile web. Ei bine, acum, pentru mine personal, este timpul să mă gândesc la licențierea software-ului.Eu nu sunt web designer, sunt programator. Principalele sarcini pe care le rezolv cu ajutorul unui editor grafic sunt modificarea minimă a graficelor raster și vectoriale, tăierea designului finit, optimizarea imaginii, prototiparea etc. Photoshop și Illustrator rezolvă aceste probleme fără probleme, dar și Fireworks le poate rezolva. Acum să ne amintim costul Photoshop + Illustrator (700 USD + 600 USD) și să comparăm cu costul Fireworks (300 USD).
Se întâmplă adesea ca Fireworks să nu se descurce cu afișarea fișierelor native Photoshop și Illustrator. Există erori la afișarea unor efecte. În astfel de cazuri, o captură de ecran de referință ajută de obicei, ceea ce vă permite să înțelegeți unde este problema și, dacă este posibil, să o remediați. Există și editoare alternative (Gimp, Pixelmator) care deschid fișierul sursă, dar cu propriile erori care nu sunt în Fireworks.
Astfel, este puțin probabil ca Fireworks să fie de interes pentru designerii care lucrează deja în Photoshop, principalii săi utilizatori sunt programatori, designeri de layout, designeri și o mică parte din designeri (cel puțin în Rusia).
