Projektowanie grafiki do strony internetowej, czyli jak zrobi膰 layout

Z sondy jak膮 umie艣ci艂em kilka miesi臋cy temu na blogu  wynik艂o, 偶e chcieliby艣cie zobaczy膰 tutorial jak stworzy膰 layout. Ostatnio mia艂em okazj臋 tworzy膰 layout do odsprzeda偶y do serwisu ThemeForest i w trakcie jego tworzenia zrobi艂em kilka print screen贸w, aby pokaza膰 Ci w jaki spos贸b tworz臋 takie layouty. W razie czego 艣wietn膮 alternatyw膮 b臋dzie bardzo znany TemplateMonster.
W skr贸cie postaram Ci opisa膰 jak stworzy膰 taki layout, a jak ju偶 znajd臋 odpowiednie oprogramowanie do zgrywania obrazu video to postaram si臋 stworzy膰 video tutorial.

1. Co to za projekt?

Pierwsze od czego zaczynam to zbieranie informacji o tematyce tworzonego layoutu, przegl膮dam strony konkurencji, cz臋sto te偶 bior臋 pod uwag臋 NOA czego wynikiem jest zebranie element贸w jakie powinny znale藕膰 si臋 na stronie g艂贸wnej.
2. Szkic strony

Nast臋pnie wyci膮gam kilka kartek A4, bior臋 o艂贸wek i tworz臋 kilka szkic贸w projektu, uk艂adu strony, rozmieszczenia element贸w. Zaznaczam, 偶e szkice s膮 bardzo pogl膮dowe i nie trzeba mie膰 do tego wielkich zdolno艣ci plastycznych.
Podczas robienia szkicu w g艂owie mniej wi臋cej ju偶 widz臋 jak chc臋, aby projekt wygl膮da艂.

Je艣li masz problem z wizj膮 strony to polecam Ci m贸j poprzedni wpis pt.: „Sk膮d czerpa膰 inspiracje do projektowania stron

3. Przeniesienie szkicu na komputer

Kolejnym krokiem jest wybranie jednego projektu i przerysowanie go do programu graficznego w odpowiedniej rozdzielczo艣ci. Do szablonu przyj膮艂em rozdzielczo艣膰 ekranu 1024×768 (szeroko艣膰 strony 990px). Program w kt贸rym projektowa艂em szablon to Macromedia Fireworks.

projektowanie stron www grafika tutorial

Wi臋cej informacji na temat projektowania makiet witryn znajdziesz we wpisie pt.: „Makieta witryny 鈥 pierwszy szkic strony”.

Jak wida膰 projekt jest bardzo prosty. Ka偶dy element ma ju偶 swoj膮 sta艂a szeroko艣膰 oraz odpowiednie odst臋py, abym wiedzia艂 dok艂adnie jaki obszar mam do zagospodarowania tekstem i grafik膮.
Podzia艂 jest do艣膰 prosty, jasny i przejrzysty. Nag艂贸wek strony zawiera logo oraz menu. Pod nim najciekawsze prace z portfolio opis + zdj臋cie. Dalej informacja o firmie, zakresie us艂ug, informacje kontaktowe oraz najnowsze informacje.

4. Wype艂nienie tre艣ci膮

Nast臋pnym krokiem jest umieszczenie przyk艂adowych tekst贸w oraz nag艂贸wk贸w w projekcie. Je艣li jest taka mo偶liwo艣膰 to ju偶 w projekcie graficznym zaleca si臋 umieszcza膰 docelowe materia艂y (informacje/zdj臋cia). Je艣li nie dysponujesz tekstem tak jak ja w tym projekcie to proponuj臋 skorzystanie z jednego z generator贸w on-line np.: www.lipsum.com

W przypadku gdy wykorzystujemy do projektu zdj臋cia klienta, lub sami kupujemy je w serwisach typu istock musimy pami臋ta膰, aby bardzo dobrze wsp艂贸gra艂y z projektem graficznym. Ze zdj臋cia g艂贸wnego, kt贸re wykorzystuj臋 do projektu graficznego bardzo cz臋sto pobieram kolorystyk臋 ca艂ej strony, aczkolwiek wi臋kszy priorytet tutaj ma dla mnie raczej kolorystyka loga klienta. Czyli najpierw logo, p贸藕niej zdj臋cie, a na ko艅cu grafika strony.

5. Wdra偶amy nasz膮 wizj臋

Teraz nale偶y zacz膮膰 wdra偶a膰 swoj膮 wizj臋 graficzn膮 strony. Ja widzia艂em t臋 stron臋 w kolorystyce niebieskiej, delikatn膮 i eleganck膮. Poni偶ej wida膰 prace w toku. Wprowadzi艂em menu i logo, mniej wi臋cej uk艂ad i wygl膮d pracy w portfolio te偶, a tak偶e nag艂贸wki oraz tekst.

Zapraszam do zapoznania si臋 z moim starszym wpisem pt.: „Jak dobra膰 kolorystyk臋 strony”

6. Finalizacja projektu

W zwi膮zku z tym, 偶e projektowanie grafiki poch艂ania mnie w pe艂ni, dalszych screen贸w nie zrobi艂em i przedstawiam wynik ko艅cowy projektu.

projektowanie grafiki do stron www

Jak wida膰 nieznacznie zmieni艂 si臋 uk艂ad strony, na dole po lewej doda艂em 3 boxy z ikonami i kr贸tk膮 informacj膮. Ca艂a strona te偶 zosta艂a zaokr膮glona.

Do nag艂贸wka, portfolio i tre艣ci doda艂em t艂o gradientowe. Ca艂a stron臋 tak偶e osadzi艂em na tle gradientowym dzi臋ki czemu niezale偶nie od rozdzielczo艣ci nie mamy pustej jednokolorowej przestrzeni i projekt wygl膮da ciekawiej.

Na tym poziomie prac nale偶y te偶 pami臋ta膰 o dopasowaniu rodzaju czcionki, wielko艣ci oraz koloru.

7. Tworzenie podstron projektu

Po zaprojektowaniu strony g艂贸wnej i podj臋ciu decyzji o ostatecznym jej wygl膮dzie mo偶na si臋 zabra膰 za zaprojektowanie kilku podstron. Dobrze jest przy okazji zadba膰 o wygl膮d list, nag艂贸wk贸w h1-h6, cytat贸w czy p贸l tekstowych w razie gdyby klient chcia艂 z takowych skorzysta膰.

projektowanie grafiki do stron www

projektowanie grafiki do stron www

projektowanie grafiki do stron www

Dla pocz膮tkuj膮cych dobra rada, aby nazywa膰 warstwy odpowiednio, tworzy膰 katalogi etc. wtedy 艂atwiej b臋dzie wam cokolwiek zmienia膰 w projekcie.

To by by艂o na tyle. Je艣li spodoba艂 Ci si臋 ten wpis napisz, a postaram si臋 za jaki艣 czas zrobi膰 kolejny by膰 mo偶e video.

Je艣li ten artyku艂 pom贸g艂 Ci, masz co do niego jakie艣 w膮tpliwo艣ci lub pytania „Zostaw komentarz”, a na pewno na niego odpowiem.
VN:F [1.9.22_1171]
Rating: 4.6/5 (46 votes cast)
Projektowanie grafiki do strony internetowej, czyli jak zrobi膰 layout, 4.6 out of 5 based on 46 ratings

o autorze

Slawomir Gdak

Od 2009 prowadzi owego seo bloga i dzieli si臋 swoj膮 wiedz膮 z zakresu seo.

Autor publikacji/produkt贸w z zakresu seo m.in.: znanych list katalog贸w i profili, ebook贸w, szkole艅, artyku艂贸w w miesi臋czniku SEMspecialist.
Go艣cinnie trener w Mie艣cie Szkole艅 oraz na Search Marketing Week.

19 komentarzy

napisz komentarz
  • Mi si臋 osobi艣cie art spodoba艂. Chyba przedstawi艂e艣 IMO lepszy spos贸b projektowania strony – Zaczynaj膮c od tre艣ci. Sam chyba przy najbli偶szym projekcie postaram si臋 tak w艂a艣nie zrobi膰. M贸g艂by艣 zrobi膰 nast臋pny z KOLEJNYMI sugestiami.

  • Hey. Super artyku艂, wielkie dzi臋ki 馃槈 Fajnie gdyby艣 stworzy艂 jaki艣 artyku艂 po艣wi臋cony projektowanie sklepu internetowego , graficznie. Jestem programist膮 i chcia艂bym si臋 nauczy膰 jak 艂atwiej rozwi膮zywa膰 problemy z przygotowaniem layoutu dla takich aplikacji. Z g贸ry dzi臋ki i prosz臋 o odzew, pozdro 馃檪

  • Tak naprawd臋 to zasada jest ta sama tyle, 偶e przy sklepach raczej nie robi si臋 fajerwerk贸w 馃檪 w przysz艂o艣ci z pewno艣ci膮 kolejne przyk艂ady b臋d臋 umieszcza艂.

  • Stworzy艂em powy偶szy layout i zrobi艂em bardzo du偶y b艂膮d bo przes艂a艂em pdf html skrypty full szablon. Powiedzieli, 偶e jest za cienki graficznie. Poza mn膮 pracowa艂 przy tym programista „skrypciarz” ponios艂em koszty.

    Gdybym wys艂a艂 od razu plik PSD nie poni贸s艂bym tych koszt贸w.
    My艣l臋 o robieniu szablon贸w dla theme forest jednak w razie jakby projektu nie wzi臋li my艣la艂em, 偶eby stworzy膰 w艂asn膮 stron臋, 偶eby u siebie to sprzedawa膰. Na razie niestety nic tam mojego nie ma.

  • No tak.. lepiej najpierw psd przey艂a膰, jak zaakceptuj膮 to ewentualnie sie pokusic o wersje html, widzialem ze tak niekt贸rzy robi膮..

    Jak co艣 zaakceptuj膮 to daj zna膰 na blogu. My艣le 偶e mo偶e to by膰 ciekawy wpis, przynajmniej dla tych kt贸rzy planuj膮 jakie艣 projekty na TH.

    • Najcz臋艣ciej Fireworks bo na niego mam licencj臋 i pracuje si臋 z nim bardzo wygodnie. Do bardziej zaawansowanych graficznie projektów polecam PS.

  • Bardzo fajnie opisa艂e艣 ca艂y proces tworzenia grafiki. Aczkolwiek du偶o osób obecnie woli u偶ywa膰 jednego zdj臋cia jako t艂a. Co s膮dzisz o takim pomy艣le?

    • Wygl膮da to 艣wietnie i o ile nie wa偶y zbyt wiele, albo jest wersja mobile to nie widz臋 problemu.

  • Ja do tworzenia layoutu u偶ywam Artisteera. Wygodnie i szybko mog臋 stworzy膰 gotowy szablon (na przyk艂ad do WordPressa czy Joomla) – mo偶e od strony technicznej nie s膮 to szablony wysokich lotów, ale s膮 zrobione szybko 馃檪

    • Ma膰ku lata temu naby艂em licencj臋 na FireWorks jeszcze Macromedii i nadal z niego korzystam 馃檪

      艢miem twierdzi膰, 偶e FireWorks do www jest wygodniejszy ni偶 Phostop.

  • 艢wietny post na temat grafiki komputerowej, Ja dopiero zaczynam je偶eli chodzi o pomys艂y graficzne na stron臋. Czytam sporo tego typu artyku艂贸w. Podczas chodzenia po internecie zetkn膮艂em si臋 z bardzo profesjonaln膮 firm膮 projektuj膮c膮 strony internetowe – Hokito. To mnie bardzo du偶o uczy kiedy chodz臋 sobie po stronach os贸b, kt贸re tworz膮 layouty. Potem staram si臋 stworzy膰 co艣 podobnego. Po takich inspiracja i pr贸bach stworzenia strony b臋d臋 m贸g艂 zaprojektowa膰 co艣 swojego, bo g艂ow臋 mam pe艂n膮 pomys艂贸w, ale potrzebuj臋 jeszcze odpowiedniego kierunku.

  • Jak wchodz臋 na r贸偶ne strony to niekt贸re strony to s膮 zdecydowanie przesadzone, a偶 skomplikowane w obs艂udze i wcale nie zach臋caj膮 do pozostania d艂u偶ej.

Tw贸j adres email nie zostanie opublikowany. Pola, kt贸rych wype艂nienie jest wymagane, s膮 oznaczone symbolem *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Wyra偶am zgod臋 na przetwarzanie danych osobowych przez firm臋 GDAQ.PL Multimedia S艂awomir Gdak. Zgoda mo偶e zosta膰 anulowana w dowolnym momencie. Szczeg贸艂owe informacje dotycz膮ce danych osobowych s膮 umieszczone na stronie polityki prywatno艣ci.

Wszelkie prawa zastrze偶one. Zabrania si臋 wykorzystywania jakichkolwiek tre艣ci bez zgody autora.

S艂awek Gdak Specjalista ds. seo
Je艣li potrzebujesz mojej pomocy, masz jakiekolwiek pytanie wype艂nij poni偶szy formularz.

Wyra偶am zgod臋 na przetwarzanie danych osobowych przez firm臋 GDAQ.PL Multimedia S艂awomir Gdak. Zgoda mo偶e zosta膰 anulowana w dowolnym momencie. Szczeg贸艂owe informacje dotycz膮ce danych osobowych s膮 umieszczone na stronie <a href="https://gdaq.pl/polityka-prywatnosci/" target="_blank">polityki prywatno艣ci</a>.