{"id":2731,"date":"2010-03-27T16:32:02","date_gmt":"2010-03-27T15:32:02","guid":{"rendered":"https:\/\/www.blog.gdaq.pl\/?p=2731"},"modified":"2019-03-22T16:19:19","modified_gmt":"2019-03-22T14:19:19","slug":"projektowanie-grafiki-do-strony-internetowej-czyli-jak-zrobic-layout","status":"publish","type":"post","link":"https:\/\/gdaq.pl\/blog\/2010\/03\/projektowanie-grafiki-do-strony-internetowej-czyli-jak-zrobic-layout\/","title":{"rendered":"Projektowanie grafiki do strony internetowej, czyli jak zrobi\u0107 layout"},"content":{"rendered":"
\"projektowanie<\/a>Z sondy jak\u0105 umie\u015bci\u0142em kilka miesi\u0119cy temu na blogu  wynik\u0142o, \u017ce chcieliby\u015bcie zobaczy\u0107 tutorial jak stworzy\u0107 layout. Ostatnio mia\u0142em okazj\u0119 tworzy\u0107 layout do odsprzeda\u017cy do serwisu ThemeForest<\/a> i w trakcie jego tworzenia zrobi\u0142em kilka print screen\u00f3w, aby pokaza\u0107 Ci w jaki spos\u00f3b tworz\u0119 takie layouty. W razie czego \u015bwietn\u0105 alternatyw\u0105 b\u0119dzie bardzo znany TemplateMonster<\/a>.
\nW skr\u00f3cie postaram Ci opisa\u0107 jak stworzy\u0107 taki layout, a jak ju\u017c znajd\u0119 odpowiednie oprogramowanie do zgrywania obrazu video to postaram si\u0119 stworzy\u0107 video tutorial.
\n<\/strong><\/p>\n

1. Co to za projekt?<\/strong><\/p>\n

Pierwsze od czego zaczynam to zbieranie informacji o tematyce tworzonego layoutu, przegl\u0105dam strony konkurencji, cz\u0119sto te\u017c bior\u0119 pod uwag\u0119 NOA czego wynikiem jest zebranie element\u00f3w jakie powinny znale\u017a\u0107 si\u0119 na stronie g\u0142\u00f3wnej.
\n2. Szkic strony<\/strong><\/p>\n

Nast\u0119pnie wyci\u0105gam kilka kartek A4, bior\u0119 o\u0142\u00f3wek i tworz\u0119 kilka szkic\u00f3w projektu, uk\u0142adu strony, rozmieszczenia element\u00f3w. Zaznaczam, \u017ce szkice s\u0105 bardzo pogl\u0105dowe i nie trzeba mie\u0107 do tego wielkich zdolno\u015bci plastycznych.
\nPodczas robienia szkicu w g\u0142owie mniej wi\u0119cej ju\u017c widz\u0119 jak chc\u0119, aby projekt wygl\u0105da\u0142.<\/p>\n

Je\u015bli masz problem z wizj\u0105 strony to polecam Ci m\u00f3j poprzedni wpis pt.: “Sk\u0105d czerpa\u0107 inspiracje do projektowania stron<\/a>“<\/a><\/em><\/p>\n

3. Przeniesienie szkicu na komputer<\/strong><\/p>\n

Kolejnym krokiem jest wybranie jednego projektu i przerysowanie go do programu graficznego w odpowiedniej rozdzielczo\u015bci. Do szablonu przyj\u0105\u0142em rozdzielczo\u015b\u0107 ekranu 1024×768 (szeroko\u015b\u0107 strony 990px). Program w kt\u00f3rym projektowa\u0142em szablon to Macromedia Fireworks.<\/p>\n

\"projektowanie<\/a><\/p>\n

Wi\u0119cej informacji na temat projektowania makiet witryn znajdziesz we wpisie pt.: “Makieta witryny \u2013 pierwszy szkic strony”<\/em><\/a>.<\/p>\n

Jak wida\u0107 projekt jest bardzo prosty. Ka\u017cdy element ma ju\u017c swoj\u0105 sta\u0142a szeroko\u015b\u0107 oraz odpowiednie odst\u0119py, abym wiedzia\u0142 dok\u0142adnie jaki obszar mam do zagospodarowania tekstem i grafik\u0105.
\nPodzia\u0142 jest do\u015b\u0107 prosty, jasny i przejrzysty. Nag\u0142\u00f3wek strony zawiera logo oraz menu. Pod nim najciekawsze prace z portfolio opis + zdj\u0119cie. Dalej informacja o firmie, zakresie us\u0142ug, informacje kontaktowe oraz najnowsze informacje.<\/p>\n

4. Wype\u0142nienie tre\u015bci\u0105<\/strong><\/p>\n

Nast\u0119pnym krokiem jest umieszczenie przyk\u0142adowych tekst\u00f3w oraz nag\u0142\u00f3wk\u00f3w w projekcie. Je\u015bli jest taka mo\u017cliwo\u015b\u0107 to ju\u017c w projekcie graficznym zaleca si\u0119 umieszcza\u0107 docelowe materia\u0142y (informacje\/zdj\u0119cia). Je\u015bli nie dysponujesz tekstem tak jak ja w tym projekcie to proponuj\u0119 skorzystanie z jednego z generator\u00f3w on-line np.: www.lipsum.com<\/a><\/p>\n

W przypadku gdy wykorzystujemy do projektu zdj\u0119cia klienta, lub sami kupujemy je w serwisach typu istock musimy pami\u0119ta\u0107, aby bardzo dobrze wsp\u0142\u00f3gra\u0142y z projektem graficznym. Ze zdj\u0119cia g\u0142\u00f3wnego, kt\u00f3re wykorzystuj\u0119 do projektu graficznego bardzo cz\u0119sto pobieram kolorystyk\u0119 ca\u0142ej strony, aczkolwiek wi\u0119kszy priorytet tutaj ma dla mnie raczej kolorystyka loga klienta. Czyli najpierw logo, p\u00f3\u017aniej zdj\u0119cie, a na ko\u0144cu grafika strony.<\/p>\n

5. Wdra\u017camy nasz\u0105 wizj\u0119<\/strong><\/p>\n

Teraz nale\u017cy zacz\u0105\u0107 wdra\u017ca\u0107 swoj\u0105 wizj\u0119 graficzn\u0105 strony. Ja widzia\u0142em t\u0119 stron\u0119 w kolorystyce niebieskiej, delikatn\u0105 i eleganck\u0105. Poni\u017cej wida\u0107 prace w toku. Wprowadzi\u0142em menu i logo, mniej wi\u0119cej uk\u0142ad i wygl\u0105d pracy w portfolio te\u017c, a tak\u017ce nag\u0142\u00f3wki oraz tekst.<\/p>\n

\"\"<\/a><\/p>\n

Zapraszam do zapoznania si\u0119 z moim starszym wpisem pt.: “Jak dobra\u0107 kolorystyk\u0119 strony”<\/em><\/a><\/p>\n

6. Finalizacja projektu<\/strong><\/p>\n

W zwi\u0105zku z tym, \u017ce projektowanie grafiki poch\u0142ania mnie w pe\u0142ni, dalszych screen\u00f3w nie zrobi\u0142em i przedstawiam wynik ko\u0144cowy projektu.<\/p>\n

\"projektowanie<\/a><\/p>\n

Jak wida\u0107 nieznacznie zmieni\u0142 si\u0119 uk\u0142ad strony, na dole po lewej doda\u0142em 3 boxy z ikonami i kr\u00f3tk\u0105 informacj\u0105. Ca\u0142a strona te\u017c zosta\u0142a zaokr\u0105glona.<\/p>\n

Do nag\u0142\u00f3wka, portfolio i tre\u015bci doda\u0142em t\u0142o gradientowe. Ca\u0142a stron\u0119 tak\u017ce osadzi\u0142em na tle gradientowym dzi\u0119ki czemu niezale\u017cnie od rozdzielczo\u015bci nie mamy pustej jednokolorowej przestrzeni i projekt wygl\u0105da ciekawiej.<\/p>\n

Na tym poziomie prac nale\u017cy te\u017c pami\u0119ta\u0107 o dopasowaniu rodzaju czcionki, wielko\u015bci oraz koloru.<\/p>\n

7. Tworzenie podstron projektu<\/strong><\/p>\n

Po zaprojektowaniu strony g\u0142\u00f3wnej i podj\u0119ciu decyzji o ostatecznym jej wygl\u0105dzie mo\u017cna si\u0119 zabra\u0107 za zaprojektowanie kilku podstron. Dobrze jest przy okazji zadba\u0107 o wygl\u0105d list, nag\u0142\u00f3wk\u00f3w h1-h6, cytat\u00f3w czy p\u00f3l tekstowych w razie gdyby klient chcia\u0142 z takowych skorzysta\u0107.<\/p>\n

\"projektowanie<\/a><\/p>\n

\"projektowanie<\/a><\/p>\n

\"projektowanie<\/a><\/p>\n

Dla pocz\u0105tkuj\u0105cych dobra rada, aby nazywa\u0107 warstwy odpowiednio, tworzy\u0107 katalogi etc. wtedy \u0142atwiej b\u0119dzie wam cokolwiek zmienia\u0107 w projekcie.<\/p>\n

To by by\u0142o na tyle. Je\u015bli spodoba\u0142 Ci si\u0119 ten wpis napisz, a postaram si\u0119 za jaki\u015b czas zrobi\u0107 kolejny by\u0107 mo\u017ce video.<\/p>\n

Je\u015bli ten artyku\u0142 pom\u00f3g\u0142 Ci, masz co do niego jakie\u015b w\u0105tpliwo\u015bci lub pytania “Zostaw komentarz”, a na pewno na niego odpowiem.<\/h5>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Z sondy jak\u0105 umie\u015bci\u0142em kilka miesi\u0119cy temu na blogu  wynik\u0142o, \u017ce chcieliby\u015bcie zobaczy\u0107 tutorial jak stworzy\u0107 layout. Ostatnio mia\u0142em okazj\u0119 tworzy\u0107 layout do odsprzeda\u017cy do serwisu ThemeForest i w trakcie jego tworzenia zrobi\u0142em kilka print screen\u00f3w, aby pokaza\u0107 Ci w jaki spos\u00f3b tworz\u0119 takie layouty. W razie czego \u015bwietn\u0105 alternatyw\u0105 b\u0119dzie bardzo znany TemplateMonster. W […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[12],"tags":[],"class_list":["post-2731","post","type-post","status-publish","format-standard","hentry","category-webdesign"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t