PSD, czyli Adobe Photoshop jest obecnie najpopularniejszym programem do projektowania grafiki rastrowej, używanym często przy pracach dotyczących designu stron internetowych. Jest częścią abonamentowego pakietu Adobe Creative Suite, w którym oprócz programu uzyskujemy także dostęp do innych aplikacji firmy.
WooCommerce to z kolei wtyczka do CMS-u WordPress, która umożliwia stworzenie sklepu internetowego. Można dzięki temu w prosty i niedrogi sposób zbudować rozwiązanie e-commerce, z czego korzysta już 42% takich firm.
Aby przekonwertować projekt stworzony w Photoshopie do WooCommerce, należy wykonać następujące kroki:
- wyciąć grafiki z projektu PSD
Staranne przycięcie grafik, pozwoli uzyskać pliki, które będą się poprawnie wyświetlały na przyszłej stronie. Należy pamiętać o tym, by wyciąć taką ilość obrazów, która pozwoli grafice ładować się w częściach, zmniejszając przez to obciążenie serwera.
- przeprowadzić kodowanie HTML:
Ważne jest zawarcie w kodzie podstawowych elementów struktury strony, czyli np. nagłówka, elementów nawigacji czy stopki. Należy także mieć na uwadze standardy budowy witryn HTML i przeprowadzać proces wyjątkowo starannie, ponieważ poszukiwanie błędów w gotowym już kodzie jest bardzo czasochłonne.
- stworzyć arkusze stylów CSS:
Dzięki arkuszom stylów możemy używać na stronie wielu efektów graficznych, co sprawia, że ograniczona zostaje liczba i objętość obrazów a witryna działa bardziej wydajnie. Kodowanie CSS ułatwić mogą takie frameworki jak np. Bootstrap czy preprocesory rodzaju SASS, LESS i Stylus.
- dostosować HTML do motywu WordPress
Witryny WordPress wymagają użycia motywów. Dlatego też nasz kod HTML musi mieć strukturę, która jest odpowiednia dla standardowego motywu CMS-u. Oznacza to m.in. utworzenie takich plików jak style.css, header.php, sidebar.php, footer.php i index.php.
Należy także dodać niestandardowe menu nawigacyjne i przekonfigurować własny arkusz stylów, aby spełniał wymagania WordPressa. Następnie powinniśmy dodać dalsze funkcje WordPressa, co pozwoli m.in. na łatwiejszą edycję i rozbudowę witryny.
- zainstalować i skonfigurować wtyczkę WooCommerce
WooCommerce jest bezpłatnym plug-inem, natomiast jego dodatki często są darmowe jedynie w wersji podstawowej. Rozbudować je można po wykupieniu licencji.
Instalacja oprogramowania jest prosta i intuicyjna. Konfiguracja wtyczki polega m.in. na ustaleniu sposobu prezentowania produktów w sklepie, wyświetlania strony, edycji ustawień magazynu czy opcji płatności i dostawy.
PSD2CSS jest firmą technologiczną skupioną wokół rozwiązań WordPress / WooCommerce / PHP / HTML5. Oferujemy zarówno usługi wdrożeniowe jak również body leasing programistów front-end oraz back-end. Jeśli trafiłeś tu poszukując odpowiedzi na istniejące problemy i masz dość współpracy z freelancerami a stawiasz na bezkompromisową jakość - zapraszamy do kontaktu.
