-
data publikacji: 01.10.2009
Rybka lubi pływać…
kategoria: Grafika autor: palmiak
Lato w pełni, słońce świeci... a rybka lubi pływać. W poniższym artykule zaprezentuję jak wykonać prosty i przejrzysty design o tematyce akwarystycznej. Zapraszam.
Tło
W tym przypadku tło wypełniają zdjęcia z serwisu iStockphoto.com. Zarówno fale jak i ryba odgrywają kluczową rolę na stronie.
Logo
Adres: moje-rybki.pl
font: Aronia StO, Bold, 39 px, Sharp, #03303d.Menu
Pierwszy elementem jest stworzenie poziomego paska u góry strony. Kolor : #198fda, wysokość ; 8 px. Kolejnym krokiem jest stworzenie przycisku. Tworzymy zatem prostokącik o proporcjach widocznym na projekcie. Ustawiamy gradient tak jak na screenie.
Aby dopełnić menu tworzymy kolejny prostokąt.
Ustawiamy odpowiedni gradient i przezroczystość.
Ostatnim elementem jest usunięcie niepotrzebnych rogów. Wybieramy Rectangular Marquee Tool (M) Feather ustawiamy na 10 px.
Następnie zaznaczamy obszar od jednego boku do drugiego, klikamy prawym klawiszem myszy na zaznaczeniu i wybierami Select Inverse. Wciskamy klawisz Delete dwukrotnie i niechciany obszar znika. Do dopełnienia menu dodajemy oczywiście napis. W tym przypadku font: Fontin Sans, regular, 18 px, Sharp. Pozostałą część przycisków tworzymy analogicznie.
Content
Na content składa się prostokąt w kolorze #fffff i ramce #ebebeb, 3px.
"Strona Główna": Arial, Regular, 11 px, None, #000000
"Rybka lubi pływać": Fontin Sans, Regular, 25 px, Sharp, #000000
Tekst przykładowy: Arial, Regular, 11 px, None, #000000Dział z linkami
- ikona z darmowych komponentów internetowych
- Napis 'Linki': Fontin Sans, Regular, 16 px, Sharp, #000000
- Tło: gradient, #f5f5f5 - #ffffff
- akwarium z zasobów iStockphoto.com. Dodatkowo można stworzyć cień akwarium. W tym celu wybieramy Eliptical Marquee Tool, tworzymy owal i wypełniamy go kolorem.
Następnie rozmywamy warstwę: Filter - Blur - Gaussian Blur - 5 px. Przezroczystość warstwy zmieniamy na 20 %.
- punktatory, wykonane ołówkiem, 1 px, #000000
- Linki: Arial, Regular, 11 px, None, #000000
Stopka
Podpis: Arial, Regular, 11 px, None, #ffffff
Aby wykonać odbicie pola tekstowego tworzymy prostokąt o tej samej szerokośc.
Tworzymy gradient : kolor pola tekstowego: #ffffff wraz z kolorem tła: #027393. Przezroczystość ustawiamy na 15%.
Efekt:
Dziękuję za uwagę.
Sylwia Bartyzel, 2009
www.forfuture.pl
sylwiabartyzel@forfuture.pl -
Zobacz podobne wpisy:
-
6 Responses to “Rybka lubi pływać…”
Leave a Reply
Komentarze
Kategorie
Top 10
Stan: Gravatar, czyli jak mieć globalnego avatara
JaRo: Halu!?
Adi: Halu!?
rokicza: Menu akordeonowe z odrobiną CSS3
Marcin Lewandowski: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
Agressiva: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
Marcin: Portfolio graficzne oparte o Wordpress przy użyciu Custom Fields
- 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.
- 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
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
Przypominamy o Konkursie Noworocznym
Wraz z nowym, 2010 rokiem ogłosiliśmy konkurs na tutorial o tematyce CMS-owej.
Mamy nadzieję, że jakieś prace zostaną nadesłane do końca terminu i znajdzie się zwycięzca w pierwszym naszym oficjalnym konkursie z nagrodami.
Zachęcamy wszystkich do spróbowania swoich sił.
Szczegóły dostępne są pod tym adresem: http://vivee.info/2010/01/01/konkurs-noworoczny/
Zareklamuj nas :)
Jako, że pojawiła się na vivee.info nowa skóra przygotowałam nasze firmowe banerki reklamowe. Osoby, które wyrażą chęć wsparcia nas reklamą u siebie na blogach lub innych serwisach mogą pobrać je poniżej. 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
Pomysl rewelacyjny. Wykonanie beznadziejne.
Nie każdy robi idealne projekty…
Poza tym to jest wzór, który interpretować można jak się żywnie podoba.
Design słaby no nic więcej tutaj nie mogę powiedzieć, stock popularny, jak i pomysł dość często używany. Jednakże biorąc pod uwagę kogoś kto dopiero zaczyna, tutorial dla niego pewnie i pomocny.
Lato w pełni… Taaa…
)
Design prosty, ci, którzy dłużej w tym siedzą nic z tego nie wyciągną, początkującym z pewnością się przyda. Doceniajmy tutoriale – tak niewiele ich powstaje.
Nie korzystałam nigdy z tutoriali na designy. Nie wiem, nie musiałam czytać od deski do deski jak coś zrobić…
Dla tych którzy potrzebują na pewno są przydatne, żałuję tylko, że sama w żaden sposób nie potrafię opisać jak i co robię w Photoshopie.
Ja też nigdy nie korzystałam z tutoriali. Jestem samoukiem w pełnym tego słowa znaczeniu – ale patrząc z perspektywy czasu wiem, że mogą okazać się bardzo pomocne dla tych, którzy dopiero zaczynają swoją przygodę z webdesignem.