Programy do Web Design’u.

Web Design czyli programowanie to nie wszystko.

Już od jakiegoś czasu jesteś zainteresowany/na programowaniem. Uczysz się w domowym zaciszu z różnych materiałów lub chodzisz na szkolenia czy zajęcia na uczelni. Chcesz budować fajne strony internetowe, aplikacje czy software. Jednak żeby można było zacząć prace programistyczne nad danym projektem trzeba wiedzieć co w ogóle trzeba zaprogramować i jak to ma wyglądać. Skąd to wiesz? Ze specyfikacji technicznej (funkcjonalności itp.) oraz… projektu graficznego czyli gdzie się robi Web Design.

Kto przygotowuje projekty graficzne?

Pracą nad wyglądem strony zajmują się Graficy komputerowi czy inaczej Designerzy. To dzięki ich pracy wirtualny świat jest tak barwny, kolorowy i atrakcyjny. Tworzą UI- User Interface oraz UX czyli User Experience przez co użycie danej aplikacji czy strony internetowej jest dla nas miłym doświadczeniem do którego chcemy wracać.

Projektowanie graficzne jest pracą koncepcyjną i wymaga ogromnej wyobraźni połączonej z umiejętnością syntezy kształtów oraz barw. Nie zawsze jest wymierna gdyż do stworzenia atrakcyjnego projektu często potrzebna jest tzw. “wena” i wyników często nie można przełożyć bezpośrednio na godziny spędzone przed monitorem. To zajęcie zdecydowanie nie dla każdego. Po prostu trzeba mieć w sobie to coś. To jest sztuka.

Gdzie się to robi?

Designer zazwyczaj dostarcza projekt graficzny Software Developerowi w postaci tzw. pliku warstwowego gdzie poszczególne elementy np. strony internetowej są ułożone w warstwach które łatwo odseparować od reszty. To bardzo pomaga Developerowi bo kodowanie ze zwykłych plików .jpg czy .png może być udręką. W jakich programach profesjonaliści przygotowują pliki warstwowe?

1. Adobe Photoshop

Program będący częścią pakietu firmy Adobe jest doskonale znany nie tylko grafikom komputerowym ale też wszystkim entuzjastom fotografii. Jest uniwersalny i ma ogromne możliwości. Pliki warstwowe przygotowane w Photoshopie mają rozszerzenie .psd. Wadą PS’a w przypadku projektów webowych jest to, że pracuje na grafikach rastrowych o określonej rozdzielczości przez co generowanie wysokiej jakości obrazów powoduje wzrost rozmiaru plików wyjściowych. Najczęściej używane formaty plików to .jpg czy .png. Koszt komercyjnej licencji Ps’a to 15-25 € za miesiąc.

2. Adobe Illustrator

Kolejny program od Adobe tym razem nieco inny. Dlaczego? Bo pracuje na grafice wektorowej. Czym jest grafika wektorowa lub inaczej wektory? Są to pliki graficzne o rozszerzeniu .svg bez konkretnej rozdzielczości które można dowolnie powiększać bez straty jakości obrazu. W uproszczeniu wygląd definiowany jest przez współrzędne punktów określających kształty wewnątrz grafiki. Mają bardzo mały rozmiar przez co są szeroko stosowane w projektach webowych. Pliki warstwowe przygotowane w Illustratorze mają rozszerzenie .ai. Koszt komercyjnej licencji Ai to 15-25 € za miesiąc.

3. Sketch

Alternatywa do grafiki wektorowej przygotowana przez Apple pod platformy iOS. Pliki przygotowane w tym programie mają rozszerzenie .sketch. Szeroko używany przez społeczność Designerów. Koszt komercyjnej licencji Sketcha to 99 USD płatne jednorazowo w tym rok bezpłatnych updatów.

4. Affinity

Rosnąca konkurencja dla pakietu Adobe i Sketcha. Posiada różne recenzje i wielu mówi, że to ubogi krewny wyżej wspomnianych programów jednak kiedy rozmawiałem niedawno z właścicielem jednej z wrocławskich firm zajmujących się tworzeniem gier komputerowych powiedział, że powoli się przesiadają na Affinity. Pewnie nie robią tego bez powodu… Program posiada wersję do grafiki klasycznej jak i wektorowej. Tworzy pliki o rozszerzeniu .af. Koszt komercyjnej licencji to 49 USD płatne jednorazowo.

Podsumowanie.

Dostępne są też darmowe programy do grafiki komputerowej jak np. Inkscape jednak komercyjne alternatywy oferują znacznie więcej.

Zanim zabierzesz się do programowania to zauważ i doceń pracę grafika bo bez niego software który tworzysz nie byłby tak atrakcyjny dla użytkownika 🙂 Web Design to naprawdę ciężka praca.

Jeśli chcesz obejrzeć projekty webowe znakomitych Designerów i jak to mniej więcej wygląda odwiedź np. Behance

Albo zobacz gotowe kreacje połączonych siły grafików i developerów. Codziennie wybierana jest najfajniejsza strona internetowa na Świecie. Naprawdę można się zainspirować. Niektóre są po prostu znakomite: http://www.cssdesignawards.com/