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 ... 9
DrukujPobierz PDF
Autor Wątek: Tworzymy stronę w gimpie  (Przeczytany 243790 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
michalsrodek
Nowicjusz

Reputacja: 3 Offline Offline

Płeć: Mężczyzna
JID: michalsrodek@jabber.org
Wiadomości: 3
Galeria Użytkownika



Zobacz profil WWW
« : 21.08.2007, 11:40:02 »

W dzisiejszym tutorialu postaram się przedstawić kilka moich technik, których używam do tworzenia ładnych, pastelowych stron www. Mam nadzieję, że osoby czytające ten artykuł mają jakiekolwiek obeznanie w opcjach GIMP-a i wiedzą co to są warstwy, maski itp.  Tak więc do dzieła!  Rozpocznijmy od stworzenia nowego pliku o wymiarach 1200x1500 z białym tłem.


        Zawsze można użyć innych wymiarów. Ja zazwyczaj wszystko robię "na oko"  i dopiero podczas  cięcia grafiki na potrzeby kodu html odmierzam równe wymiary. Przy szerokości 1200px mamy pewność, że każdy z elementów znajdzie wystarczająco dużo dla siebie miejsca.  Zawsze podczas projektowania nigdy do końca nie wiem co chcę osiągnąć – bardzo często po prostu eksperymentuje dopóki nie uzyskam ciekawego efektu. Niezbędna jest jednak świadomość barw i tego w jakim klimacie chcemy dany szablon wykonać. Wybrałem 4 podstawowe kolory, z których będę wydobywał barwy ciemniejsze i jaśniejsze.

   Tak więc strona będzie biało – bordowa z niebieskimi nagłówkami i pomarańczowymi detalami.

Rozpocznijmy od zaznaczenia prostokątnego(klawisz R) na nowo utworzonej warstwie w górnej części dokumentu. Wybierz dwa kolory: jako pierwszoplanowy nasz bordo #92002e, jako drugoplanowy jego ciemniejszy odcień. Użyj gradientu(klawisz L) na zaznaczeniu aby uzyskać efekt płynnego przejścia z jaśniejszego koloru u góry do ciemniejszego u dołu.

   
   Teraz użyj narzędzia tekstu(klawisz T) i wpisz tytuł swojej strony. Dodaj kilka kółek, które będą budować nasze logo. Dodaj nową warstwę. Wybierz zaznaczenie eliptyczne(klawisz E) i trzymając klawisz  Shift zaznacz okrąg. Wybierz narzędzie wypełniania(Shift + B) i wypełnij okrąg białym kolorem. Powtórz czynność jeszcze dwukrotnie na tej samej warstwie. dopierając inne rozmiary kółek.

<br/>
       Teraz zaznacz duży okrąg tak aby nachodził na każde z małych kółeczek a następnie wytnij jego zawartość(Ctrl + X).



       Dodaj napisy które użyją jako menu główne.



       Teraz stworzymy efekt świetlistej łuny, płynnego przejścia – nie wiem jak to nazwać. Najpierw zduplikuj warstwę zawierającą bordowe tło.


       Zaznacz dolną warstwę i wybierz Filtry -> Rozmycie -> Rozmycie Gaussa. Ustaw promienie na 5px i kliknij ok.


   Powinna powstać ładnie wyglądająca łuna na przejściu pomiędzy kolorem bordowym a białym. Powtórz czynność dla warstwy zawierającej logo. Modne są ostatnio zakładki, tak więc stwórzmy jedną aby pokazać pewną ciekawą technikę. Dodaj nową warstwę. Zaznacz(klawisz R) obszar wokół napisu „Strona główna” a następnie wybierz Zaznaczenie -> Zaokrąglenie i ustaw promień na około 25px(tutaj trzeba czasami lekko eksperymentować).

Teraz wybierz narzędzie gradient ustawiając kolor pierwszoplanowy na biały. Jako rodzaj gradientu zaznacz „Kolor pierwszoplanowy na przezroczystość”.

       Wypełnij zaznaczenie gradientem tak aby biały kolor był w jego górnej części.

Teraz ustaw krycie warstwy na około 25%.

      Również ten element możemy skopiować i dodać rozmycie Gaussa. Oczywiście będziemy musieli wyczyścić dolną warstwę i pozostawić jedynie obramowanie ponieważ górna warstwa ma ustawioną przezroczystość i efekt nie byłby za ciekawy(powstałaby przezroczystość 50%). Spróbujmy dodać jakieś dodatkowe pole po prawej stronie. Dodaj nową warstwę i wybierz zaznaczenie prostokątne. Zaznacz fragment i zaokrąglij krawędzie. Uzupełnij zaznaczenie w górnej części za pomocą zaznaczenia prostokątnego(klawisz R) trzymając przy tym klawisz Shift. Wypełnij Powstały kształt białym kolorem.
 

   Skopiuj warstwę i dodaj rozmycie Gaussa. Dodaj jakieś napisy i elementy dekoracyjne obok linków(kropki, prostokąty, strzałki).
 
  Stwórz nową warstwę i narysuj na niej menu boczne.
 
  Dodaj przykładowy artykuł.

      Czas na Stopkę. Dodaj nową warstwę. Zaznacz duży obszar w dolnej części strony i zamaluj go gradientem od jasnego bordo do jego ciemnego odcienia. Następnie nieodznaczając zaznaczenia dodaj nową warstwę,  wybierz narzędzie „Wypełnianie kolorem” i jako Typ wybierz deseń „Warning!” (lub inny stworzony przez siebie). Następnie odznacz wszystko. Postaraj się zaznaczyć wszystkie żółte linie, a gdy to zrobisz usuń je.

       Gdy pozostanie ci warstwa tylko z czarnymi liniami zmniejsz lekko jej krycie i dodaj do niej maskę „czarna(pełna przezroczystość)”.

       Teraz wybierz gradient biało czarny i zamaluj maskę tak aby linie zanikały w dolnej części strony. Pozostaje nam już tylko dodać trochę napisów i stopka jest gotowa. Dla lepszego efektu możesz standardowo skopiować warstwę stopki i dodać efekt Gaussa co spowoduje dodanie ładnej poświaty(i zwiększy nasycenie koloru jeśli tak jak ja zmieniłeś wsześniej krycie stopki).

   Teraz wystarczy dodać kilka grafik i dodatkowych napisów. Świetnie do tego celu nadają się ikonki Tulliana 2.0(licencja LGPL) dostępne na kde-look.org.  Mój końcowy wygląd strony dostępny tutaj.

  Już niebawem postaram się uruchomić mój system darmowych blogów a co za tym idzie będę potrzebował kilku layoutów. Tak więc, już niebawem kolejny poradnik! Więcej informacji wkrotce na http://srodek.info
« Ostatnia zmiana: 06.06.2009, 12:08:04 wysłane przez ƥevel » Zapisane
de3on
Użytkownik

Reputacja: 5 Offline Offline

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


A Matter Of Life And Death...


Zobacz profil
« Odpowiedz #1 : 27.08.2007, 17:07:00 »

Wyśmienity tutek, zamierzam niebawem również wykonać tutek traktujący o wykonywaniu layoutów w Gimpie, oto mój outcome



PS.Sebastian chyba wybaczysz mi, że wykorzystałem 2 twoje ikonki, są świetne i nie mogłem ich nie użyć Mrugnięcie pozdrawiam...
Zapisane
kurys
Nowicjusz

Reputacja: 3 Offline Offline

Wiadomości: 9
Galeria Użytkownika

kurys


Zobacz profil
« Odpowiedz #2 : 31.08.2007, 18:45:00 »

Zrobiłem troszeczkę inaczej

http://www.fotosik.pl/pokaz_obrazek/pelny/f414600e0b846c4c.html
Zapisane
Carmix
Gość
« Odpowiedz #3 : 16.09.2007, 22:54:33 »

Nie chcę odgrzewać dyskusji sprzed kilku postów, ale kilka rzeczy należy sprostować...

Cytuj
Jesli zrozumialem to tobie chodzi jak zrobic zeby np. narysowany Przycisk ,,Strona Główna'' byl linkiem do kolejnej podstrony.

Tu nie chodzi o samo pocięcie layouta, a rozpisanie kodu html do niego. Tutaj macie bardzo dobry poradnik o html.

Cytuj
coś jak pajączek...

Pajączek to edytor kodu html, ponoć jeden z lepszych (słyszałem, nie używałem), ale sam kod html można pisać nawet w notatniku (co praktykuję), choć tu potrzeba już podstawowej wiedzy o językach Internetu: edytory wiele nam podpowiadają.

Cytuj
a comanderem publikuję- dobry program

Total Commander nie jest programem do publikacji stron (od tego są serwery http, np. apache). Ten program jedynie wrzuca pliki na serwer, który te strony publikuje.

Cytuj
Wiesz co chyba nie uwazales na polskim bo twoj post jest niestylistycznie napisany i sam dokladnie nie wiem czy zrozumialem twoje pytanie

"Czemuż to widzisz drzazgę w oku brata swego, a nie widzisz belki w oku swoim?" (Mt 7,3)

Radziłbym samemu poprawić składnię własnych wypowiedzi, używanie przecinków i kropek ułatwia czytanie i poprawia nasze ogólne mniemanie o autorze posta. Nie mówię tego wyłącznie odnośnie zacytowanej wypowiedzi, a większości Twych postów na forum.

Cytuj
ps. a na polskim uważałem bo mam 5

Oceny w dużym stopniu zalężą od poziomu nauczania w danej placówce, nauczyciela wykładającego, no i typu placówki, a co za tym idzie - wieku ucznia.


A tak poza tym, 'layout' a nie 'laycot'. W pierwszym poście poprawiłem, w kolejnych już mi się nie chce (ortofix-leń Język ).

___
no ale ja się nie znam...
Zapisane
Bombasarkadian
Gość
« Odpowiedz #4 : 22.09.2007, 16:44:22 »

Super tut Chichot
I świetny efekt końcowy Mrugnięcie

Mi wyszło takie cuś
Link padł Język
« Ostatnia zmiana: 31.10.2009, 13:14:06 wysłane przez Bombasarkadian » Zapisane
DaviJWRZ
Nowicjusz

Reputacja: 2 Offline Offline

Wiadomości: 6
Galeria Użytkownika

DaviJWRZ


Zobacz profil
« Odpowiedz #5 : 27.09.2007, 17:05:24 »

daj Cie obrazki normalnie bo nie moge tego wykonac Smutny
Zapisane
rokko
Nowicjusz

Reputacja: 2 Offline Offline

Wiadomości: 1
Galeria Użytkownika

rokko


Zobacz profil
« Odpowiedz #6 : 11.10.2007, 13:38:35 »

Ok. Wszystko jasne, ale niech mi ktoś powie, jak z tego, co zrobiliśmy w gimpie, zrobić stronę, która będzie odnosiła do podstron, ponieważ nie potrafię zrozumieć co potem, po zaprojektowaniu i zapisaniu. Czy zapisujemy na warstwach? Czy spłaszczamy? A jeśli tak, to jaka jest metoda na zrobienie odnośników na spłaszczeniu, z którego można zrobić chyba tylko tło? Do tej pory wydawało mi się, że trzeba obiekty (przyciski, odsyłacze) zrobić w .gif i powstawiać każdy osobno w odpowiednie miejsce np. do ramki. A tu widzę gotowy projekt, bez konieczności opracowywania poszczególnych elementów.

Czy ktoś mógłby dla takiego laika jak ja opisać, w jaki sposób robimy odnośniki na gotowym, spójnym layoucie?
Bardzo proszę.
Zapisane
SasQ
Użytkownik

Reputacja: 3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
JID: gamecreator@chrome.pl
Licencja: Copyright
Wiadomości: 17
Galeria Użytkownika



Zobacz profil
« Odpowiedz #7 : 17.10.2007, 15:59:47 »

Cytat: rokko
jak z tego, co zrobiliśmy w gimpie, zrobić stronę
Pociąć grafikę i użyć jej jako obrazki tła dla strony HTML.

Cytat: rokko
Czy zapisujemy na warstwach? Czy spłaszczamy?
Po pierwsze wyłącz wszystkie warstwy z tekstem i zostaw samą grafikę. Później możesz albo spłaszczyć i zapisać kopię jako osobny obraz, z którego wytniesz fragmenty grafiki, albo zaznaczasz wybrane fragmenty i dajesz "Skopiuj widoczne" i "Wklej jako nowy obraz", i każdy taki obrazek zapisujesz.

Cytat: rokko
jaka jest metoda na zrobienie odnośników na spłaszczeniu, z którego można zrobić chyba tylko tło?
Nie jedno tło, a wiele teł, dla poszczególnych elementów na stronie HTML. Jedno wielkie tło za długo by się ładowało, tak się stron nie robi. Stosuje się małe elementy tła, które mogą się czasem powtarzać na wysokość/szerokość.

Cytat: rokko
Do tej pory wydawało mi się, że trzeba obiekty (przyciski, odsyłacze) zrobić w .gif i powstawiać każdy osobno w odpowiednie miejsce np. do ramki.
Nawet nie myśl o żadnych ramkach czy tabelkach do layoutu! To stare, zamierzchłe czasy z epoki IE łupanego Język Poczytaj jakiś dobry kurs HTML na początek, żebyś nauczył się jak oznaczać fragmenty tekstu twojej treści jako nagłówki, listy, linki, sekcje dokumentu itp. Później naucz się tworzyć arkusze styli CSS, które nadadzą wygląd dokumentowi HTML i podłożą odpowiednie tła obrazkowe, kolory, rozmieszczą elementy treści na stronie we właściwych miejscach [layout] itp. Link do dobrego kursu HTML i CSS zamieściłem poniżej.

Cytat: carmix
Tu nie chodzi o samo pocięcie layouta, a rozpisanie kodu html do niego. Tutaj macie bardzo dobry poradnik o html.
On rzeczywiście był dobry [a przynajmniej lepszy niż kurs Pawła Wimmera, który nie trzymał sie nawet standardu HTML 3.2 ;P], dopóki nie powstał lepszy i bardziej na czasie kurs HTML i CSS. Uczy nowoczesnego stylu kodzenia w HTML, zgodnie z zalecniami W3C i wszelkimi aktualnymi trendami [semantyczny kod, separacja treści od prezentacji, użyteczność, dostępność itp.]. Tam jest też przykład tworzenia strony od podstaw.
Zapisane
carew25
Użytkownik

Reputacja: 5 Offline Offline

Płeć: Mężczyzna
GIMP: 2.2
Wiadomości: 26
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #8 : 27.11.2007, 17:22:41 »

Mój pierwszy post od czasu dlugiej przerwy w pracy z GIMP-em. Bardzo mi sie spodobał i chyba zrobie z niego layout na aukcje w allegro. Wielkie dzieki dla autora.  Język
Zapisane

xdoctor
Nowicjusz

Reputacja: 3 Offline Offline

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

xdoctor


Zobacz profil
« Odpowiedz #9 : 30.12.2007, 14:54:56 »

Moje wypociny, nie wyszło mi tak jak chciałem...
http://xdoctor.eu.interia.pl/grafika/strona2.png
Zapisane



Xcore
Nowicjusz

Reputacja: 2 Offline Offline

Wiadomości: 3
Galeria Użytkownika

Xcore


Zobacz profil
« Odpowiedz #10 : 09.01.2008, 16:55:23 »

Ekhem bo mam takie głupie pytanie Chichot.

Czy jak zrobie ten layout to jakoś go moge wstawić na stronę?? :p
Zapisane
SpookyPld
Nowicjusz

Reputacja: 2 Offline Offline

GIMP: 2.6
Licencja: CC-BY-SA
Wiadomości: 6
Galeria Użytkownika

SpookyPld


Zobacz profil
« Odpowiedz #11 : 10.01.2008, 00:12:04 »

Jestem tutaj nowy, więc się przywitam. Cześć Uśmiech

Właśnie produkuję stronę dla mamy i znalazłem niezły poradnik akurat na stronie GIMP, któego od około tygodnia mam przyjemność używać Język

Tak się składa, że znalazłem również, iż najpopularniejszą obecnie stosowaną rozdzielczością jest 1024 x 768, ale niewiele ma mniej 1280 x 1024. Warto to brać pod uwagę tworząc stronkę www Mrugnięcie
Zapisane
snufkin
Gość
« Odpowiedz #12 : 10.01.2008, 01:04:56 »

Czy jak zrobie ten layout to jakoś go moge wstawić na stronę?? :p

No przecież masz odpowiedź (licząc od Twojego) 3 posty wyżej.

Bogowie...
Zapisane
Svistu
Użytkownik

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.8
JID: svistu@aqq.eu
Licencja: CC-NC-BY-SA
Wiadomości: 119
Galeria Użytkownika


GIMP'owy NOOB


Zobacz profil WWW
« Odpowiedz #13 : 13.01.2008, 22:25:04 »

Długo się zbierałem do wykonania pracy z wykorzystaniem tego tutka oj długo - ale w końcu zrobiłem co trzeba Uśmiech Tut zaglebisty!
A o to moje dzieło: http://www.super-tomasz.yoyo.pl/
Wielkie dzięki michalsrodek za podsunięcie pomysłu na styl - mam nadzieję że się ni gniewasz że go użyłem bez pytanie Ciebie o zgodę.
Zapisane

"Nie dyskutuj z debilem: najpierw sprowadzi cię do swojego poziomu, a potem pokona doświadczeniem"
Strony: [1] 2 3 ... 9
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialePropozycje i prośby o tutorialeTutoriale do poprawyWątek: Tworzymy stronę w gimpie
Skocz do: