- Dołączył
- Czerwiec 5, 2010
- Posty
- 109
- Liczba reakcji
- 16
- Wiek
- 33
Ma?e wprowadzenie.
Artyku?, kt?ry w miar? przyst?pny spos?b, opisuje poszczeg?lne etapy tworzenia layoutu w Photoshopie oraz jego p??niejsz? obr?bk? (HTML + CSS), i uwaga - oto jest. cz 1
W poradniku umie?ci?em r?wnie? kilka og?lnych wskaz?wek pomocnych przy projektowaniu wygl?du witryny. Tutorial jest przeznaczony zar?wno dla ?rednio zaawansowanych, jak i pocz?tkuj?cych u?ytkownik?w, dlatego parafrazuj?c mistrza gatunku, w tek?cie by? mo?e natchniecie si? na oczywiste oczywisto?ci. Zacznijmy od efektu ko?cowego:
Krok 1. Po pierwsze potrzebny jest nam pomys?. W poszukiwaniu inspiracji odwiedzamy takie serwisy, jak: DeviantART, Web Creme czy CSS Mania
Krok 2. Dalej si?gamy po d?ugopis lub o??wek i przelewamy nasze wszystkie pomys?y na papier, co pozwoli nam na dokonanie wst?pnej selekcji, dzi?ki kt?rej zaoszcz?dzimy mn?stwo czasu i jeszcze wi?cej nerw?w.
Krok 3. Kolejnym krokiem jest dobranie odpowiedniej kolorystyki. W tym celu korzystamy z kreator?w (np. ColorBlender), b?d? si?gamy po gotowe palety barw opublikowane na ?amach COLOURlovers[/URL] czy [URL="http://kuler.adobe.com/#"]Kulera.
Krok 4. Pora przygotowa? t?o dla naszego szablonu. Do?? ciekawy zbi?r tekstur oferuje na przyk?ad serwis Amazing Textures. Po wybraniu odpowiedniego zdj?cia, najwy?szy czas odpali? Photoshopa i nieco je obrobi?.
Krok 5. Tworzymy nowy dokument o wymiarach 778 na 900 pikseli z prze?roczystym t?em.
Krok 6. Wype?niamy warstw? dowolnym kolorem (G). W oknie Blending Options (klikamy prawym przyciskiem myszy na aktualnej warstwie i wskazujemy polecenie Blending Options) zaznaczamy sekcj? Pattern Overlay i z listy wybieramy nasz ?wie?o zdefiniowany pattern.
Krok 7. Rysujemy prostok?t (U) z zaokr?glonymi rogami (Radius: 10 px, Fixed Size: 758x650 px, Snap to Pixels). Figur? centrujemy, oddalamy od g?rnej kraw?dzi o jakie? 175 px i przekszta?camy na obiekt typu rastrowego (klikamy na nim prawym przyciskiem myszy w panelu Warstw i z menu kontekstowego wybieramy polecenie Rasterize Layer).
Krok 8. Za pomoc? narz?dzia selekcji odmierzamy od prawej kraw?dzi 210 pikseli, tak aby uprzednio stworzona figura znalaz?a si? w obr?bie zaznaczenia na ca?ej swojej wysoko?ci. Nast?pnie klikamy na zaznaczonym obszarze prawym klawiszem i wybieramy opcj? Layer via Cut. Innymi s?owy odcinamy panel boczny od kontenera na tre?? o szeroko?ci 200 px
Krok 9. Zaznaczamy dopiero co utworzon? warstw? i analogicznie do wcze?niejszego punktu odcinamy od figury pasek o szeroko?ci 196 pikseli. W ten oto spos?b otrzymali?my trzy paski o szeroko?ci 558, 4 oraz 196 pikseli.
Krok 10. Najcie?szy pasek wype?niamy kolorem #d6c7b9 (Blending Options > Color Overlay), szerszy #ebe2d9. Nazw? warstwy z najszerszym kontenerem zmieniamy na "content".
http://www.bankfotek.pl/thumb/661616.jpeg[/img]
Krok 11. Z wci?ni?tym klawiszem Ctrl klikamy lewym przyciskiem myszy na miniatur? warstwy "content". Z menu wybieramy polecenie Select > Modify > Contract i warto?? ustalamy na 2 piksele. G?rn? cze?? selekcji wype?niamy gradientem liniowym (kolor #eeeeee do prze?roczysto?ci).
Krok 12. Tworzymy now? warstw? o nazwie "search box” i za pomoc? prostok?tnej selekcji oraz wiaderka z farb? rysujemy prostok?t o wymiarach 210 na 125 pikseli. Dalej z paska narz?dziowego wybieramy lasso (L) i wed?ug poni?szego wzoru zaznaczamy doln? cze?? czworok?ta (Feather 0, wy??czony Anti-alias), a nast?pnie usuwamy selekcj?. Powsta?? figur? obracamy (Ctrl + T) o jakie? 3 - 3.5 stopnia i pozycjonujemy, tak aby nie dotyka?a ona prawej kraw?dzi dokumentu (1 piksel odst?pu wystarczy).
Krok 13. Potrzebujemy teraz zdj?cie, przedstawiaj?ce pomi?t? kartk? papieru.
Krok 14. Duplikujemy warstw? "search box" i przeci?gamy j? pod orygina? w panelu Warstw. Obiekt wype?niamy czarnym kolorem, obracamy o oko?o 3.5 stopnia i przesuwamy o 7 pikseli w d??. Aplikujemy filtr Gaussian Blur (Filter > Blur) o warto?ci 2.5 px. Opacity wartswy ustalamy na 45%.
Krok 15. Ponownie z wci?ni?tym klawiszem Ctrl, klikamy lewym przyciskiem myszy na miniatur? warstwy "search box" i tworzymy nowy layer. Korzystaj?c z p?dzla (B) nanosimy lekkie zabrudzenia (w panelu Brushes aplikujemy poni?sze ustawienia).
Krok 16. Rysujemy spinacz o rozmiarach mniej wi?cej 25 na 79 pikseli (znajduje si? w Custom Shape Tool (U) w sekcji Objects). Wype?niamy go kolorem #d6c7b9 i obracamy o par? stopni, a w panelu Blending Options zaznaczamy sekcj? Bevel and Emboss (Size: 0). Dalej tworzymy nowy pusty layer i scalamy go ze spinaczem (zaznaczamy obie warstwy w panelu i wciskamy Ctrl + E). Potem odpowiednio przycinamy powsta?y obiekt.
Krok 17. Rysujemy lup? (Custom Shape, sekcja Web) o rozmiarze 36 na 29 pikseli. Nast?pnie zaznaczamy j?, zaraz potem usuwamy, a dalej tworzymy now? warstw? i "niedbale" wype?niamy selekcj? przy pomocy p?dzla (1 px, #486cbd).
Krok 18. Dodajemy napis "Szukaj". Odr?czn? czcionk?, niezb?dn? do wykonania projektu pobieramy ze strony Dafont.com.
Krok 19. Korzystaj?c z p?dzla (2 px, #486cbd) rysujemy strza?k?.
Krok 20. Tworzymy prostok?t z zaokr?glonymi rogami (Radius: 5px) o wymiarach 135 na 25 px. Za spraw? Blending Options wype?niamy go kolorem #f1efe5 i dodajemy obramowanie (Stroke, Size: 1px, Position: Inside, Color: #b9aca0).
Krok 21. W nowej warstwie o nazwie "note" rysujemy prostok?t (186x194 px). Dalej przycinamy jego doln? kraw?d?, wype?niamy kolorem #efecb5 i aplikujemy podane style.
Krok 22. Tworzymy kolejn? warstw?, nast?pnie zaznaczamy figur? utworzon? w poprzednim punkcie, zmniejszamy selekcj? o jeden piksel i analogicznie do punktu 15 nanosimy delikatne zabrudzenia. W dolnej cz??ci obiektu, korzystaj?c z gradientu liniowego (np. #dedbab do prze?roczysto?ci) tworzymy lekki cie?.
Krok 23. Pod warstw? "note" rysujemy czarny czworok?t i lekko go rozmazujemy (Gaussian Blur, 2.5 px).
Krok 24. Dodajemy now? warstw? i rysujemy na niej niewielki prostok?t. "Szarpiemy" boczne kraw?dzie figury (analogicznie do punktu 12), dalej obracamy j? o par? stopni i aplikujemy nast?puj?ce style w Blending Options: Opacity (30%), Color Overlay (#ffffff), Stroke (1px, Inside, #cacaca).
Krok 25. Nad g?rn? cz??ci? najwi?kszego kontenera dodajemy napis "Start" (Georgia, 16px). Tworzymy now? warstw?, przeci?gamy j? pod napis i rysujemy czworok?t. Nast?pnie go zaznaczamy, zmniejszamy selekcj? o dwa piksele i w nowej warstwie na jej ko?cach, gradientem liniowym (czarny do prze?roczysto?ci), rysujemy lekkie cienie. Opacity warstwy ustawiamy na oko?o 18%.
Krok 26. Ikon? RSS pobieramy ze strony Feed Icons. Wybieramy grafik? o wymiarach 32x32 px.
Krok 27. Pora zaj?? si? czcionkami.
Krok 28. Na koniec rysujemy strza?ki, pos?uguj?c si? ju? dobrze znan? nam technik? (Custom Shape, sekcja Arrows) i gotowe!
autor serwis. Wood.n
@down
jest autor? jest wi?c dzi?kuje dobranoc
Artyku?, kt?ry w miar? przyst?pny spos?b, opisuje poszczeg?lne etapy tworzenia layoutu w Photoshopie oraz jego p??niejsz? obr?bk? (HTML + CSS), i uwaga - oto jest. cz 1
W poradniku umie?ci?em r?wnie? kilka og?lnych wskaz?wek pomocnych przy projektowaniu wygl?du witryny. Tutorial jest przeznaczony zar?wno dla ?rednio zaawansowanych, jak i pocz?tkuj?cych u?ytkownik?w, dlatego parafrazuj?c mistrza gatunku, w tek?cie by? mo?e natchniecie si? na oczywiste oczywisto?ci. Zacznijmy od efektu ko?cowego:
Krok 1. Po pierwsze potrzebny jest nam pomys?. W poszukiwaniu inspiracji odwiedzamy takie serwisy, jak: DeviantART, Web Creme czy CSS Mania
Krok 2. Dalej si?gamy po d?ugopis lub o??wek i przelewamy nasze wszystkie pomys?y na papier, co pozwoli nam na dokonanie wst?pnej selekcji, dzi?ki kt?rej zaoszcz?dzimy mn?stwo czasu i jeszcze wi?cej nerw?w.
Krok 3. Kolejnym krokiem jest dobranie odpowiedniej kolorystyki. W tym celu korzystamy z kreator?w (np. ColorBlender), b?d? si?gamy po gotowe palety barw opublikowane na ?amach COLOURlovers[/URL] czy [URL="http://kuler.adobe.com/#"]Kulera.
Krok 4. Pora przygotowa? t?o dla naszego szablonu. Do?? ciekawy zbi?r tekstur oferuje na przyk?ad serwis Amazing Textures. Po wybraniu odpowiedniego zdj?cia, najwy?szy czas odpali? Photoshopa i nieco je obrobi?.
- Korzystaj?c z narz?dzia prostok?tnej selekcji (M) zaznaczamy cztery deski od prawej i tworzymy z nich nowy dokument.
- Za pomoc? patch tool (J) i od czasu do czasu clone stamp tool (S) usuwamy zanadto rzucaj?ce si? w oczy zabrudzenia oraz skazy.
- Narz?dziem dodge tool (O) likwidujemy ciemne plamy na drewnie (Exposure: 15 - 20%).
- Skr?tem Ctrl+U wywo?ujemy okno Hue/Saturation i zabarwiamy drewno na br?zowy kolor (tryb Colorize, Hue: 33, Saturation: 25, Lightness: -18).
- Kolor podkre?lamy przy u?yciu okna Levels (Ctrl + L) i aplikujemy nast?puj?ce warto?ci w sekcji Input Levels: 44, 0.79, 240.
- W dalszej kolejno?ci lekko wyostrzamy tekstur? (z menu g??wnego wybieramy Filter > Sharpen > Sharpen).
- Na koniec z naszego t?a definiujemy nowy pattern (Edit > Define Pattern).
Krok 5. Tworzymy nowy dokument o wymiarach 778 na 900 pikseli z prze?roczystym t?em.
Krok 6. Wype?niamy warstw? dowolnym kolorem (G). W oknie Blending Options (klikamy prawym przyciskiem myszy na aktualnej warstwie i wskazujemy polecenie Blending Options) zaznaczamy sekcj? Pattern Overlay i z listy wybieramy nasz ?wie?o zdefiniowany pattern.
Krok 7. Rysujemy prostok?t (U) z zaokr?glonymi rogami (Radius: 10 px, Fixed Size: 758x650 px, Snap to Pixels). Figur? centrujemy, oddalamy od g?rnej kraw?dzi o jakie? 175 px i przekszta?camy na obiekt typu rastrowego (klikamy na nim prawym przyciskiem myszy w panelu Warstw i z menu kontekstowego wybieramy polecenie Rasterize Layer).
Krok 8. Za pomoc? narz?dzia selekcji odmierzamy od prawej kraw?dzi 210 pikseli, tak aby uprzednio stworzona figura znalaz?a si? w obr?bie zaznaczenia na ca?ej swojej wysoko?ci. Nast?pnie klikamy na zaznaczonym obszarze prawym klawiszem i wybieramy opcj? Layer via Cut. Innymi s?owy odcinamy panel boczny od kontenera na tre?? o szeroko?ci 200 px
Krok 9. Zaznaczamy dopiero co utworzon? warstw? i analogicznie do wcze?niejszego punktu odcinamy od figury pasek o szeroko?ci 196 pikseli. W ten oto spos?b otrzymali?my trzy paski o szeroko?ci 558, 4 oraz 196 pikseli.
Krok 10. Najcie?szy pasek wype?niamy kolorem #d6c7b9 (Blending Options > Color Overlay), szerszy #ebe2d9. Nazw? warstwy z najszerszym kontenerem zmieniamy na "content".
http://www.bankfotek.pl/thumb/661616.jpeg[/img]
Krok 11. Z wci?ni?tym klawiszem Ctrl klikamy lewym przyciskiem myszy na miniatur? warstwy "content". Z menu wybieramy polecenie Select > Modify > Contract i warto?? ustalamy na 2 piksele. G?rn? cze?? selekcji wype?niamy gradientem liniowym (kolor #eeeeee do prze?roczysto?ci).
Krok 12. Tworzymy now? warstw? o nazwie "search box” i za pomoc? prostok?tnej selekcji oraz wiaderka z farb? rysujemy prostok?t o wymiarach 210 na 125 pikseli. Dalej z paska narz?dziowego wybieramy lasso (L) i wed?ug poni?szego wzoru zaznaczamy doln? cze?? czworok?ta (Feather 0, wy??czony Anti-alias), a nast?pnie usuwamy selekcj?. Powsta?? figur? obracamy (Ctrl + T) o jakie? 3 - 3.5 stopnia i pozycjonujemy, tak aby nie dotyka?a ona prawej kraw?dzi dokumentu (1 piksel odst?pu wystarczy).
Krok 13. Potrzebujemy teraz zdj?cie, przedstawiaj?ce pomi?t? kartk? papieru.
- Wklejamy obraz w nowej warstwie o nazwie "paper" (ca?kowicie przys?aniamy nim figur? utworzon? w punkcie 12).
- Z wci?ni?tym klawiszem Ctrl, klikamy lewym przyciskiem myszy na miniatur? warstwy "search box", odwracamy selekcj? (Shift + Ctrl + I) i zaznaczamy warstw? "paper". Z menu g??wnego wybieramy Layer > Layer Mask > Reveal All i wype?niamy selekcj? czarnym kolorem. Dzi?ki temu w razie czego, po od??czeniu maski od warstwy, b?dziemy mogli swobodnie przemieszcza? tekstur? w obr?bie danego kszta?tu. Opacity warstwy (w panelu Layers) ustalamy na 90%.
- Zawarto?? warstwy "search box" wype?niamy bia?ym kolorem (Blending Options).
Krok 14. Duplikujemy warstw? "search box" i przeci?gamy j? pod orygina? w panelu Warstw. Obiekt wype?niamy czarnym kolorem, obracamy o oko?o 3.5 stopnia i przesuwamy o 7 pikseli w d??. Aplikujemy filtr Gaussian Blur (Filter > Blur) o warto?ci 2.5 px. Opacity wartswy ustalamy na 45%.
Krok 15. Ponownie z wci?ni?tym klawiszem Ctrl, klikamy lewym przyciskiem myszy na miniatur? warstwy "search box" i tworzymy nowy layer. Korzystaj?c z p?dzla (B) nanosimy lekkie zabrudzenia (w panelu Brushes aplikujemy poni?sze ustawienia).
Krok 16. Rysujemy spinacz o rozmiarach mniej wi?cej 25 na 79 pikseli (znajduje si? w Custom Shape Tool (U) w sekcji Objects). Wype?niamy go kolorem #d6c7b9 i obracamy o par? stopni, a w panelu Blending Options zaznaczamy sekcj? Bevel and Emboss (Size: 0). Dalej tworzymy nowy pusty layer i scalamy go ze spinaczem (zaznaczamy obie warstwy w panelu i wciskamy Ctrl + E). Potem odpowiednio przycinamy powsta?y obiekt.
Krok 17. Rysujemy lup? (Custom Shape, sekcja Web) o rozmiarze 36 na 29 pikseli. Nast?pnie zaznaczamy j?, zaraz potem usuwamy, a dalej tworzymy now? warstw? i "niedbale" wype?niamy selekcj? przy pomocy p?dzla (1 px, #486cbd).
Krok 18. Dodajemy napis "Szukaj". Odr?czn? czcionk?, niezb?dn? do wykonania projektu pobieramy ze strony Dafont.com.
Krok 19. Korzystaj?c z p?dzla (2 px, #486cbd) rysujemy strza?k?.
Krok 20. Tworzymy prostok?t z zaokr?glonymi rogami (Radius: 5px) o wymiarach 135 na 25 px. Za spraw? Blending Options wype?niamy go kolorem #f1efe5 i dodajemy obramowanie (Stroke, Size: 1px, Position: Inside, Color: #b9aca0).
Krok 21. W nowej warstwie o nazwie "note" rysujemy prostok?t (186x194 px). Dalej przycinamy jego doln? kraw?d?, wype?niamy kolorem #efecb5 i aplikujemy podane style.
Krok 22. Tworzymy kolejn? warstw?, nast?pnie zaznaczamy figur? utworzon? w poprzednim punkcie, zmniejszamy selekcj? o jeden piksel i analogicznie do punktu 15 nanosimy delikatne zabrudzenia. W dolnej cz??ci obiektu, korzystaj?c z gradientu liniowego (np. #dedbab do prze?roczysto?ci) tworzymy lekki cie?.
Krok 23. Pod warstw? "note" rysujemy czarny czworok?t i lekko go rozmazujemy (Gaussian Blur, 2.5 px).
Krok 24. Dodajemy now? warstw? i rysujemy na niej niewielki prostok?t. "Szarpiemy" boczne kraw?dzie figury (analogicznie do punktu 12), dalej obracamy j? o par? stopni i aplikujemy nast?puj?ce style w Blending Options: Opacity (30%), Color Overlay (#ffffff), Stroke (1px, Inside, #cacaca).
Krok 25. Nad g?rn? cz??ci? najwi?kszego kontenera dodajemy napis "Start" (Georgia, 16px). Tworzymy now? warstw?, przeci?gamy j? pod napis i rysujemy czworok?t. Nast?pnie go zaznaczamy, zmniejszamy selekcj? o dwa piksele i w nowej warstwie na jej ko?cach, gradientem liniowym (czarny do prze?roczysto?ci), rysujemy lekkie cienie. Opacity warstwy ustawiamy na oko?o 18%.
Krok 26. Ikon? RSS pobieramy ze strony Feed Icons. Wybieramy grafik? o wymiarach 32x32 px.
- Zaznaczamy ikon?, a nast?pnie j? ukrywamy. W nowej warstwie "niedbale" wype?niamy selekcj? p?dzlem (1px, #e06a31).
- Na chwil? przywracamy domy?ln? ikon? i przy pomocy r??czki (Tolerance: 20%) zaznaczamy bia?y obszar na grafice. Selekcj? wype?niamy bia?? barw?, a grafik? ?r?d?ow? usuwamy.
Krok 27. Pora zaj?? si? czcionkami.
Krok 28. Na koniec rysujemy strza?ki, pos?uguj?c si? ju? dobrze znan? nam technik? (Custom Shape, sekcja Arrows) i gotowe!
autor serwis. Wood.n
@down
jest autor? jest wi?c dzi?kuje dobranoc
| Notka moderatorska: |
| Z?y dzia?. Przenosz? |
