Ce este un fisier PSD?
Stiai ca in fiecare zi apar peste 50.000 de site-uri noi WordPress? Poti sa te diferentiezi de acestia doar cu un design unic, original si special creat intr-un fisier PSD. Acest design poate fi convertit intr-o tema WordPress special pentru site-ul tau.
Exista trei standarde atunci cand creezi un design pentru o tema de site. PSD (fisier pentru editorul de imagine de la Adobe numit Photoshop) este unul dintre ele. De aici porneste totul. Apoi continua cu WP (WordPress), platforma de management al continutului si la final cu Twitter Bootstrap. Ultimul standard este un framework pentru dezvoltarea site-urilor responsive foarte folosit de catre programatori si agentii.
In acest articol, iti vom arata cum sa combini toate cele trei standarde astfel incat sa ai ceva unic si special. Pe scurt, cum sa convertesti un fisier PSD intr-o tema WordPress creata cu Bootstrap
Majoritatea persoanelor care s-au invartit in domeniul design-ului web sunt familiarizati cu terminologia de PSD si nu numai. Acestia cunosti si termeni ca si iconografie, tipografie, spatiere si altele. In realitate, acest termen este chiar foarte usor de inteles. PSD este prescurtarea de la PhotoShop Design. Deci, convertirea unui fisier PSD in WordPress este doar procesul de convertire a unui fisier Photoshop intr-o tema functionala de WordPress care are Bootstrap. Aceasta tema va avea metodologii, design si functionalitatile celor trei standarde. Photoshop este cel mai popular program (software) de editare a imaginilor.
Ce este o tema WordPress?
Despre WordPress, am tot scris pe blog, de la recenzii de teme si pluginuri, la recenzii de constructoare de site-uri pana la sfaturi si trucuri.
Atunci cand faci un site WordPress exista doua aspecte importante. Design-ul propriu zis al site-ului si continutul site-ului.
In WordPress, cea mai populara platforma de management al continutului pentru crearea de site-uri, continutul este independent de cum arata site-ul. Design-ul este definit de tema WordPress instalata si activata. Cand spui tema, poti face comparatie cu temele pentru telefoanele mobile unde se schimba culorile, imaginile, fontul, iconitele, antetele, butoanele si tot stilul vizual. Exista o intreaga industrie in jurul acestor stiluri vizuale de unde poti lua teme gratuite sau care costa de la 25 de dolari in sus.
Ai si optiunea de a crea propriul design, asa cum are titlul si acest articol.
Servicii de convertire a unui fisier PSD in WordPress
Daca crezi ca ai nevoie de ajutor, poti oricand apela la servicii, agentii, designeri web si programatorii care sa te ajute sa realizezi un fisier PSD, sa il convertesti intr-o tema WordPress. Printre cei mai popular, pomenim:
- PSDtoWPService.com ;
- Codeable – o piata unde gasesti freelanceri dedicati;
- WPKraken – o agentie de dezvoltare web care are in portofoliu site-uri pentru Suzuki si Lexus. Acestia au programatori, testeri si designeri.
Convertirea unui fisier PSD intr-o tema WordPress
Primul pas – Decuparea fisierului PSD
Odata ce ai fisierul PSD gata facut, trebuie sa il decupezi. Termenul corect in limba engleza este „Slicing”. Prin acest proces transformi intregul fisier PSD intr-un design responsive pentru WordPress. Desi termenul poate sa creeze confuzie, acesta se refera la taierea si divizarea unei singuri imagini in mai multe imagini. Prin urmare, dintr-un fisier PSD, se fac mai multe fisiere care ulterior se salveaza sub un alt format cum ar fi PNG. Fiecare element de design va avea propria imagine/ propriul fisier. Dintr-un singur organism creezi mai multe, mai mici pe care le rearanjezi astfel incat sa arate fix ca si organismul initial.
Aceasta operatiune este foarte importanta deoarece nu poti coda un singur fisier pentru a crea un design corespunzator. Pentru a coda un PSD, ai nevoie de cel putin cunostinte HTML si CSS. In acest moment, a aparut versiunea 5 la HTML si 3 la CSS. Iti recomandam sa scrii codul conform celor mai noi tehnologii.
Poti face aceasta operatiune nu doar prin Photoshop, ci si prin GIMP sau alt software puternic de editare a imaginilor. Totusi, noi iti recomandam PhotoShop pentru ca procesul ar trebui sa fie mai usor si mai rapid datorita uneltelor disponibile. Amintim unelte ca si Layers, Layer Mask, manipularea si blending-ul fisierelor PSD si a imaginilor brute cat si extragerea Metadatelor.
Indiferent de softul pe care il folosesti, indicat ar fi ca totul sa fie perfect pana la ultimul pixel. Asigura-te ca nu pierzi timpul sa tai elemente design mari cum ar fi antetul sau subsolul care pot fi codate foarte usor. Ca si exemplu, un antet care are o culoare ca si fundal, poate avea fundalul pus in CSS. Decupeaza elementele antetului daca sunt necesare, dar folosind HTML, poti usor sa adaugi si meniul.
Al doilea pas – Descarcarea si instalarea Bootstrap-ului
Am mai scris un ghid despre Bootstrap aici. Odata ce ai fisierul PSD taiat, trebuie sa descarci Bootstrap de la adresa web https://getbootstrap.com/. Ai grija sa descarci ultima versiune. Extrage directorul de acolo si vei gasi trei altele css, fonts si js.
Tine minte, ca este cel mai folosit framework datorita puterii pe care ti-o ofera atunci cand vine vorba de design responsive. Practic, poate fi folosit pentru dispozitive foarte mici ( clasa xs), dispozitive mici (clasa sm), tablete (clasa md), laptopuri si calculatoare (clasa lg).
Vom continua cu urmatorii trei pasi in urmatorul articol. Pana atunci joaca-te cu PSD si cu BootStrap si incearca sa intelegi conceptele din spatele acestora.