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