Lay w 10 krokach

Index » Kategoria: Tutoriale » Tagi: , , .

Na początek wypadałoby wiedzieć jak zbudowana ma być przyszła strona. Czy powinna mieć ustaloną szerokość czy też zajmować przestrzeń w zależności od rozdzielczości ekranu. Osobiście nie przepadam za zbyt szerokimi stronami zatem "tradycyjnie" pozostanę przy swoich sztywnych 760px. Stronę zaprojektowałem "pod WordPressa" (polecam). Niemniej jednak jej konstrukacja jest tak pomyślana, że może być wykorzystana w różny sposób. Do zaprojektowania strony użyję Photoshopa CE v. 7.0 PL.

1. Otwieramy nowy dokument w rozdzielczości 1000px X 1000px z białym tłem. Proponuję uaktywnić miarki (Widok/Miarki) oraz ustawić prowadnice na szerokość 760px. Jeśli projekt strony został wcześniej przemyślany (a powinien), ustawiamy prowadnice w miejscach kluczowych dla projektu czyli mniej więcej tak:

miniaturka

Prowadnice możemy wyłączać/włączać skrótem (Ctrl+H).

2. Za pomocą narzędzia "prostokąt zaokrąglony" z włączonym wygładzaniem, kryciem na 100% oraz promieniem zaokrąglenia 10px rysujemy układ podobny do przedstawionego na screenie. W pliku ĹşrĂłdłowym zauwaĹźysz, Ĺźe uĹźyłem koloru pomarańczowego ale tylko po to aby jak naprościej wykonać kilka wersji kolorystycznych strony. Trzymaj się prowadnic – nie będziesz miał problemu z "cięciem" 🙂

miniaturka

3. Na kolejnej warstwie, narzędziem "prostokąt zaokrąglony" z w/w parametrami, wewnątrz ciemnego elementu rysujemy białe pole, w którym zamieścimy treść strony czyli tzw. content.

miniaturka

4. Kopiujemy warstwę z ciemnymi elementami, przesuwamy ją pod oryginalną, przesuwamy o kilka pikseli – do prowadnicy oraz zmieniamy jej przeĹşroczystość (opacity) lub wybierając z menu Warstwa/Styl warstwy/NałoĹźenie koloru nadajemy jej nieco jaśniejszy kolor. Warstwa ta będzie "nibycieniem" leżącej nad nią.

miniaturka

5. Na kolejnych warstwach (dla wygodnej manipulacji stylem warstwy) nadajemy zaokrąglonym krawędziom projektu nieco ziarna (zajrzyj do ĹşrĂłdła – Zestaw warstw "podstawa" kolor czerwony, dwie pierwsze warstwy) – ustawienia stylu warstwy na screenie. Oczywiście rĂłwnie dobrze ten krok moĹźna sobie odpuścić ale z nim projekt wygląda nieco bardziej profesjonalnie.

miniaturka

6. Pora na fotkę pobraną z http://www.webdesign.org/web/free-stuff/photos/ w formacie png, ktĂłrą osadzamy w nagłówku/topie projektu. Fotkę podczyszczamy, podrasowujemy itd… czyli ogĂłlnie dopasowujemy do układu strony. Zaznaczamy warstwę z fotografią, tworzymy nową warstwę i wypełniamy ją kolorem czarnym. Następnie przesuwamy pod fotkę, przesuwamy lekko w prawo i dół oraz wybierając Filtr/Rozmycie/Rozmycie gaussowskie (np. 2piksele) tworzymy cień kobiety w topie.

miniaturka
miniaturka

7. Na oddzielnych warstwach (najlepiej w oddzielnym zestawie) tworzymy content czyli wypełniamy go treścią, linkami, fotkami itd. W tym punkcie należy pamiętać o ograniczeniach wynikających chociażby z potrzeb cms-a, filozofii css czy wymagań html-a. Projekt został przygotowany pod wordpressa zatem starałem dostosować się do jego wymagań.

miniaturka

8. Podobnie tworzymy box na fotki, linki i treść w stopce. Wypełniamy "content" tym czym mamy zamiar wypełnić stronę. Nie ma sensu tworzyć sond, kalendarzy, zegarków itp. jeśli nie mamy zamiaru z nich korzystać po "pocięciu" i opublikowaniu strony.

miniaturka

9. Do projektu dodajemy menu, które już w źródle strony zostanie utworzone jako lista nieuporządkowana "ostylowana" css-em.

miniaturka

10. A na koniec… wyszukiwarka i tytuł strony. Proste, ciemne, nieco zaokrąglone pole umieszczone tuĹź obok fotografii zostanie wykorzystane jako tło formularza (oczywiście stylizowanego css-em). Do utworzenia tytułu strony uĹźyłem popularnej czcionki Trebuchet MS z twardym wygładzaniem.

miniaturka

… i to juĹź koniec. Projekt czy tzw. layout został ukończony. Właściwie to moĹźna go wyeksportować do Adobe Image Ready i na podstawie utworzonych wcześniej prowadnic "pociąć" do html-a. Proste, prawda? Ale jak to zrobić aby było semantycznie, nowocześnie, zgodnie z trendami, wymaganiami xhtml-a i css, z wykorzystaniem elementĂłw pływających… O tym w następnym tutorialu 😉
I zupełnie na koniec. Aby nie ograniczać się tylko do bądź co bądź nieco zużytej już i zbyt popularnej fotki w topie poniżej zamieszczam kilka wariacji projektu i jak zwykle pliki źródłowe w formacie *.psd. Wszystkiego dobrego w Nowym Roku.

miniaturka
Plik źródłowy *.rar

miniaturka
Plik źródłowy *.rar

miniaturka
Plik źródłowy *.rar

miniaturka

Plik źródłowy *.rar


* * *

  • Napisał: zama — 05/01/2007 @ 18:56

    Tutek będzie jednak musi to trochę potrwać. Tymczasem niedługo na stronie pojawi się kolejny plik psd …

  • Napisał: kris — 05/01/2007 @ 18:29

    Proste, prawda? Ale jak to zrobić aby było semantycznie, nowocześnie, zgodnie z trendami, wymaganiami xhtml-a i css, z wykorzystaniem elementĂłw pływających… O tym w następnym tutorialu ;)…

    No ja czekam z niecierpliwoscia na kolejnego tutka 😀

  • Napisał: Andre — 14/05/2007 @ 19:27

    Kurcze, trochę czasu już minęło, a dalej drugiej części nie widać, a również czekam z niecierpliwością, szacunek dla autora

  • Napisał: presell — 06/12/2007 @ 19:34

    tak na marginesie – to samo moĹźna uzyskać w fireworks'ie i chyba nawet prościej.

  • Napisał: nujska — 08/07/2008 @ 01:25

    czegoś takiego właśnie potrzebowałam :)))

* pola wymagane

Linie i paragrafy automatyczne, adres e-mail nigdy nie widoczny.
Dozwolony HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> [code lang="css"][/code], [code lang="html"][/code]

Komentarze są moderowane. Spamowanie (reklamowanie innych stron, wpisy nie na temat itp.) komentarzy może spowodować zablokowanie IP komentującego.



 

tanie serwery www: timnet.pl

Webmark został zbudowany na silniku Wordpress
wpisy (rss)komentarze (rss)
design by zama 2008
Stat24

Ostatnie komentarze

admin
TOP