Design (z ang. plan, projekt) strony internetowej to po prostu graficzny projekt strony, czyli to co należy wykonać zanim otrzymamy gotowy do użytku szablon www. Tworzeniem designu najcześciej zajmuje się grafik komputerowy, nastepnie przekazuje go webmasterowi do pocięcia na szablon. Zatem droga tworzenia szablonu strony internetowej przebiega w dwóch etapach: design strony – nazywany layoutem (z ang. rozkład, plan) oraz obróbka layoutu na szablon. Oczywiście wcale nie muszą być one wykonywane przez dwie wyspecjalizowane osoby, najczęściej osoba tworząca strony internetowe posiada obydwie te umiejętności.

Do tworzenia graficznych projektów strony służą programy graficzne. Najcześciej używanym przez webmasterów z całego świata jest program marki Adobe, o nazwie Photoshop (wersje demonstracyjne do pobrania tutaj).
Razem z Photoshop-em instalowany jest także program ImageReady, dzięki któremu możemy pociąć naszego lay-a na mniejsze pliki (np. osobnym odcięciem będzie logo strony, główna część strony, oraz stopka strony) co jest wstępną czynnością drugiego etapu tworzenia szablonu. Lay tnie się w zależności od jego skomplikowania na około 30 – 40 cześci (choć liczba ta może być bardzo różna). Zanim zabierzemy się za „krojenie” projektu należy dokładnie przemyśleć wykonanie każdego cięcia, wiem to z własnego doświadczenia moje pierwsze projekty kroiłem nieraz po 3 razy przez to, że wcześniej nie poświęciłem kilku minut na przemyślenie projektu. Lay powinien być pocięty w taki sposób, aby można było w nim wstawić dowolną ilość tekstu, nie należy kierować się tylko i wyłącznie tekstem, który wpisaliśmy tworząc layout – jest to chyba najważniejsza czynność na jaką musimy zwrócić uwagę, gdyż pomijając ten aspekt szablon znacznie traci na wartości. Nie ma ściśle określonych zasad krojenia layoutów (dlatego początkowo może to sprawiać trudości), wymaga to pewnej wprawy, więc z pewnością pierwszy lay jaki potniemy, nie będzie skrojony prawidłowo, ale jest to całkiem normalne. Na początek proponuje spróbować pociąć lay wedłyg tej instrukcji. Z czasem wykonując kolejne projekty wpoimy sobie podstawowe zasady jak należy to wykonywać i z projektu na projekt będziemy otrzymywać coraz lepsze efekty.
Na layoutach zamieszczonych na tej stronie zapisane są odcięcia, lecz do ich odczytania potrzebujemy Photoshop-a w wersji CS2 (gdyż tej wersji aktualnie używam).

[yogi35dawid, 27.04.07r.]