Polskie Forum Użytkowników GIMP-a

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.
(http://srodek.info/online/tutorials/1/1.png)

        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.
(http://srodek.info/online/tutorials/1/2.png)
   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.

(http://srodek.info/online/tutorials/1/3.png)   
   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.

(http://srodek.info/online/tutorials/1/4.png)<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).

(http://srodek.info/online/tutorials/1/5.png)

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

(http://srodek.info/online/tutorials/1/6.png)

       Teraz stworzymy efekt świetlistej łuny, płynnego przejścia – nie wiem jak to nazwać. Najpierw zduplikuj warstwę zawierającą bordowe tło.
(http://srodek.info/online/tutorials/1/7.png)

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

(http://srodek.info/online/tutorials/1/8.png)
   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ć).
(http://srodek.info/online/tutorials/1/9.png)
Teraz wybierz narzędzie gradient ustawiając kolor pierwszoplanowy na biały. Jako rodzaj gradientu zaznacz „Kolor pierwszoplanowy na przezroczystość”.
(http://srodek.info/online/tutorials/1/10.png)
       Wypełnij zaznaczenie gradientem tak aby biały kolor był w jego górnej części.
(http://srodek.info/online/tutorials/1/11.png)
Teraz ustaw krycie warstwy na około 25%.
(http://srodek.info/online/tutorials/1/12.png)
      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.
(http://srodek.info/online/tutorials/1/13.png) 

   Skopiuj warstwę i dodaj rozmycie Gaussa. Dodaj jakieś napisy i elementy dekoracyjne obok linków(kropki, prostokąty, strzałki).
(http://srodek.info/online/tutorials/1/14.png) 
  Stwórz nową warstwę i narysuj na niej menu boczne.
(http://srodek.info/online/tutorials/1/15.png) 
  Dodaj przykładowy artykuł.
(http://srodek.info/online/tutorials/1/16.png)
      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.
(http://srodek.info/online/tutorials/1/17.png)
       Gdy pozostanie ci warstwa tylko z czarnymi liniami zmniejsz lekko jej krycie i dodaj do niej maskę „czarna(pełna przezroczystość)”.
(http://srodek.info/online/tutorials/1/18.png)
       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. (http://srodek.info/online/tutorials/1/19.png) 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).
(http://srodek.info/online/tutorials/1/20.png)
   Teraz wystarczy dodać kilka grafik i dodatkowych napisów. Świetnie do tego celu nadają się ikonki Tulliana 2.0 (http://kde-look.org/content/show.php/Tulliana+icon+set?content=38757)(licencja LGPL) dostępne na kde-look.org.  Mój końcowy wygląd strony dostępny tutaj (http://srodek.info/online/tutorials/1/ready.png).

  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

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

(http://images25.fotosik.pl/69/6b87aa879340d0ffm.png) (http://www.fotosik.pl/showFullSize.php?id=6b87aa879340d0ff)

PS.Sebastian chyba wybaczysz mi, że wykorzystałem 2 twoje ikonki, są świetne i nie mogłem ich nie użyć ;) pozdrawiam...

Zrobiłem troszeczkę inaczej

http://www.fotosik.pl/pokaz_obrazek/pelny/f414600e0b846c4c.html (http://www.fotosik.pl/pokaz_obrazek/pelny/f414600e0b846c4c.html)

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


Tu nie chodzi o samo pocięcie layouta, a rozpisanie kodu html do niego. Tutaj (http://www.kurshtml.boo.pl) macie bardzo dobry poradnik o html.


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


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.


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


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ń :P ).

___
no ale ja się nie znam...

Super tut :D
I świetny efekt końcowy ;)

Mi wyszło takie cuś
Link padł :P

daj Cie obrazki normalnie bo nie moge tego wykonac :(

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

Pociąć grafikę i użyć jej jako obrazki tła dla strony HTML.

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.

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ść.

Nawet nie myśl o żadnych ramkach czy tabelkach do layoutu! To stare, zamierzchłe czasy z epoki IE łupanego :P 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.

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 (http://kurs.browsehappy.pl). 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.

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.  :P

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

Ekhem bo mam takie głupie pytanie :D.

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

Jestem tutaj nowy, więc się przywitam. Cześć :)

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ć :P

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 ;)

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

Bogowie...

Długo się zbierałem do wykonania pracy z wykorzystaniem tego tutka oj długo - ale w końcu zrobiłem co trzeba :) 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ę.

a jak zrobić żeby nacisnąć np kontakt to kierowało do kontaktu z adminem i jak wstawić tam pliki

to juz calkiem inaczej kubi.
W gimpie robisz sama grafike i do tego sie tylko nadaje. Zeby zrobic strone www musisz poczytac o html lub xhtml. Tam takie cos sie robi - wstawia obrazki,klikasz na cos i przechodzisz dalej itd.
W gimp tylko do grafiki sie nadaje czyli wszystko co ma koncowke .jpg  .gif .xcf .psd ale nie .html .xhtml .htm czy .php
Te ostatnie to poprostu text.

Mam takie pytanie! Jestem początkujący i nie bardzo chyba zrozumiałem część poświęconą stopce tego layouta - otóż robie to następująco:

(http://www.e-lotnisko.pl/GIMP/poczatek.jpg)

Następnie zaznaczam żółte paski i usuwam je:

(http://www.e-lotnisko.pl/GIMP/po_usunieciu.jpg)

Następnie nakładam maskę:

(http://www.e-lotnisko.pl/GIMP/maska.jpg)

Wybieram gradient - biało czarny - (ilustuje to na rysunku:

(http://www.e-lotnisko.pl/GIMP/gradientc-z.jpg)

i otrzymuje efekt:

(http://www.e-lotnisko.pl/GIMP/efekt.jpg)

Kurde nie wiem co jest nie tak! :( Próbowałem bez zaznaczenia i otrzymuje efekt czarnych paskow!

MaM do ciebie troszke pytan :D
   1.Jak juz pociąłem grafike to jak mam fote i juz daje link, np. tak:
    mam taka fote gdzie pisze link... i chce zeby to dzialalo jako link
    to mi sie koło tego robi taka ramka i jak ja usunac
   2.Ogolnie jak wy kodujcie to do HTML.... PLIS POMOCY
                                     
           
                                      Jak inni wiedza to pomoc mile widziana
                                                (a zapewne widza xD )

Trzeba pociąć "projekt" na odpowiednie elementy i powstawiać jako Tła do poszczególnych tabel lub jako obrazki do odnośników.

W internecie znajduje się sporo darmowych kursów HTML - na mojej stronie znajdziesz link do (według mnie) jednego z najlepszych kursów.

A propos mojej strony - trochę ją odświeżyłem ale raczej pod względem technicznym :-) Jakby co to zapraszam: www.super-tomasz.yoyo.pl (http://www.super-tomasz.yoyo.pl)

Mój wytwór xD ^^
Trochę bardzo słabo ale to moja pierwsza ^^strona^^ robiona w gimpie

Witam. Zrobiłem grafikę. Znam się trochę na htmlu  bo robię szablony na blogi. nie znam za bardzo tego stylu ccs. i teraz pytanie do tych co wiedzą jak pociąć ten szablon. w związku z tym ze wolę zrobić to w stylu strony www a nie bloga, i nie mam zbytnio czasu na przeczytanie calego KURSU HTML.BOO.PL chcę się dowiedzieć gdzie jest dokładnie napisane o tym cięciu, i co warto przede wszystkim przeczytać na ten temat. jesli będzie trzeba, przeczytam caly dzial ccs. czekam na odpowiedź. pozdrawiam :D

css  :D
Więc tak - css jest w sumie podstawą więc lepiej przeczytaj całość kursu... ]
Jeśli chcesz podzielić layout - ROBISZ TO W GIMPIE. Masz diva o id="logo_kontener" (to trochę rodem z js, ale co mi tam xD), więc wstawiasz mu w stylu css wewnątrz lub na zewnątrz pliku html, jako . Nazwy plików są przykładowe. Ale tak czy inaczej musisz się nauczyć całego css... Jak cie sie nie chce pisz na pw to ci zrobię gotowy kod.

Żeby nie było spamu:

Zaglebisty tut - właśnie go używam.

Tut naprawdę dobry, a raczej bardzo dobry, dzięki za niego :D
Mam pytanie co do pracy: jak zlikwidować w podanym przez Ciebie deseniu żółte paski?

A oto moja praca:

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

oKi;) wiesz co:P na razie mi przesło z WEB'owaniem:D ogólnie zająłem się gimpem bo wcześniej mało miałem z nim do czynienia.. jak mi chęć powróci to się może zgłoszę albo przestudiuje ten kurs CCS ;P a tak w ogóle to nie umiem się tak dobrze w gimpie obsługiwać więc proszę mówić jaśniej na przyszłość :P -> hehe , cytuję "Masz diva o id="logo_kontener" what's up?
TUTEK - przydaje się:)
 dziękuję za uwagę;)

http://img182.imageshack.us/my.php?image=stronka1wa5.png


wszystkie napisy zrobi sie w kodzie

jak to potem pociąć mam ??

Ustawiasz odpowiednio prowadnice [dzielisz wizualnie]
Później narzędziem  <zaznaczenie-prostokatne> wycinasz według prowadnic elementy
i tworzysz jako nowe plik graficzne [PNG]. Wszystko wklejasz na jedną stronę
wraz z kodem itp...

Podobno tabelki są złe... ale ja i tak ich używam na portfolio xP

wielkie dzięki

Tut's very nice sam obecnie pisze stronke a co do @qmstars
w body piszesz

Objaśnienie
Najprościejszy układ stronki czyli
*stronka w boxie o szerokości 800px
*nagłówek (top)
*tresc (right) 500px
*menu(left) 300px
*stopka (bottom)
W stopce funkcja clear: both to wymuszenie wysokości elementów pływających
*zauważcie że suma szerokości treści i menu to 800px czyli tyle ile ma cały box w którym jest stronka
Nagłówek mogłem ominąć bo tam nic nie ma ale co tam

A jak zrobić, aby podstrony były klikalne ??

Witam, jestem tu nowy, no i przerwę Wam chwilowo dyskusję, a to mój pierwszy projekt strony, ale nie pierwsze dzieło wykonane w GIMP-ie z pomocą tutków z tego forum :) Wiem, że żywcem zerżnięte od autora, ale dopiero się uczę. Proszę o subiektywną ocenę, ale ostrą krytykę też zniosę.
Oto moje dzieło:http://www.gimpuj.info/replacement.png (http://www.gimpuj.info/replacement.png)

Przepraszam że pytam  ale jak zrobić ze zwykłego tła różowego na ten w paski bo nie umie tego zrobić a to bardzo przydatne jest :)(http://www.otofotki.pl/img2/obrazki/khfo1511644550v.png)
Wiem że potrzebny jest Deseń Warning tylko nie wiem jak zmienić kolory tego deseniu ;/
Z góry dziękuje :) Wszystkim za wypowiedź

PS Dziękuje wszystkim za odpowiedz xD dobra już wiem jak to zrobić :)

Wypełniasz zaznaczenie deseniem, zaznaczasz narzędziem do zaznaczania koloru, żólty kolor na deseniu, usuwasz go. Dalej robisz coś z maskami(dodaj czarną maskę warstwy,posuń czarnobiałym gradientem po zaznaczeniu)i gradientem , ale ja ci tego nie wytłumaczę sprawdź sobie w tutku.

Ja też się w to bawiłam.... :) Oto efekty...

http://i26.tinypic.com/2rf78nk.jpg

http://i28.tinypic.com/29f5s1h.jpg


Mam nadzieję, że się podoba

Ziomioslaw: większych się nie dało? Poz a tym ten drugi, to jest jeden z standardowych na Jogerze.

Wydaje mi się, że musisz przenieść warstwę z gradientem pod tą z deseniem ;P. A jeśli nie pomoże, to zmniejsz krycie ;).

Móje wypociny - http://www.gimpuj.info/index.php?action=gallery;sa=view;id=16982

Mógłby mnie ktos poinstruowac jak to mam pociac? Zwłaszcza chodzi o stopkę i logo zeby za długo się nie ładowały. Mile widziane będą wasze uwagi.

Wiem ze w Gimpie wykonujemy tylko grafike, ale moze trafiłby sie jakis zyczliwy uzytkownik który pokierowałby mną i udzielił wskazówek odnosnie przekładania layoutu na kod, tzn nie za bardzo wiem jak posłuzyc się edytorem Adobe - Dreamweaver CS3.

Proszę o wyrozumiałość.  :)

Potnij to prowadnicami, a potem zaznaczeniem prostokątnym wycinaj.

Jeżeli nie znasz HTML i CSS, to wg mnie nie ma sensu zabierać się za pisanie kodu. Najpierw zapoznaj się z tymi dwoma językami. Jeżeli ktoś Ci będzie to tłumaczył to nie wiele zrozumiesz.

Tutaj jest bardzo dobry, o ile nie najlepszy kurs: http://www.kurshtml.boo.pl (http://www.kurshtml.boo.pl)

Moja praca:  :D

(http://images26.fotosik.pl/241/30822c37c62d0eb0m.png) (http://www.fotosik.pl/showFullSize.php?id=30822c37c62d0eb0)

Lol, wg mnie jedynym waszym zadaniem jest odpowiednie pocięcie tego a reszta to kwestia czegoś bardzo potężnego - CSS.. Bez tego poważna strona nie ma szans.

No masz racje, ale strona www, bez CSS w ogóle nie ma szans

Mi wyszedł taki efekt. Nie jest do końca idealny ale da się go przeżyć (jak dla mnie)

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

Witam,

szukałem czegoś w sieci na ten temat, ale nie znalazłem zbyt wiele.
Czy znacie sposób na zapisanie wszystkich plików po gilotynowaniu, bez żmudnego zapisywania wszystkich plików po kolei?

Z tego co wiem to chyba się nie da

Mam pytanie:
Jeśli zaprojektuje laya powiedzmy o takich rozmiarach jak w tutku i potem po pocięciu szablonu czy jak zmienię rozmiar danego elementu np loga na jakiś mniejszy to czy zmiana rozmiaru nie zepsuje mi efektu całej pracy? Znaczy mam stronę o konkretnych już ustalonych wymiarach, ale na razie zacząłem projektować zgodnie z tutkiem i tworząc nowy dokument użyłem podanych wymiarów i właśnie boje się tego, że po pocięciu jak zmienię rozmiary pojedynczych elementów całą robotę diabli wezmą i np rozmażą mi się napisy, które jak jest duży rozmiar to wyglądają ładnie, a po skalowani się rozmazują bądź efekt traci na efektowności. Już miałem tak parokrotnie przy mniejszych projektach, więc pytam jak uniknąć czegoś takiego?   

Jak uniknac ?

Hmm... wydaje mi sie ze odpowiednie zaplanowanie projektu pozwoliloby uniknac takich sytuacji. Lepiej przemyslec wszystko na poczatku aby pozniej obylo sie bez zbednych poprawek a co za tym w konsekwencji idzie modyfikacji calego projektu.

Witam temat powinien być Tworzenie szablonów w gimpie a nie stron strona składa się z html
css i wiele innych ale ja nie o tym nabijam se posty więc powiem wam że to co wy robicie tu to wymiękacie przy mię ale rozumie niektórzy początkujący i to jest Tutorial może wam wstawię moje prace poćwiczycie trochę również tworze na gimpie jak i na Adobe Photoshop i wstawię wam te które robiłem w gimpie.

Koleś zaraz cię tak tu zlinczują. To jest wg. najlepsze forum grafiki rastrowej i wektorowej bo też inkscape jest, luźna atmosfera, mili użytkownicy choć nie zawsze. A ty tu mając 20 lat mówisz eeee... weśta, osoby mają 2 razy mniej lat od ciebie i dorównują profesjonalistom. Ty bedąc w takim wieku zapewne nawalałeś na pegasusie przed Funajem. Jak chcesz poszpanować to idź na fotke.pl. Ja kumpla namówiłem żeby założył konto i dziękował mi bo dzięki temu bajerował jaki on grafik przed lamusami. Twój post jest najdebilniejszy w świecie. Jeśli coś umiesz to się ciesz a nie ogłaszaj tego w taki sposób. Myślisz, że przeczytałeś na www.republika.pl co to jest HATEEMEL i już. Sam jestem na 100% pewien, że nie dorównałbyś większości doświadczonych użytkowników z tego forum.

EDIT:
Sugerujesz się jednym wątkiem, wiele jest początkujących co chciało by mieć stronę i dlatego tak tu pisze. Oceniasz całe forum po jednym wątku, ty weś chociaż popatrz, że to piszą osoby po 10 postów.

Tutorial ciekawy muszę przyznać, jednak jestem dopiero w trakcie roboty i to o co mi się udało stworzyć - po swojemu :D + Poetycki Wiersz ^^

http://img2.vpx.pl/up/20081013/cms.png

GIMP został stworzony m.in. do tworzenia map obrazków...
Filtry - sieć www - image-map
Na podanym obrazku zaznaczacie linki czyli fragmenty obrazka napisy itp.
Zapisujecie ten plik.
Nie wiem dokładnie jak to trzeba zrobić dalej ale ja otworzyłem ten plik notepadem wkleiłem cały skrypt do kodu html strony i zapisałem.

ale jak to walnac na forum np? ;d

Piszesz szablon albo przerabiasz inny i tyle...

Bardzo fajny i dokładnie opisany tutorial.  :)
Oto moja praca.
http://www.gimpuj.info/gallery/17706_22_11_08_4_46_43.png (http://www.gimpuj.info/gallery/17706_22_11_08_4_46_43.png)
I jak ?  <aniolek>

Witam! Jestem tu nowy więc sie przywitam. Siema,.
Bawie sie gimpem od tygodnia. Cały czas nie moge zrozumieć tego:



Pociołem wszystko tak jak kazaliście... jak mam zrobić, żeby to złożyć w całoś w kodzie html? Chce mieć mapowane linki.
Dzięki z góry za pomoc,
Pozdro

nie rozumiem? chodzi ci o to że nie znasz xHTML? jeśli tak to pomyliłeś fora :]

tzn znam, tylko nie rozumiem jednej rzeczy. Zrobiłem top do strony, wkleiłem przez html i nie wiem jak zrobić, żeby np. jak "najade" myszką na "o mnie" to żeby było hiberłącze (<a href=""></a>).
top wygląda tak  http://img229.imageshack.us/img229/8220/toppp1ot4.png


próbowałem koordami to robić, ale nie wychodzi (

<map name="logo">
<area href="http://www.zlop.pl" shape="rect" coords="86,148,250,193" alt="siema">
<area href="http://www.2.pl" shape="rect" coords="361,172,451,187" alt="2">
<area href="http://www.3.pl" shape="rect" coords="463,145,585,158" alt="3">
<area href="http://www.4.pl" shape="rect" coords="480,178,570,195" alt="4">
<area href="http://www.5.pl" shape="rect" coords="588,166,748,185" alt="5">
</map>

Aby mapowanie działało na obrazku, musisz w parametrach znacznika img podać, z jakiej mapy ma kożystać (w Twoim przypadku <map name="logo">).

np: <img src="logo.png" usemap="#logo" />

dobry tutorial ,miało być więcej a tu cisza. . .  ;)

A jak zrobić własną stronę WWW ?

http://www.kurshtml.boo.pl/   tylko przeczytaj od deski do deski a dopiero potem wejdź na forum(i najpierw użyj opcji szukaj a dopiero potem zakładaj nowy temat uwierz mi 98% odpowiedzi na pytania początkujących jest na forum ;) )

http://yfrog.com/0cbeznazwyvdbp (http://yfrog.com/0cbeznazwyvdbp)- co o mojej stronce myślicie proszę o ocenę a i jak by mógł by ktoś wykonać kod HTML do tej strony byłbym wdzięczny

kurcze... ja wciąż nie wiem jak zrobić te paseczki :/ głównie mam problem ze znalezieniem desenia "Warning!" i nie wiem o co chodzi z zaznaczaniem żółtych linii. proszę o pomoc.

Wejdź w Okna -> Dokowalne okna dialogowe -> Desenie i w nowym okienku z listą deseni poszukaj deseniu Warning.

Linie zaznaczasz na pomocą narzędzie dostępnego w menu Zaznaczenie -> Według koloru.

Po wybraniu narzędzia klikaj z przytrzymanym klawiszem Shift na żółtych liniach.

dzięki :) nie myślałam, że tak szybko dostanę odpowiedź. już biorę się do pracy.

Witam. Czy da się to jakoś zapisać do pliku html, żeby mieć wszystko gotowe - obrazki w folderze oraz tekst w kodzie html ? CZy trzeba zapisywać każdą grafikę osobno i składać ją w HTML ?? Proszę o pomoc. Próbowałem zapisać projekt jako plik .html ale pojawiły sie tylko puste komórki i wiersze w tabelkach.

lol?

http://pl.wikipedia.org/wiki/HTML

A próbowałeś zrobić sobie zdjęcie i zapisać w *.html

Teoretycznie jest też coś takiego jak mht - używa tego Opera. Chyba tylko ona jest potem w stanie taki plik odczytać.

Chodziło mi o to czy gimp generuje pliki html, zapisuje grafike w osobnym folderze a potem buduje strone na tabelkach taką jaką widzimy. Znam się na rozszerzeniach...

Only in photoshop...  :P

Ziomioslaw: nieprawda, można o tym poczytać w tym dziale.

a jeśli nie, to co polecasz?

No i udało się  ;)  :D

Dzieki za tutorial ;) akurat w tym semestrze mialem tworzenie stron wiec i sposob na tworzenie layoutow sie przyda ;)

i ja mojego pierwszego layouta oparłem na tym turtialu :)

choć mój dużo się różni (zwykle nie trzymam się kluczowo instrukcji :))

proszę o opinie n/t mojej pracy :)

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

Kiepsko wytłumaczone, np. nie wiem, jaką warstwę zrobić przezroczystą itp. Koła nie mogę zrobić, nic...

Bo widzisz, to jest poziom trudności "średni" akurat. Poza tym jak tworzysz nową warstwę to czy tak dużym problemem jest przyjrzeć się okienku, które wyskakuje?
A jeśli na prawdę nie potrafisz zaznaczyć okręgu to brawa się należą, zwłaszcza że w tutorialu jest napisane jakiego narzędzia użyć...

Jest napisane tylko "dodaj nową warstwę", a na tle tym bordowym patrzyłem, nawet nie mogę malować.

Zgaduję - to pierwszy tutorial jaki czytasz... Chyba w ogóle nie potrafisz się posługiwać warstwami skoro "na tle tym bordowym" nie możesz malować (albo po prostu tym samym kolorem malujesz).
Zajrzyj najpierw do FAQ (http://www.gimpuj.info/index.php/sprawy-techniczne/gimpuj-faq-t5923.0.html).

Spoko tutek wszystko zrobiłem. Ale teraz przydało by się poradnik zrobić taki dokładny nie tylko napisany w poście jakiegoś użytkownika jak to przenieść na stonkę. Proszę Was bardzo zróbcie takie coś. pls
 

Kurs HTML (http://www.kurshtml.boo.pl/) powinien wystarczyć :)

a podasz link gdzie dokładnie to pytanie jest bo jakoś dziwnym trafem ja nie mogę go znaleść

Ech... ale co konkretnie nie wiesz jak przenieść na tą strone ?

bo patrz chcę aby moja strona składała się tylko z tego layera i mam odnośniki do tych stron wszytkie zrobione tylko niewiem gdzi emam ten html kod wpisac :/

Chodzi Ci jak zakodować by móc umieszczać tam tekst? Jeśli tak to Kurs HTML > CSS się kłania.

Z tego co widze nie znasz podstaw HTML - wybacz, ale nadal uważam że powinieneś sie wziąć za tamten kurs, bo żeby Ci to wyjaśnić by trzeba było jeszcze większy tutorial napisać i to tylko częściowo związany z grafiką - to nie miejsce na takie rzeczy.

Robiłem dziś pierwszy raz styl na www..
Co prawda nie dokończyłem go, gdyż straciłem wenę...
Ale przedstawiam wam mój projekt, który dokończę jutro/pojutrze i pokażę.;D

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

Oto efekt mojej pracy.
To mój pierwszy lay więc wiecie, ale oceniać go na moim profilu możecie. ^^

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

można np. zrobić w gimpie stronę na allegro? czy to będzie tylko jako zdjęcie.?

w gimpie mozesz zrobic tylko graficzny projekt strony. Potem uzywasz obrazkow z tego graficznego projektu jako elementy strony.

pierwszy w zyciu layout  ;)

(http://www.gimpuj.info/replacement.png) (http://img692.imageshack.us/i/beznazwyl.jpg/)

w paincie można tez cos takiego zrobic, wystarczy kopiować i wlejać.

Yhy... A gdzie masz w Paincie rozmycie Gaussa :P?

 oto moja praca swietny tutek:

ja takiego pierwszego layouta wygimpowalem :D

http://i46.tinypic.com/35hpcmf.png

oto moja praca w gimpie dopiero zaczynam pracę z gimpem

http://iv.pl/images/20fkdaoocv6yyhz0ii.png

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

Pierwszy lay w życiu. :p Może mi ktoś powiedzieć czemu taka lipna grafika na zdjęciach? Na kompie wyglądają dobrze.

I jak zakodować lay'a, żeby wrzucić na jakąś stronkę?

Oceniajcie. :p

Bo zapisałeś wszystko w .gif i jakość znacząco spadła na przyszłość zapisuj w .png Warto !!

Tautorial naprawdę super a oto moja praca:
(http://www.gimpuj.info/gallery/thumb_39259_28_02_10_7_20_51.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=60015)

Mi wyszło coś takiego :

http://www.gimpuj.info/gallery/19995_01_03_10_7_50_34.png

Oto moje dzieło  ;) 8-)
http://i44.tinypic.com/1pjzvs.jpg

A jak zrobic, zeby cała strona miała zaokrąglone rogi i miała cien?

Zaznaczenie-> zaokrąglij
Filtry -> światło i cień -> rzucanie cienia

Moja pracka :>:

http://img90.imageshack.us/img90/9581/rrrw.png

Nie dawałam żadnych ikonek etc. bo nie lubię takiego wplatania wielu dodatków. Cenię prostotę :P

dużo roboty ale efekt super mój szablon

[img]http://www.gimpuj.info/replacement.png[/img
Nie dodajemy takich dużych prac. Miniaturki.

Jaką czcionkę użyłeś w tych napisach gdzie jest menu?

http://img101.imageshack.us/img101/9379/layoutp.png (http://img101.imageshack.us/img101/9379/layoutp.png)

Niezbyt mi wyszło ale to 1 layout ;)

oto moje dzieło tylko logo inne i jeszcze nie ma artykułów : http://www.fotosik.pl/pokaz_obrazek/c40321ebd7f5e701.html (http://www.fotosik.pl/pokaz_obrazek/c40321ebd7f5e701.html)

Dobry tutorial, dzieki przyda sie :P

Mam nadzieje że się podoba w Gimpie dopiero rok jestem i działam w nim .
http://wgrajfoto.pl/pokaz/img1110/teendofidunnc04e.jpg (http://wgrajfoto.pl/pokaz/img1110/teendofidunnc04e.jpg)
 <wilber>

Mi wyszło takie coś  ;)
(http://www.gimpuj.info/replacement.png) (http://img502.imageshack.us/i/1lay.jpg/)

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

Czas roboty? Około 2 godzin. Dobry tutorial. Polecam.

Mi wyszło coś takiego: http://www.iv.pl/images/09545469644969059057.png
Jak dla mnie nieco za małe, chyba przesadziłem z wielkością niektórych rzeczy. ;)

Tutek super. :D Właśnie szukałem jak zrobić fajną stronkę w HTML, a tu trafiłem na taki ładny styl. :) Za niedługo zrzucę jak to wygląda. :D

Genialne.  8-)

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

Witam!
Stworzyłem sobie podobną stronkę i zapisałem w formatach jpg i xcf a jak zapisać ją w kodzie html i pociąć?

Tyle razy już ten temat był poruszany... zapisujesz każdy kawałek strony oddzielnie, uczysz się HTML i CSS i piszesz stronę.

a zeby taka stronke opublikowac trzeba : zainstalować xampp  i tak > lokalizacja >hstdocs> usuwamy pliki tworzymy > skrypta > wklejamy tam naszą stronke o nazwie index >w formacie php albo html niepamientam  (mi działało) dajemy start start> ale totylko działa jak karzdą grafike mamy zrobioną osobno <aniolek>

Świetny tut. Wreszcie zrobie sobie porządny projekt strony, nie w jakiś badziewiach typu Cool Page.
Wielkie dzięki za tutka, bardzo mi pomoże. :)

Cytat: NickName2 "a zeby taka stronke opublikowac trzeba : zainstalować xampp  i tak > lokalizacja >hstdocs> usuwamy pliki tworzymy > skrypta > wklejamy tam naszą stronke o nazwie index >w formacie php albo html niepamientam  (mi działało) dajemy start start> ale totylko działa jak karzdą grafike mamy zrobioną osobno"

NickName2
Dla Mnie jesteś zerem.
Bez obrazy nie chciałem Cię urazić bo to nie twoja wina że piszesz posty bez sensu.

Dla tych co chcą mieć stronę w Php lub Html:

-Najpierw patrzcie w przeglądarce (Dla html-a bo php się nie wyświetli (php tylko na serwerze a html na dysku i serwerze nawet na nośniku przenośnym)

-Jeżeli masz jakiś edytor to z niego korzystaj (ja polecam Windows-owy Notatnik, nie instaluj żadnego innego jak masz odpowiedni)

NickName2 (Wyjaśnie dlaczego piszesz bez sensu)...
1.Bo nie piszesz z polską normą (nie masz kresek np. Ć, nie piszesz z dużej litery)
2.Ok, błędy można jeszcze usprawiedliwić np. Jak masz błędy ale jest dobrze napisany (w sensie wytłumaczone i wszystko się zgadza)
3.Ludzie muszą Cię ciągle poprawiać.


Ok, teraz wersja twojego postu poprawiona (Niech to będzie wersja dla przyszłych pokoleń) :

A żeby taką stronkę opublikować trzeba:
1.Zainstalować Xamppa(Najlepiej aktualną wersje).
2.Wchodzimy w przeglądarke i wpisujemy: "http://localhost/xampp/index.php"
3.Klikamy "Stan" i sprawdzamy czy są włączone pierwsze 4 opcje i Usługa FTP (jeżeli nie jest to nic).
4.Wchodzisz w: (na dysku) "Lokalizacja\Xampp\Htdocs\ > usuwasz wszystkie pliki".
5.Uczysz sie Html-a (ew.Php) i piszesz stronę).
6.Wklejasz tam wszystkie pliki strony.
7.Wchodzisz w (przeglądarka) "http://localhost/index.html (.php)".
8.Patrzysz na stronę i ją oceniasz, dopieszczasz, i poprawiasz.
9.Cieszysz się i chcesz ją pokazać całemu światu.
10.Kopiujesz pliki w "Htdocs" do innego folderu (np. na pulpicie).
11.Usuwasz Xamppa.
12.Robisz serwer (Darmowe sa na cba.pl lub yoyo.pl, nie polecam, lecz możesz na nich wypuścić wersje testową strony, jeżeli się nie przyjmie to ją usuwasz i powtarzasz kroki 1 do 8).
13.Robisz płatny serwer i wystawiasz pliki.
14.Pokazuje ją znajomych, dajesz linka na gg na portalach (bez pzesady) aż zwiększy się twoja liczba odwiedzających.
15.Wstawiasz reklamy banner-y i dostajesz kase.
16.Ulepszasz stronę.
17.Cieszysz się zyskami.


Mam nadzieję że pomogłem jeżeli robisz stronę domową to wykonujesz kroki od 1 do 12(13).
Przepraszam że tak się rozpisałem ale chciałem ci to wytłumaczyć może następnym razem dam jakiś kodzik albo projekt.

No wsumie Xamppem też można ale muszisz znac Ip tej osoby (jeżeli niema hasła, jak ma to nie, Zakładka bezpieczeństwo > I link na dole lub po prostu (Odnośnik odrazu do formularza z hasłem do podania)  http://localhost/security/xamppsecurity.php


Pozdrawiam i życzę miłej pracy z
Gimp-em w trakcie tworzenia Layout-u
Dawid1999

Xamp nie jest potrzebny do tworzenia strony w html, a jedynie do "testowania" strony tworzonej w php, do html wystarczy przeglądarka. Do opublikowania strony to xamp jest już kompletnie nie potrzebny.
Co do notatnika jako edytora to oczywiście że można tylko po co cofać się wstecz.

//Sooly: Cofać można się tylko wstecz. ;) Ale zgadzam się z tym notatnikiem.

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

Z tego tutka to tylko te paski na stopke wykorzystalem :P

Mój out :
http://iv.pl/images/47328932322667505770.png

//be@: Nie wklejaj takich dużych grafik, wystarczy link.

Mój projekcik. Miałem problem z doborem kolorów napisów " Tytuł artykułu" i "Menu", ale coś ostatecznie wybrałem. W każdym razie nie jestem pewny, czy to dobrze wygląda. Ukończoną wersję oddaję do Waszej oceny (w załączniku). :)

Dzięki wielkie za ten tutorial! ;)

Sory ale to zielone, to oczy bolą i tekstu białego nie widać ... kolor tła jest kompletnie do zmiany.
Z praktyki wiem, że preferowane są białe tła i ciemna czcionka, czyli projekty z lekkim wyglądem.
Ta zieleń jest zupełnie rażąca w oczy.

Wykonałem drugą wersję. Tym razem zadbałem o to, aby czcionka była bardziej widoczna, a tło nie raziło w oczy. Postanowiłem zastosować "miękkie" kolory w nagłówku i stopce, oraz zmieniłem ułożenie tekstu. Mam nadzieję, że druga wersja jest lepsza od poprzedniej. :)

Pozdrawiam serdecznie :)