Polskie Forum Użytkowników GIMP-a

Tutoriale => Fabryka tutoriali => Wątek zaczęty przez: agape on 29.08.2009, 12:10:34



Tytuł: Business Layout
Wiadomość wysłana przez: agape on 29.08.2009, 12:10:34
Business Layout
Tutorial

Oryginał: Oryginalny tutorial (http://hv-designs.co.uk/2009/08/22/business-layout-6/)
Opracowanie: Nesq
Poziom trudności: średni

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




Tutaj wpisujemy małe wprowadzenie do tutoriala - informacje dla użytkownika odnośnie
efektu końcowego (np. jeśli tłumaczymy zagraniczny tutorial, to tutaj umieszczamy informacje
o oryginale). Dodatkowo możemy umieścić własne przemyślenia (np. co nas zainspirowało
do napisania tutoriala lub kto nas o to poprosił).

Tutorial napisany w wersji GIMP 2.6.6 W innych wersjach nazwy narzędzi i pojęć mogą się różnić.



[lp] Zaczynamy

[lp] 1. Otwieramy Nowy dokument o wymiarach 1200x1200px. Tło pozostawiamy białe.

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

[lp] 2. Kolejny krok to odpowiednie ustawienie prowadnic - pomogą nam one w tworzeniu poszczególnych części szablonu. Zatem klikamy kolejno: Obraz -> Prowadnice -> Nowa prowadnica. Ustawienia jak na obrazkach.

(http://www.gimpuj.info/gallery/thumb_26277_11_09_09_8_55_24.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=48502)(http://www.gimpuj.info/gallery/thumb_26277_11_09_09_8_53_31.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=48501)

[lp] 3. Tworzymy teraz tzw. header.
Tworzymy nową przeźroczystą warstwę o nazwie header1. Na niej przy użyciu Zaznaczeniem prostokątnego <zaznaczenie-prostokatne> [R]od góry zaznaczamy prostokąt na całą długość szablonu i szerokość 43px.
Kolor pierwszoplanowy ustawiamy na #303e41, a kolor tła na #5e7377. Wybieramy narzędzie Gradient <gradient> [L] i przeciągamy z dołu do góry. (obrazek 2a)

Warstwę dublikujemy i zmieniamy nazwę na header2. Od prawej prowadnicy za pomocą Zaznaczenia prostokątnego zaznaczamy pasek o długości 43px i szerokości ok. 220px. Następnie: Zaznaczenie -> Zaokrąglij wpisujemy 7 i potwierdzamy, później Zaznaczenie -> Odwróć i czyścimy zaznaczenie (Zaznaczenie -> Nic [Del]).

 

Wyśrodkowany kolejny obrazek


[lp] 4.
[lp] 5. Kolejny opisany punkt. I tak dalej, i tak dalej... Aż do ostatniego.

Wyśrodkowany obrazek z efektem końcowym

Teraz pobieramy kanał alfa z warstwy (Warstwa -> PPM -> Kanał alfa na zaznaczenie) i Czyścimy [DEL]. Kolor pierwszoplanowy ustawiamy na #303e41, a kolor tła na #5e7377. Wybieramy narzędzie Gradient <gradient> [L] i przeciągamy z dołu do góry.
[lp] Koniec



Znowu tekst autora. Jego uwagi, wskazówki lub inne.

Zakończenie i pożegnanie. Zazwyczaj autorzy kończą tutorial czymś w stylu "Miłego GIMPowania. :)" itp.



Następnie: Zaznaczenie -> Zaokrąglenie o wartości 7 i wypełniamy Wypełnienie kubełkiem kolorem #000000. Czyścimy zaznaczenie Zaznaczenie -> Nic [Ctr+Shift+A].
Zaokrąglone rogi u góry wypełniamy również kolorem czarnym.  



Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 29.08.2009, 19:30:08
Dodałem mojego outa, mowcie co poprawic. Podczas pisania tuta sie poprawi ;) Wg. mnie to za duze zrobilem "Call us now" chodzi mi o ten taki "box", zaokraglilem w headerze na gorze niechcacy rogi i za duzo tych kolek. Cos jeszcze?


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Pilej on 29.08.2009, 20:27:23
zwiększ kontrast między literami a tłem (chodzi o te niebieskie i szare teksty), przyciemnij je.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Wertyś on 10.09.2009, 21:05:21
Zdjęcia kolejnych kroków.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 11.09.2009, 07:51:45
Zdjęcia kolejnych kroków.

?

Za tuta sie wezme jak bede mial wiecej czasu. Ale do konca nastepnego miesiaca powinien byc gotowy.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Wertyś on 11.09.2009, 07:59:16
Szkoda, że tak długo. No trudno.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: INSEKT on 25.01.2010, 09:48:56
To co, kończysz czy kosz?


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 29.01.2010, 11:15:31
Zacząłem to skończe, laya zrobie od nowa, trochę go ulepsze. Za 2 tygodnie mam ferie, więc może wtedy skończe :)


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Adarn on 28.06.2010, 09:34:30
Tak się zapytam... Nesq, pamiętasz jeszcze o tym tutorialu?


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Dropson on 28.06.2010, 10:01:52
A szkoda bo jeden z lepszych tutoriali na webdesign a tych jest jak na lekarstwo, wszyscy męczą te [ciach] sygnaturki.

@up - spójrz na datę, może lepiej napisałbys PM?

// Danyeru: Za dużo sobie pozwalasz.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 09.07.2010, 19:14:08
W sumie mógłbym skończyć, ale nie ma to sensu. Szablon jest po prostu słaby i nie wiem czy warto pisać tutka na tak denną pracę.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Adarn on 09.07.2010, 19:17:40
To prosilibyśmy, żebyś napisał tutorial na jedną z twoich dobrych prac (tych nie brakuje).


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 09.07.2010, 20:11:46
Którą byście chcieli?


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Adarn on 09.07.2010, 20:16:12
Ja bym był za tym: http://www.gimpuj.info/index.php?action=gallery;sa=view;id=65394


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Skwarek on 09.07.2010, 20:19:01
Mi się podobają te laye:
 [lp] (http://www.gimpuj.info/gallery/thumb_26277_03_01_10_7_14_50.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=55981)
 [lp] (http://www.gimpuj.info/gallery/thumb_26277_10_04_10_5_27_20.png) (http://www.gimpuj.info/index.php?action=gallery;sa=view;id=62358)

Ale ten co dał Adarn też może być ;).


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Terrqge on 09.07.2010, 20:24:13
IMO robienie tutoriali na layouty jest bez sensu, tu ważniejsza jest teoria, jak chcesz typowo tutorial na layout to przerób tutorial do Photoshopa bo obrazkach, nie opłaca się robić tutów do Gimpa.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Wertyś on 09.07.2010, 21:20:33
Ale niektórych elementów można się nauczyć z tutoriala. Wg mnie tutorial layout krok po kroku z dodatkiem teorii mógłby się przydać.

PS: Ja byłbym za Akademią biznesu.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Terrqge on 09.07.2010, 21:23:45
Cytuj
Ale niektórych elementów można się nauczyć z tutoriala.

Masz do tego "Projektowanie detali w Webdeisgnie", tylko INSEKT jakby trochę to zaniedbał.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 10.07.2010, 11:54:49
Hmm.. Jakbym miał robić tuta na duży projekt typu Akademia Biznesu, to tut wyglądałby jak ten: http://www.gimpuj.info/index.php/topic,6949.0.html
Nie dam rady do każdego kroku dawać screena.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Wertyś on 12.07.2010, 10:33:17
Ale pamiętaj, że niektóre elementy są do siebie bardzo podobne, więc wystarczyłoby opisać jeden i to by powinno wystarczyć. Tak sama o logu nie musiałbyś się zbytnio rozpisywać, w końcu wielu efektów w nim nie zastosowałeś. Tekstu uczyć też nie trzeba, wystarczy wspomnieć, żeby zrobić go 11px, z hintingiem, bez wygładzania i załapią o co chodzi.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: INSEKT on 12.07.2010, 22:23:47
Ale pamiętaj, że niektóre elementy są do siebie bardzo podobne, więc wystarczyłoby opisać jeden i to by powinno wystarczyć.

Właśnie. Poza tym po wiele efektów można podawać odnośniki.
Dobrze by było mieć jeden tutorial na szablon.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 13.07.2010, 10:06:18
No to na który szablon zrobić tuta?


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: INSEKT on 13.07.2010, 13:22:16
To już niech sobie chłopaki wybiorą.

Może zgłoście propozycje, postawimy głosowanie.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Typhon on 13.07.2010, 20:56:31
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=55981 :1
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=65394 :0
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=67309 :0
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=62358 :0
http://www.gimpuj.info/index.php?action=gallery;sa=view;id=63083 :0

Te chyba tylko w grę wchodzą, jeżeli ktoś wolałby inny, niech mówi, dopiszę. Ja jestem za samolocikiem.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: agape on 13.07.2010, 21:24:42
Profil i portfolio odpadają, dentylion w sumie zlecenie, ale może być.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Terrqge on 13.07.2010, 21:35:12
Wg. tak jak wcześniej wspomniałem tutorial praktyczny nie jest najlepszym pomysłem, ale jak już to mógłbyś zrobić na szpital.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Typhon on 13.07.2010, 22:03:10
Przyda się na przykład niektórym. Teoretycznie może wszystko opisać, praktycznie ten ktoś może nie umieć tego wykonać.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Wertyś on 26.07.2010, 20:32:10
Ja jestem dalej za Akademią Biznesu. Jest ciekawszy od pozostałych.


Tytuł: Odp: Business Layout
Wiadomość wysłana przez: Mordrag122 on 04.11.2010, 18:16:27
Ja byłbym jak najbardziej za napisaniem tutoriala teoretycznego dotyczącego takich rzeczy jak:
-topografia,
-kolorystyka,
-odbiór przekazu wizualnego,
-odpowiedni dobór nazwy i treści.
Myślę, że taki tutorial dużo bardziej przyda się młodym webdesignerom :).

Albo jakiś spis z trendami panującymi aktualnie w webdesignie :).

PS. To tylko moje osobiste sugestie i nie każdy musi się z nim zgadzać.