-
data publikacji: 08.06.2009
Full of colours
kategoria: Webdesign autor: sylwus
W dzisiejszym artykule przedstawię jak stworzyć prosty i kolorowy design. Zapraszam.
Tło
Zaczynamy od tła:
- Layer -> Layer Style -> Gradient Overlay (#c7c7c7, #ebebeb)
- 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
Menu
Aby stworzyć menu takie jak w powyższym projekcie:
- Tworzymy prostokąt o dowolnych wymiarach
- Wciskamy Ctrl + T i obracamy obiekt o -63 stopnie
- Duplikujemy warstwę. ( Layer-> Duplicate Layer )
- Wybieramy z przybornika Rectangular Marquee Tool i zaznaczamy tak jak na rysunku, po czym wciskamy Delete, aby pozbyć się zaznaczonej części
- Następnie zaznaczamy pozostawiony element, Ctrl + T, naciskamy prawy klawisz myszy i wybieramy Flip Vertical
- Powracamy do naszego prostokąta. Wybieramy kolor (Layer -> Layer Style -> Gradient Overlay)
- Za pomocą zaznaczenia usuwamy zbędny obszar
- Następnym krokiem jest utworzenie gradientu na trójkącie (Layer -> Layer Style -> Gradient Overlay) Wybieramy ten sam kolor tylko odwrotne mieszanie!
- Duplikujemy warstwę i rozmywamy ją zmieniając wcześniej jej kolor na czarny i porządkując warstwy, Filter -> Blur -> Gaussian Blur, 5 pixels
- Zaznaczamy niepotrzebny obszar w sposób widoczny na rysunku. Ważne, aby Feather ustawić na 10 px i wciskamy Delete.
- Zmieniamy widoczność warstwy na 60 %
- Dodajemy napis. Czcionka: Arista 2.0, 20 px, Sharp i obracamy tak by pasowała do buttony.
- Inne kolory tworzymy analogicznie.
Content
- Tworzymy prostokąt w kolorze: #2ea6ca
- I drugi, tej samej szerokości ale znacznie niższy, w tym samym kolorze
- Zajmijmy się mniejszym prostokątem. Layer -> Layer Style -> Gradient Overlay (#076581, #2ca2c6)
i przezroczystość : 20 %
- Tworzymy kolejny prostokąt, również używając gradientów. Dodajemy zdjęcie i tekst
- Następnie tworzymy niewielki kwadrat. Ustawiamy ramkę 4 pixelową
oraz ustawiamy gradient (Style: Radial)
- Dodajemy napis "01". font: Arista 2.0
- Drugą część tworzymy analogicznie.
- 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:
Sylwia Bartyzel, 2009
www.ForFuture.pl
źródło : zdjęcia pochodzą z sxc.hu - Layer -> Layer Style -> Gradient Overlay (#c7c7c7, #ebebeb)
-
Zobacz podobne wpisy:
-
12 Responses to “Full of colours”
Leave a Reply
Komentarze
Kategorie
Top 10
Wski: Cross Processing
Kallie Akinyooye: Krótko o… Wordpress 2.7
Agressiva: Jak za pomocą js poprawić wygląd formularzy
S.Wojnowski: Jak za pomocą js poprawić wygląd formularzy
Arek: Menu “wychodzące” zza strony
Giuseppe Heitner: Wstęp do programowania zorientowanego obiektowo w PHP5…
Kamil: 960 Grid System
Piotrek: Rozwijany panel z odrobiną słodyczy
Kuba: Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku
- 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
Polecane strony
- WordPress Theme from Scratch – Day 1: PSD
- 20 Tutorials For Creating HDR Images
- Ask the Expert – Using Wordpress to Build Large Scale Websites with Derek Herman
- Making an Interactive Picture with jQuery
- Create a Horizontal Scrolling Website
- 800 Most Wanted Free RSS Icons for Bloggers
- 45 Most Wanted Beautiful Free Hand Drawn Fonts
- Caffe-Break Themed Blog Layout Photoshop Tutorial
- Create a nature inspired layout in photoshop
- Coding a Web Design for Speed and Quality
- Beautiful Hand Drawn Websites | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials
- 40 Fresh Creative and Inspiring Photographs
- Wordpress portfolio layout | Grafpedia
- Simple Facial Photo Retouching | Grafpedia
- Create a beauty layout in 10 steps | Grafpedia
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
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”.
Szary w topie nie pasuje do menu. Reszta git.
Ten layout ssie.
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.
Takie tutki są dla początkujących ‘grafików’, więc i grafika nie musi być wypaśna
Brawo dla autorki.
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.
Czas zrobić coś lepszego, jakby nie było, żadna rewelacja, spróbuję kiedy coś dla was wyskrobać, btw. Sylwia good job
No to jedziesz
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.
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.
Świetny artykuł i bardzo fajny efekt