Artykuły:

  • data publikacji: 08.06.2009

    Full of colours

    kategoria: Webdesign autor: sylwus

    Full of colours

    W dzisiejszym artykule przedstawię jak stworzyć prosty i kolorowy design. Zapraszam.

    Tło

    Zaczynamy od tła:

    Full of colours

    • Layer -> Layer Style -> Gradient Overlay (#c7c7c7, #ebebeb)

      Full of colours

    • Color (#f5ca11)
    • Layer -> Layer Style -> Gradient Overlay (#158cae, #086a87)
    • Color (#076581)

    Top

    Mamy tło. Czas zatem na top. W tym przypadku tylko czcionka o odpowiednich parametrach.
    Font: Arista 2.0 Alternate, 60 px, Sharp, Layer -> Layer Style -> Bevel and Emboss

    Full of colours

    Menu

    Aby stworzyć menu takie jak w powyższym projekcie:

    1. Tworzymy prostokąt o dowolnych wymiarach

      Full of colours

    2. Wciskamy Ctrl + T i obracamy obiekt o -63 stopnie

      Full of colours

    3. Duplikujemy warstwę. ( Layer-> Duplicate Layer )
    4. Wybieramy z przybornika Rectangular Marquee Tool i zaznaczamy tak jak na rysunku, po czym wciskamy Delete, aby pozbyć się zaznaczonej części

      Full of colours

    5. Następnie zaznaczamy pozostawiony element, Ctrl + T, naciskamy prawy klawisz myszy i wybieramy Flip Vertical

      Full of colours

    6. Powracamy do naszego prostokąta. Wybieramy kolor (Layer -> Layer Style -> Gradient Overlay)

      Full of colours

    7. Za pomocą zaznaczenia usuwamy zbędny obszar

      Full of colours

    8. Następnym krokiem jest utworzenie gradientu na trójkącie (Layer -> Layer Style -> Gradient Overlay) Wybieramy ten sam kolor tylko odwrotne mieszanie!

      Full of colours

    9. Duplikujemy warstwę i rozmywamy ją zmieniając wcześniej jej kolor na czarny i porządkując warstwy, Filter -> Blur -> Gaussian Blur, 5 pixels

      Full of colours

    10. Zaznaczamy niepotrzebny obszar w sposób widoczny na rysunku. Ważne, aby Feather ustawić na 10 px i wciskamy Delete.

      Full of colours

    11. Zmieniamy widoczność warstwy na 60 %

      Full of colours

    12. Dodajemy napis. Czcionka: Arista 2.0, 20 px, Sharp i obracamy tak by pasowała do buttony.
    13. Inne kolory tworzymy analogicznie.

    Content

    1. Tworzymy prostokąt w kolorze: #2ea6ca
    2. I drugi, tej samej szerokości ale znacznie niższy, w tym samym kolorze

      Full of colours

    3. Zajmijmy się mniejszym prostokątem. Layer -> Layer Style -> Gradient Overlay (#076581, #2ca2c6)

      Full of colours

      i przezroczystość : 20 %

      Full of colours

    4. Tworzymy kolejny prostokąt, również używając gradientów. Dodajemy zdjęcie i tekst

      Full of colours

    5. Następnie tworzymy niewielki kwadrat. Ustawiamy ramkę 4 pixelową

      Full of colours

      oraz ustawiamy gradient (Style: Radial)

      Full of colours

    6. Dodajemy napis "01". font: Arista 2.0
    7. Drugą część tworzymy analogicznie.
    8. Możemy dodać także poziome kreski, np. powtarzając znak pauzy ('-') czcionką Arial.

    Stopka

    Na koniec pracy podpisujemy swoje dzieło.

    Ostatecznie praca powinna wygląda następująco:

    Full of colours

    Sylwia Bartyzel, 2009
    www.ForFuture.pl
    źródło : zdjęcia pochodzą z sxc.hu

    Udostępnij ten artykuł:
    • Print
    • Digg
    • del.icio.us
    • Facebook
    • Mixx
    • Google Bookmarks
    • Gwar
    • RSS
    • Technorati
    • Twitter
    • Wykop

  • This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

    12 Responses to “Full of colours”

    1. Creatflu pisze:

      W miarę ciekawy tutorial, aczkolwiek moim zdaniem dla początkujących, którzy już coś umieją. Podoba mi się efekt końcowy, ale zmieniłbym trochę menu.

      Pozdrawiam :)

    2. agressiva pisze:

      Mi osobiście podoba się jedynie kolor tła pod stroną, który niestety zlewa się za bardzo z bardzo podobnym odcieniem w treści,
      poza tym nie przypadł mi do gustu napis “ful of colours”.

    3. pafeu pisze:

      Szary w topie nie pasuje do menu. Reszta git. ;-)

    4. misie pisze:

      Ten layout ssie.

    5. Marta pisze:

      Tutorial jest dobrze zrobiony, ale design chyba troszke za prosty jak na dzisiejsze wymagania. Nie wiem kto by to “kupil”. Jednak pomysl z tymi karteczkami na gorze mi sie podoba. :)

      • JaRo pisze:

        Takie tutki są dla początkujących ‘grafików’, więc i grafika nie musi być wypaśna :) Brawo dla autorki.

      • agressiva pisze:

        Marta:
        Biorąc pod uwagę, że wiele ludzi / firm / etc ma jeszcze gorsze strony niż możemy to sobie wyobrazic to sądze, że ta wersja wcale nie jest taka zła,
        a na pokazówkę zostosowania narzędzi w sam raz.

        Autorka tutka, czyli Sylwia prywatnie projektuje całkiem fajne rzeczy. Tylko szkoda, że w razie potrzeby tutaj się nie odzywa.

    6. pafeu pisze:

      Czas zrobić coś lepszego, jakby nie było, żadna rewelacja, spróbuję kiedy coś dla was wyskrobać, btw. Sylwia good job ;-)

    7. Kuba pisze:

      Moim zdaniem w dziale design nie powinny być przedstawiane krok po kroku jak zrobić stronę, bo to nie nauczy projektowania stron. Wolałbym ujrzeć bardziej ogólne porady (kiedyś chyba widziałem tutaj coś w stylu 10 grzechów głównych młodego webdesignera), coś o kompozycji, o spójności etc.

    8. Siostra Nocy pisze:

      Kuba, nie zgadzam się z Tobą. Jeśli ktoś jest “ciemny” i dopiero zaczyna, z czym będzie mu łatwiej – tutorialem krok po kroku czy z ogólnymi poradami? Trzeba tworzyć samouczki dla tych początkujących, i dla tych zaawansowanych, nie można się zamykać tylko w jednej “formie”.

      Poza tym niektóre efekty trzeba rozpisać, by ludzie wiedzieli o co chodzi. Nie wszystko da się ująć w skrócie i ogóle.

    9. Arek pisze:

      Świetny artykuł i bardzo fajny efekt ;-)

    Leave a Reply

Komentarze

Kategorie

Top 10

  • CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
  • Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
  • Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
  • Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
  • Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
  • Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
  • Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
  • Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
  • Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
  • Skrypty client-side
  • Skrypty server-side
  • Tutoriale
  • Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
  • Wieczór z Open Source
  • Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
  • Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
  • XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej