Share
Crearea unui calendar grafic manual nu este o sarcină ușoară. De aceea este mai bine să găsiți un mod de automatizare a procesului. În tutorialul de astăzi vă vom arăta cum să generați un calendar complet de an, personalizat, folosind JavaScript. Dacă sunteți un pic de programator de calculator, este grozav, dacă nu, nu vă faceți griji că acest lucru va fi destul de simplu.
Potrivit lui Adobe, un script este o serie de comenzi care îi spun lui Photoshop să efectueze una sau mai multe sarcini. Primul lucru pe care trebuie să-l faceți este să aruncați o privire la referința JavaScript a lui Adobe. O puteți găsi aici. Acesta conține toate proprietățile obiectului și metodele pe care le suportă Photoshop CS4, cu exemple și vă va oferi o idee despre ce fel de lucruri puteți face cu scripting-ul din Photoshop. Dacă utilizați o versiune mai veche puteți găsi aici referințe.
Deci sa începem. Ideea principală a proiectului este crearea de straturi de text pentru fiecare lună care conține datele, astfel încât vom lucra în principal cu manipularea textului. Deschideți ExtendScript Toolkit și creați un nou fișier JavaScript (Command + N). Aceasta va conține toate comenzile pe care le vom da Photoshop. Dacă nu doriți să utilizați ExtendScript Toolkit, puteți utiliza orice editor simplu de text.
Mai întâi trebuie să definim câteva variabile pentru atributele de document și schema de culori a calendarului. Mi-am facut documentul 1280x800 la o rezolutie de 72 pixeli / inch, numit-o "PhotoshopScriptCalendar" si am ales 2010 ca anul calendarului pe care il vom crea.
Aceasta este schema de culori de bază pe care o vom folosi. "NormalColor" este pentru săptămânile și numele de luni. Pentru duminici am folosit o altă culoare pentru a le face să iasă în evidență, aceasta este "highlightColor" și vom folosi "backColor" ca culoare de fundal calendaristică implicită dacă nu selectăm o imagine personalizată pentru asta.
Așa cum am spus mai devreme, vom lucra în principal cu manipularea textului, deci trebuie să definim câteva variabile pentru indentare și text pe care le vom folosi în mod repetat, cum ar fi anteturile de luni.
Pentru a seta o culoare diferită coloanei de duminică, trebuie să o facem ca un strat de text diferit de celelalte zile. Din acest motiv, avem două titluri: "monthHeader" - de luni până sâmbătă și "sundayHeader". Fiecare dintre aceste două variabile se termină cu două "\ r". Acestea reprezintă caractere noi de linie, la fel ca și apăsarea tastei Return pe tastatură. Apoi definim variabila de indentare. Observați că primul lunar este o vineri, deci pentru fiecare zi înainte, trebuie să adăugăm o notă în locul numerelor. Numărul de suprafețe albe ale acestor variabile depinde de fontul pe care îl utilizați și de mărimea acestuia, astfel încât va fi nevoie de un pic de traseu și de eroare înainte de ao face corect. În cele din urmă, faceți o listă cu toate numele de luni.
Acum că avem tot ce avem nevoie, putem începe să creăm documentul .psd.
După cum puteți vedea, codul este destul de ușor de citit. În aplicația noastră Photoshop adăugăm un document nou cu lățimea specificată, înălțimea, rezoluția și numele pe care l-am definit mai devreme, un mod de culoare și păstrăm referința într-o nouă variabilă "doc". În mod prestabilit, toate documentele noi sunt în RGB, pentru a putea fi omise acest parametru, dar dacă doriți CMYK, de exemplu, puteți utiliza "NewDocumentMode.CMYK". La fel cu LAB, GRAYSCALE și BITMAP. Puteți găsi toate acestea în referințele legate de mai sus.
Apoi vom face o nouă selecție și vom selecta întregul document, îl vom umple cu culoarea de fundal și, eventual, îl vom deselecta.
Apoi trebuie să adăugăm un fundal personalizat dintr-o imagine existentă. Fundalul de gradient de la rezultatul final afișat mai sus este de fapt o imagine separată.
Pentru aceasta vom folosi funcția openDialog (). Aceasta deschide dialogul din "File> Open" și pune în "file" tabloul lista de imagini selectate. Vom folosi numai prima imagine selectată care este în matricea "file" la poziția 0. Deci, mai întâi trebuie să verificăm dacă a fost selectată o imagine.
Apoi, vom încărca imaginea selectată în aplicația noastră și vom primi o referință la aceasta apelând "app.activeDocument" care returnează documentul activ în prezent în Photoshop.
Redimensionați imaginea la lățimea și înălțimea preferate. Din nou, facem o nouă selecție a întregului document, copiem această selecție și închidem documentul cu opțiunea de a nu salva modificările.
În final, în documentul nostru de calendar, lipiți selecția. Acest lucru pune imaginea ca primul strat deasupra stratului de fundal. Apoi denumiți ceva "BackgroundImage".
Observați că, dacă nu a fost selectată nicio imagine din dialog, nici una dintre aceste comenzi nu ar fi fost făcută.
O.K. Acum vine generația actuală a calendarului. Acest lucru ar putea fi un pic mai dificil, dar o vom lua pas cu pas și sperăm că nu va fi atât de greu de înțeles.
Trebuie să facem o serie de acțiuni pentru fiecare lună a anului. Pentru aceasta folosim o buclă "pentru". În esență, aceasta ia variabila "curr", pe care o folosim pentru a indica luna curentă în care lucrăm, își stabilește valoarea inițială la 0, apoi face setul de acțiuni în mod repetat, incrementând valoarea "curr" de fiecare dată, până când aceasta devine 12. Astfel trecând prin toate cele douăsprezece luni.
Mai întâi trebuie să definim două variabile pe care le vom folosi pentru a poziționa lunile noastre în document ca o rețea. Acestea reprezintă offseturile X și Y ale fiecărei luni. Vom pune 4 luni pe un singur rând, deci pentru offsetul X vom folosi operația "%". Aceasta returnează restul divizării "curr" la 4. Această compensare va fi aceeași pentru ianuarie, mai, septembrie, pentru februarie, iunie, octombrie și așa mai departe, pentru fiecare lună din aceeași coloană. Pentru offsetul Y folosim funcția javascript "Math.floor ()" care returnează cea mai mare valoare, mai mică decât rezultatul divizării "curr" la 4. Astfel, pentru lunile din același rând, offsetul Y este același.
În cele din urmă, dorim să avem straturile pentru fiecare lună într-un grup separat. Așa că vom începe să creăm un grup de straturi și vom da numele lunii curente. Folosim aici lista de luni pe care am definit-o mai devreme.
Apoi, vom crea un nou strat de text în interiorul grupului nostru și vom seta numele în luna curentă. Acesta va fi stratul nostru de nume de luni.
Acum trebuie să setăm atributele textului, cum ar fi culoarea textului, dimensiunea fontului și justificarea. Vom seta tipul textului nostru la "PARAGRAPHTEXT" și vom da stratului nostru dimensiunile preferate. Atributul "conținut" al variabilei "monthName" înseamnă textul real care va fi vizibil în interiorul stratului, așa că dorim ca acesta să fie numele lunii curente.
În cele din urmă, vom roti stratul în sens invers acelor de 90 ° și vom poziționa stratul. Aici vom folosi variabilele noastre offset "x" și "y".
Rețineți că poziționarea se face în raport cu colțul din stânga sus al straturilor, dar din moment ce am rotit-o cu 90 ° CCW, acum a devenit colțul din stânga jos. Dacă documentul dvs. are dimensiuni diferite de cele ale mele, este posibil să trebuiască să modificați constantele pe care le-am folosit pentru poziționare. Valorile folosite sunt enumerate mai jos.
Apoi vom face stratul de text care va conține toate datele din luna curentă, cu excepția zilelor de duminică. Vom adăuga-o la grupul pe care l-am creat mai devreme și vom seta numele, justificarea, culoarea și mărimea fontului și o vom poziționa. Vom adăuga conținutul acestui lucru mai târziu, voi explica de ce, când ajungem la acest punct.
Același lucru pentru stratul de duminică, dar de data aceasta vom seta culoarea pentru a "evidenția culoarea".
Acum, trebuie să creați două variabile care să țină textul pe măsură ce îl generăm, "text" va conține zilele lucrătoare și "textSun" duminica. Începem cu adăugarea titlurilor și plasarea liniei pentru prima dată a lunii. Creați o nouă dată cu funcția javascript "Data ()" din anul calendarului, lunii curente și primului lunii respective și obțineți poziția în săptămână. Amintiți-vă că numerotarea începe întotdeauna de la 0, de exemplu dacă primul din lună este luni, "n" va fi 0, dacă este marți, "n" va fi 1 și așa mai departe. Apoi trebuie să adăugăm indentul pe care l-am definit la început la variabila "text" de câte ori este necesar. Dacă prima zi a lunii este o miercuri, de exemplu, vom adăuga linia de două ori.
O.K. E timpul să generăm toate numerele pentru lună. Pentru aceasta trebuie să știm câte zile există în luna curentă și avem nevoie de numerele în format "leading zeros", deci trebuie să ne întoarcem și să definim două funcții personalizate: "daysInMonth" și "makeDay". Deci, vă rog să derulați în partea de sus a codului dvs. și să adăugați aceste funcții. Așa cum am spus că funcția "daysInMonth" returnează numărul de zile din luna în care o dăm și "makeDay" returnează numărul pe care îl dăm într-un anumit format și adaugă niște spații libere necesare pentru a distanța zilele lunii. De exemplu, dacă numim funcția "daysInMonth" cu anul = 2010 și luna = 0 (ianuarie), vom reveni la numărul 31. Dacă numim funcția "makeDay" cu d = 3, de exemplu, textul "03", dar dacă d = 13 se va întoarce "13". Observați că dacă "d" este mai mic de 10, va fi adăugat un zero înainte de el.
Vom începe de la d = 1 și vom crește până când va ajunge la numărul de zile din lună. Acum, dacă "i" are valoarea "6" înseamnă că este o duminică, așa că trebuie să o adăugăm la stratul de duminică. Nu uitați să puneți aici un "\ r" pentru o linie nouă. În caz contrar, îl adăugăm în zilele lucrătoare. Aici adăugăm o linie nouă numai dacă ziua curentă este "Sâmbătă" ("i" este "5"). În final, trebuie să creștem atât "i" cât și "d", iar dacă valoarea "i" ajunge la "7", adică dacă ultima zi adăugată a fost duminică, trebuie să o facem din nou "0".
În cele din urmă, avem toate datele din variabilele noastre de text și le putem adăuga la straturile noastre. Motivul pentru care am întârziat acest pas este că este nevoie de ceva timp pentru ca Photoshop să adauge textul unui strat, deci este mai bine să îl adăugați simultan, decât să adăugați fiecare zi separat.
Deci, toate straturile de lună sunt acum generate, iar tot ce trebuie să facem este să facem stratul de an și acea linie mică în partea de jos. Pentru stratul de an, este aceeași procedură pe care am folosit-o înainte, a crea un strat nou, a-i da un nume, dimensiunea și culoarea textului și o poziționează acolo unde vrem.
Pentru linia de jos este ceva diferit. Mai întâi trebuie să definim o regiune cu coordonatele X și Y pentru toate cele patru colțuri, apoi să facem o selecție din acea regiune, să o umplem cu culoarea noastră pe un strat nou și, în final, să o deselectăm.
Codul nostru este terminat! Singurul lucru de făcut acum este să-l rulați. Dacă utilizați ExtendScript Toolkit, din meniul derulant selectați "Adobe Photoshop", dacă nu aveți Photoshop deschis, faceți clic pe pictograma din partea stângă "Conectare la aplicația vizată", apoi apăsați pictograma de redare. Dacă ați folosit un editor de text diferit, salvați fișierul cu extensiile ".js" sau ".jsx" și executați-l din Photoshop: File> Scripts> Browse și apoi selectați fișierul.
Suntem terminati! Sper că v-ați bucurat să lucrați la acest mic proiect. Scripturile din Photoshop sunt foarte utile atunci când trebuie să faci acțiuni repetitive și pot face munca ta mai ușoară odată ce le-ai atârnat. Nu ezitați să trimiteți sugestii pe care le aveți, ele sunt întotdeauna binevenite!
Accentsconagua