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 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ł: 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 :D

  • 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ł: 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=""> <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

  • Tani hosting

    Szukasz sprawdzonego hostingu www? B?dziesz m??g?? prowadzi? sw??j w??asny serwis lub reklamowa? swoje us??ugi. A do tego zaoszcz?dzi? p??ac?c niewielkie pieniadze za du??? przestrze?? dyskow?. Zapraszamy do zapoznania si? ofert? firmy hostingowej TimNet. Dzi?ki naszej wsp????pracy z firm? mamy do zaoferowania 25% bonifikat? na tani hosting w tej firmie. Wystarczy w polu kupon zni??kowy wpisa?: webmark.shost.pl. Kupon jest do wykorzystania przy aktywacji konta www Serwer Home Hosting PL lub Serwer Web Hosting PL.
  • Saizenmedia

  • Vladstudio

  • Spectab

    Spectab
  • Reset

    Poni??ej zamieszczam link przyk??adowego zapisu css resetuj?cego domy??lne parametry (dope??nienia, marginesy, wielko??? czcionki itp) poszczeg??lnych element??w wykorzystywanych do zbudowania strony. Autorem opracowania jest Eric Mayer
  • Mo??e co?? uaktualni??

    Ju?? ponad p???? roku min???o od ostatniego wpisu… Ale jestem ponownie z nowym (jak zwykle po d??ugiej przerwie) wygl?dem strony i zamiarem uaktualniania jej od czasu do czasu. Ju?? nied??ugo do pobrania udost?pni? poprzedni theme pod wordpressa i zupe??nie nowy projekt.
  • 'Go??y dzie??'

    Go??y dzie?? na mojej stronie trwa?? do??? kr??tko. Jako?? nie jestem przekonany do “obdzierania” strony ze sk??ry tylko po to, aby zobaczy? czy narz?dy i tkank? ma zdrow?. Wydaje mi si?, ??e zupe??nie inaczej mo??na popularyzowa? standardy sieciowe.
  • Wordpress 2.5

    A new version of Wordpress is available. Taki komunikat wita mnie w panelu administracyjnym ju?? od kilkudziesi?ciu godzin. Czas na zmiany. Nowy skrypt jest podobno warty dokonaniu apgrajdu. Zobaczymy. Wi?cej na oficjalnej stronie Wordpressa.
  • Wielkanoc

    Pogodnych, spokojnych, pe??nych nadziei i mi??o??ci ??wi?t Wielkanocnych ??yczy: admin

Ostatnie komentarze

admin
TOP