Polskie Forum Użytkowników GIMP-a

Witam w moim nowym tutorialu, tym razem coś z działu webdesign, bo trzeba go rozwinąć ^^. Jest to tut na portal internetowy, są w nim opisane podstawy, więc naprawdę radzę dodawać coś od siebie do stron. Tematyka jaką wybrałem to EURO 2012, Wy możecie oczywiście wymyślić inny temat. Zacznijmy.

_______________


[ I ] Początek i tło


Zaczynamy od wymyślenia tematu oraz kolorystyki naszej przyszłej strony. Ja wybrałem EURO 2012, więc i kolory będą w tym stylu, czyli zieleń i dodatki o różnej kolorystyce.

1. Pierwszą rzeczą jaką robimy jest otworzenie nowego dokumentu. U mnie są to wymiary 1000x1400. Najczęściej portale są dość wysokie, choć nie zawsze.

2. Następnie musimy zrobić tło. Ja pomyślałem o piłeczkach na miękkie światło, dodałem też deseń na krycie 20. Wygląda to tak: click (http://www.gimpuj.info/replacement.png)


[ II ] Top


1. Robimy top. Nie powinien być zbyt wysoki.

-Ja zrobiłem lekki, zielony gradient.

-Potem dodałem pattern "warning".

-Później przeciągnąłem dwuliniowy gradient od białego do przezroczystości, oczywiście na nowej warstwie. Tryb warstwy ustawiłem na pokrywanie, krycie na 40.  

-Następnie dodałem logotyp (po lewej stronie), czyli napis (EURO 2012). Czcionka to Tahoma Bold.

-Zduplikowałem warstwę z napisem. Wybrałem opcję Kanał alfa na zaznaczenie. Zmieniłem kolor napisu na żółty. Warstwę tę przesunąłem pod warstwę z właściwym napisem. Wybrałem opcję Rozmycie Gaussa z ustawieniem na 8.

-Dodałem podtytuł (Poland & Ukraine) już bez zbędnych bajerów.

-Następnie wkleiłem na sam szczyt kolorowy pasek, symbol mistrzostw z reklam.

-Później zrobiłem gradientem dwuliniowym z białego do przezroczystości paseczek oddzielający logotyp od informacji co to za strona. Paseczek zduplikowałem, bo 2 takie wyglądają ładnie w połączeniu ze sobą.

-Dodałem po drugiej stronie paseczków napis "serwis informacyjny".

-Po prawej stronie topa jest miejsce na wyszukiwarkę. Najpierw czcionką Tahoma 12 pt napisałem "wyszukiwarka".

-Następnie należy zrobić okienko na wpisanie tekstu. Robimy nieduży podłużny prostokąt, u mnie wymiary 123x20.

-Wypełniamy go gradientem z białego do przezroczystości. Warstwa na pokrywanie krycie 100.

-Robimy ramkę 1px, najlepiej czarną.

-Dodajemy napis "szukana fraza". U mnie Tahoma 10 pt.

-Tym samym sposobem robimy button "szukaj", tyle że mniejszy.

-Dodałem jeszcze napis "zaawansowane" oraz znany nam już gradientowy oddzielnik, tym razem czarny między miejscem na szukaną frazę, a buttonem "szukaj".

-Proponuję jeszcze dodać coś w środku topa, coś spełniającego rolę "loga". Ja dodałem znanych piłkarzy.

Efekt: click (http://www.gimpuj.info/replacement.png)


[ III ] Menu


1. Przyszedł czas na menu.

-Najpierw robimy paseczek o wysokości 12 px, szerokość na całą stronę.

-Wypełniamy go gradientem dwuliniowym, ja mam od zielonego do przezroczystości, dobrze aby pasował ten kolor do naszej strony.

-Tryb warstwy ustawiamy na Twarde Światło, krycie wg uznania. Możemy też ewentualnie pobawić się jasnością tego paska.

-Teraz robimy właściwe menu. Musi wychodzić tak jakby z paska, który zrobiliśmy przed chwilą.

-Najpierw wyśrodkowany prostokąt. Szerokość ok. 500, w zależności od potrzeb, wysokość 40-50 px.

-Wchodzimy w zaznaczenie>zaokrąglenie i ustawiamy na 30%.

-Wypełniamy prostokąt jakimś pastelowym, ładnym kolorem, najlepiej jak pasuje do naszego topa.

-Uzupełniamy braki tak, aby zaokrąglone były tylko dolne rogi.

-Wybieramy "kanał alfa na zaznaczenie".

-Robimy nową warstwę.

-Gradient dwuliniowy, tak jak to było robione na początku w topie.

-Ustawiamy tryb warstwy na pokrywanie.

-Teraz na nowej warstwie kolejny paseczek, wysokość o połowę mniejsza od tego 12 px.

-Wypełniamy go trochę ciemniejszym odcieniem koloru menu, u mnie jest to zielony.

-Teraz musimy sobie zaplanować jak podzielić prostokąt menu. Ja mam szerokość 500 px, więc zrobię 5 buttonów po 100 px.

-Robimy znane nam z topa gradientowe cienkie kreski co 100 px, u mnie są białe.

-Następnie wstawiamy tekst, wyśrodkowany, między kreski. U mnie Tahoma Bold 10 pt, wielkie litery.

-Pamiętacie tą zieloną 6px kreskę na szerokość strony? Wreszcie się przyda. Ścieżkami robimy małą strzałeczkę, dobrze kontrastującą z kolorem menu, u mnie pomarańcz.

-Na koniec robimy cień z ustawieniami 0/1/1/czarny/20-50. Ja zrobiłem ten cień na menu, można też zrobić na innych elementach, ale nie przesadzajcie.

-Oto efekt: click (http://www.gimpuj.info/replacement.png)

-Górę mamy jako tako zrobioną, więc czas na...


[ IV ] Poprawki kosmetyczne topa i menu

1. Tutaj nie mam za bardzo co pisać. Dodajemy coś jak czegoś brakuje, usuwamy, zmieniamy kolory, wszystko wedle uznania, tak żeby kompozycja była jak najlepsza. Mój efekt po poprawkach

-Ja dodałem cień na tych kolorowych flagach u góry.

-Wkleiłem piłkę za Beckhamem.

-Wyszło w efekcie tak: click (http://www.gimpuj.info/replacement.png)


[ V ] Zagospodarowanie boków laya

1. Przyszedł czas na zagospodarowanie przestrzeni bocznej. Mogą się tam znaleźć najprzeróżniejsze informacje, w moim przypadku poczynając od rozkładu grup, kończąc na wyglądzie oficjalnej piłki i reklamach.

-Zaczniemy od zrobienia tła, na którym znajdą się nagłówki i informacje.

-Ja po prostu zrobiłem jeden długi prostokąt i wypełniłem kolorem pasującym do reszty, czyli...białym. Szerokość zrobiłem ok. 200 px.

-Nagłówki zrobię o wysokości 45 px, na tej samej zasadzie co top.

-Do nagłówka dodałem jeszcze coś co kojarzy się z tematyką strony, czyli piłkę.

-Napis podświetliłem tak samo jak logotyp.

-Wygląd nagłówka po tych operacjach: click (http://www.gimpuj.info/replacement.png)

-Dodajemy tekst oraz robimy nagłówki z inną zawartością.

-Oto mój efekt: click (http://www.gimpuj.info/replacement.png)


[ VI ] Miejsce na artykuły


1. Teraz jedna z ważniejszych części, czyli zrobienie ładnego boxa pod artykuły.

-Najpierw zrobimy tło boxa.

-Ustalamy wymiary.

-Robimy jednolite tło, ja zrobiłem takie jak w panelach bocznych.

-Pamiętajcie, aby wszystko było zrobione w miarę równo.

-Teraz zrobimy nagłówek  napisem "Artykuły". Ja zrobię go na tej samej zasadzie co nagłówki w panelach bocznych, tyle że tym razem bez piłki

-Następnie musimy zrobić tekst, tu dużej filozofii nie ma, po prostu wpisujemy ładnie jakiś przykładowy. Może być jeden długi artykuł, kilka mniejszych.

-Mój efekt: click (http://www.gimpuj.info/replacement.png)


[ VII ] Stopka


1. Ostatnim elementem będzie stopka.

-Stopka fajnie jak jest podobna stylem do topa, więc ja zrobię taki pomniejszony top.

-Oczywiście w stopce nie wstawiamy renderów takich jak w topie, logotypa i wyszukiwarki.

-Do stopki możecie też wstawić reklamy, długi banner.

-Obowiązkowo umieśćcie tam coś w stylu: "xxx design 2007 All Rights Reserved Copyright xxx"

-Oto mój efekt: click (http://www.gimpuj.info/replacement.png)



[ VIII ] Ostatnie poprawki


1. Ostatnie poprawki kosmetyczne są bardzo ważną rzeczą. Po prostu spoglądamy na laya i oceniamy czego brakuje, co usunąć. Kierujemy się przy tym gustem.

Oto mój efekt po poprawkach: click (http://www.gimpuj.info/replacement.png)

-Dodałem kolorowe paseczki, takie jak w topie do nagłówków i stopki.

-Zrobiłem cienie pod panelami bocznymi.



_______


Mam nadzieję, że tut się podobał, wybaczcie, że nie dawałem screenów na bieżąco, ale sądzę, że da się wszystko wywnioskować, bo po każdym dziale pokazywałem efekt. ^^


Pozdrawiam,

Lsr.


ikonka: http://www.gimpuj.info/replacement.png

Opis: Tutorial na standardowy portal internetowy w GIMPie.

Uff, po tygodniowej walce z GIMPem powstał :) Wprowadziłem drobne inności, żeby lepiej wyglądało.

http://www.gimpuj.info/gallery/3486_29_09_07_4_23_08.png

A jak jest z kodowaniem tego portalu żeby działała ta wyszukiwarka i newsy można było pisać ? <smutny>

w gimpie robisz projekt kodowanie musisz sam napisać, potem wycinasz male elementy i piszesz kod xhmtl,css, php itp.

Czy jest możliwość podpięcia tego do php-fusion?? zeby mozna było z tego themes zrobić

tak. tylko zobacz ze to sama grafika ktos musi napisac szablon w (x)htmlu a dopiero potem mozna na theme przerobic

Z tego co wiem (może się mylę) da się ustawić kordynanty na obrazie i nie trzeba nic ciać :P


Spoko tut

Wiesz, ja z tym problemów nie mam, nawet jestem w stanie zgodzić się z Twoją opinią. Ale widzisz, mi najwyżej zabiorą punkt reputacji, na których i tak nikomu nie zależy, oraz wykasują tego tuta, z którego nie korzystam, natomiast Ty masz o wiele większy kłopot, na który może zadziałać jedynie melisa z pomarańczą. Smaku nie ma, kolor ma jak siki, czyli bardzo możliwe, że będzie Ci pasowało. Za to jaki wewnętrzny spokój po niej poczujesz. Polecam.

A ile już pracujesz w gimpie Piciu? Z 5 minut? :D
Właśnie ten tut jest bardzo prosty wszystko jest dobrze opisane

zrobiłem.
(http://www.gimpuj.info/gallery/thumb_3143_28_06_08_5_57_55.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=18497)
yy dobry tut, wszystko dobrze opisane.
dzięki Lsr ; d

Mógłby mi ktoś wytłumaczyć jak nałożyć patern na obraz, bo mi nakłada żółto-czarny. Proszę o coś dokładniejsze

nakladasz to warning, naciskasz shift + o i zaznaczasz zolty, potem nacisnij 'delete'

Sorka że po swoim postem  ;)
(http://www.gimpuj.info/gallery/thumb_970_03_07_08_3_08_40.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=18803) Nie robiłem tych menu po bokach bo to czasochłonne.
Proszę o komentarze bo to 1 moja praca.

tutek, bardzo ładnie napisany i bardzo łatwy a oto mój efekt:
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=21485 (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=21485)

Wreszcie dobrnąłem do końca.  :) Poznałem parę nowych efektów dzięki niemu (od trzech dni siedzę w GIMPie).
Moja praca.

http://www.gimpuj.info/gallery/17706_23_11_08_8_28_12.png

Co o tym sądzicie ?  <aniolek>

Witam

A czy ktoś mi powie jak najszybciej i w najlepszy sposób "pokroić" gotowy projekt na mniejsze kawałki?

Pozdrawiam

Zaznaczenie. Wycinasz, robisz nowy obrazek o takich samych wymiarach jak wycięty, wklejasz i zapisujesz. Np. obrazek2.gif i kodujesz.

Tak to potrafię :) Myślałem o jakimś "bardziej" profesjonalnym sposobie... Pytam, bo mając na stronie wiele przycisków i w ogóle elementów, ich prawidłowe wycięcie robi się skomplikowane i mozolne.

czy ktoś tu w ogóle zagląda?

Poustawiaj sobie prowadnice tak, żebyś miał podzielony obraz na kawałki, które Cię interesują. Potem menu: Obraz>Przekształcenie>Gilotynowanie. 

I masz rację!
Zajrzyj do działu Propozycje i Prośby o Tutoriale -> Gotowe Tutoriale -> Zastosowanie opcji Image Map.

Wielkie dzięki dla Joten8 :) Przetestowałem to i działa bez zarzutu :)
Jeszce raz dziękuje...

hmmmmm a o to i moj maly projekt... 3h spedzone przed kompem... efekt... ;]

http://www.gimpuj.info/index.php?action=gallery;sa=myimages;u=21731

Na podstawie tego tutorialu zrobiłem stronę www. oto ona (nie wysyłam tego w formie reklamy tylko w formie pokazania efektu mojej pracy zreszta i tak wątpie żeby ktoś z tego forum interesował się taką tematyką). http://www.szklaochronne.pl

Jeśli administrator lub moderator mają jakieś zastrzeżenia proszę o usunięcie posta.

Tutaj jest napisane jak ciąć layout'y http://webmark.shost.pl/?p=69

1. Robimy top. Nie powinien być zbyt wysoki.

-Ja zrobiłem lekki, zielony gradient.

-Potem dodałem pattern "warning".
--------------------------------------
Jak ja tego nie moge zrozumiec jak on to zrobil? co to jes ten caly top jak to dokladnie wykonac.. co to jest ten pattern .. pomoze ktos? jakos to jasniej wytlumaczyc?

Co do ciecia laya -> nie byloby prosciej robic kazdego elementu w nowej warstwie a potem tylko zaznaczyc tlo warstwy, odwrocic zaznaczenie, wyciac element i zapisac w nowym pliku?

[edit]
moje wypociny - http://www.gimpuj.info/index.php?action=gallery;sa=view;id=46983

Moje wypociny :D

Proszę o ocenę i komentarze xd.

http://www.gimpuj.info/index.php?action=gallery;sa=view;id=50549 (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=50549)

Mnie sie nie podoba ciezko z tym cos tutkiem cos zrobic.;/ np dodalem pattern warning ale gdzie dodales .. nowa warstwa czy cos i gdzie gradient uzyles i gdzie ten gradient jest wogole;/

A to mój efekt zrobiłem inaczej ale tut pomogl
(http://www.gimpuj.info/gallery/16613_09_02_10_11_31_16.jpg)
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=58631 (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=58631)
jak oceniacie?

Robię stronkę o Harrym Potterze. Jestem przy nagłówkach w panelach bocznych i nie wiem jaki przedmiot wstawić. Coś charakterystycznego dla Harry'ego albo magii. Może wy na coś wpadniecie. Proszę o pomoc. :'(

Zrób tiarę przydziału. ;)

Świetny pomysł. Wykorzystam.  ;)
Mam jeszcze jeden problem: jak dodać pattern warring?

nie musisz kodować ściągnij program nvu wrzuć tam całą grafikę dodaj hiper łącza i gotowe