Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: [1] 2 3  Wszystkie
DrukujPobierz PDF
Autor Wątek: Portal internetowy w GIMPie.  (Przeczytany 104723 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
ubivbehwbcvjh
Użytkownik

Reputacja: 14 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
Licencja: Copyright
Wiadomości: 1 182
Galeria Użytkownika

ubivbehwbcvjh


Zobacz profil
« : 29.08.2007, 15:26:24 »

Witam w moim nowym tutorialu, tym razem coś z działu webdesign, bo trzeba go rozwinąć Uśmiech 2. 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


[ 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


[ 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

-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


[ 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

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

-Oto mój efekt: click


[ 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


[ 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



[ 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

-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. Uśmiech 2


Pozdrawiam,

Lsr.


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

Opis: Tutorial na standardowy portal internetowy w GIMPie.
« Ostatnia zmiana: 06.06.2009, 11:33:11 wysłane przez Domaxi » Zapisane

lion
Gość
« Odpowiedz #1 : 29.09.2007, 15:24:14 »

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

http://www.gimpuj.info/gallery/3486_29_09_07_4_23_08.png
Zapisane
Jaczinto
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 20
Galeria Użytkownika


Freelance webdesigner


Zobacz profil WWW
« Odpowiedz #2 : 21.12.2007, 15:13:01 »

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

Apollo
Użytkownik

Reputacja: 5 Offline Offline

GIMP: 2.4
Licencja: Copyright
Wiadomości: 37
Galeria Użytkownika

Apollo


Zobacz profil
« Odpowiedz #3 : 20.01.2008, 20:28:11 »

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

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.4
Licencja: Copyright
Wiadomości: 4
Galeria Użytkownika

Sebastiannoo


Zobacz profil
« Odpowiedz #4 : 03.02.2008, 16:14:20 »

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

Apollo
Użytkownik

Reputacja: 5 Offline Offline

GIMP: 2.4
Licencja: Copyright
Wiadomości: 37
Galeria Użytkownika

Apollo


Zobacz profil
« Odpowiedz #5 : 04.02.2008, 15:40:15 »

tak. tylko zobacz ze to sama grafika ktos musi napisac szablon w (x)htmlu a dopiero potem mozna na theme przerobic
Zapisane
r3ggul
Gość
« Odpowiedz #6 : 11.04.2008, 17:22:49 »

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


Spoko tut
Zapisane
ubivbehwbcvjh
Użytkownik

Reputacja: 14 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
Licencja: Copyright
Wiadomości: 1 182
Galeria Użytkownika

ubivbehwbcvjh


Zobacz profil
« Odpowiedz #7 : 12.04.2008, 11:08:00 »

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.
Zapisane

r3ggul
Gość
« Odpowiedz #8 : 12.04.2008, 14:11:01 »

Tak beznadziejnie jest napisany ten tutek że w życiu sie tego nie da zrobić kolo

A ile już pracujesz w gimpie Piciu? Z 5 minut? Chichot
Właśnie ten tut jest bardzo prosty wszystko jest dobrze opisane
Zapisane
capeone
Użytkownik

Reputacja: 13 Offline Offline

GIMP: 2.2
Licencja: CC-NC-BY-SA
Wiadomości: 354
Galeria Użytkownika

capeone


Zobacz profil
« Odpowiedz #9 : 28.06.2008, 17:05:44 »

zrobiłem.

yy dobry tut, wszystko dobrze opisane.
dzięki Lsr ; d
Zapisane
maniek.a
Nowicjusz

Reputacja: 3 Offline Offline

Wiadomości: 12
Galeria Użytkownika

maniek.a


Zobacz profil
« Odpowiedz #10 : 30.06.2008, 14:50:56 »

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
Zapisane
Majderrek
Nowicjusz

Reputacja: 2 Offline Offline

GIMP: 2.6 + GAP
Licencja: Copyright
Wiadomości: 4
Galeria Użytkownika

Majderrek


Zobacz profil
« Odpowiedz #11 : 01.07.2008, 11:44:25 »

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

maniek.a
Nowicjusz

Reputacja: 3 Offline Offline

Wiadomości: 12
Galeria Użytkownika

maniek.a


Zobacz profil
« Odpowiedz #12 : 03.07.2008, 14:10:08 »

Sorka że po swoim postem  Mrugnięcie
Nie robiłem tych menu po bokach bo to czasochłonne.
Proszę o komentarze bo to 1 moja praca.
Zapisane
KoronerKing
Gość
« Odpowiedz #13 : 18.08.2008, 20:58:46 »

tutek, bardzo ładnie napisany i bardzo łatwy a oto mój efekt:
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=21485
Zapisane
Strony: [1] 2 3  Wszystkie
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialePropozycje i prośby o tutorialeTutoriale do poprawyWątek: Portal internetowy w GIMPie.
Skocz do: