[agape]

Business Layout
Tutorial

Oryginał: Oryginalny tutorial
Opracowanie: Nesq
Poziom trudności: średni

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


Zaczynamy

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

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.

3. Tworzymy teraz tzw. header.
Tworzymy nową przeźroczystą warstwę o nazwie header1. Na niej przy użyciu Zaznaczeniem prostokątnego [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 [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

4.
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 [L] i przeciągamy z dołu do góry.
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.  

[agape]

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?

[Pilej]

zwiększ kontrast między literami a tłem (chodzi o te niebieskie i szare teksty), przyciemnij je.

[Wertyś]

Zdjęcia kolejnych kroków.

[agape]

Zdjęcia kolejnych kroków.

?

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

[Wertyś]

Szkoda, że tak długo. No trudno.

[INSEKT]

To co, kończysz czy kosz?

[agape]

Zacząłem to skończe, laya zrobie od nowa, trochę go ulepsze. Za 2 tygodnie mam ferie, więc może wtedy skończe

[Adarn]

Tak się zapytam... Nesq, pamiętasz jeszcze o tym tutorialu?

[Dropson]

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.

[agape]

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

[Adarn]

To prosilibyśmy, żebyś napisał tutorial na jedną z twoich dobrych prac (tych nie brakuje).

[agape]

Którą byście chcieli?

[Adarn]

Ja bym był za tym: http://www.gimpuj.info/index.php?action=gallery;sa=view;id=65394

[Skwarek]

Mi się podobają te laye:
 
 

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

[Terrqge]

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.

[Wertyś]

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.

[Terrqge]

Ale niektórych elementów można się nauczyć z tutoriala.

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

[agape]

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.

[Wertyś]

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.

[INSEKT]

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.

[agape]

No to na który szablon zrobić tuta?

[INSEKT]

To już niech sobie chłopaki wybiorą.

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

[Typhon]

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.

[agape]

Profil i portfolio odpadają, dentylion w sumie zlecenie, ale może być.

[Terrqge]

Wg. tak jak wcześniej wspomniałem tutorial praktyczny nie jest najlepszym pomysłem, ale jak już to mógłbyś zrobić na szpital.

[Typhon]

Przyda się na przykład niektórym. Teoretycznie może wszystko opisać, praktycznie ten ktoś może nie umieć tego wykonać.

[Wertyś]

Ja jestem dalej za Akademią Biznesu. Jest ciekawszy od pozostałych.

[Mordrag122]

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