Jak zrobić layout w Photoshopie, Programy graficzne - ebooki, kursy, tutoriale
[ Pobierz całość w formacie PDF ]
1. Przygotowanie tła do strony
W ciagu 8 lekcji przedstawie jak zbudować własną witrnę w oparciu o photoshop`a i
Imageready. Następnie zamierzam pokazać jak stworzyć efekt roll-over , pokroić obrazek i z
optymalizować go w imageready. Jeżeli to Wam, nie wystarczy, to stworzymy następnie
stronkę i wyeksporujemy ją do dreamweavera i przekształcimy ja w witrynę. Właśńie z tego
sposobu korzystałem do zbudowania tego serwisu.
Po pierwsze: musimy przygotować naszą domową stronkę po przez stworzenie tła
( background ) i wypełnienie go obrazkiem. Tutaj , każdy może użyć własnych jakie ma na
swoim komputerze.
Ten tutorial został opracowany na podstawie Colin Smith`s
Tworzymy nowe płótno :) o wymiarach 800x600 . Te wymiary są dobrym wymiarem na
stronkę, oczywiście mozemy użyć wiekszych rozmiarów jako rozmiar ekranu i wiekszonej
rozdzielczości. W tym przypadku użyłem 800x600, w ten sposób każdy monitor o niższej
rozdzielczości będzie mogł poprawnie wyświetlić tą stronkę . Przedtem używałem 640x480,
ale teraz dla kilku osób z tą rozdzielczością nie warto zaracać sobie nią głowy. To są właśnie
wyzwania sieci , zawsze są jakieś zmiany. ;P
Przeciągnij kilka (guides ) lini pomocniczych, by pomogły utrzymać wszystko na swoim
miejscu. Za nim tak naprawdę zajmiemy się projektowaniem chciałbym was zachęcić do
stworzenia własnego projektu i żebyście urzyli zasad jakie tu są przedstawione, a nie szli krok
po kroku kopiujac wszystko. Stwórzcie nowa warstwę. Dzięki temu będziemy mogli mieć
wiekszą swobodę działania. Teraz trzeba ustawić kolory niebieski
(#6699FF) i czarny . Kolory te bedą naszym gradientem ( ustawić na linear ) i wypełnić
warstwę layer 1. Czarny ma być pierwszo planowym kolorem niebieski zaś jako tło.
Przy wypełnianiu warstwy gradientem użyjcie
klawisza shift , by kolory rozchodziły się pionowo
Przy wypełnianiu warstwy gradientem użyć klawisza shift by kolory rozchodziły się
pionowo
Teraz otwórzcie w PS obrazek z samochodem
( lepiej dla was bedzie jak użyjecie własnego obrazka). Następnie zmieńcie jego rozmiary.
Teraz zamierzam zamienić nasz obrazek w tło. Kliknijcie na 2 ikonkę na waszej palecie
warstw by dodać maskę na warstwę. Wybierzcie paintbrush
(pędzel) o wielkości 100 px z mięka końcówką lub airbrush. Ustawcie(przeźroczystość
( opacity ) na poziomie jaki będzie dobry dla was.
Pierwszo planowy kolor ma być czarny ( maska warstwy ma być aktywna czyli kliknijcie na
nią ). Zacznijcie obmalowywać do okoła obrazek by jego brzegi stały sie przeźroczyste ( by
zanikły krawędzie). Jeżeli coś wam sie nie uda przełączcie na kolor biały i zamalujcie to co
wam nie wyszło.
Jeżeli malujecie na czarno maskę warstwy to po prostu ten obiekt zostaje
ukryty. Odcienie szarości dadzą efekt przeźroczystości.
Nastepnie przełącznie warstwę z obrazkiem na tryb screen i zminiejszcie przeźroczystość na
tyle by samochód był lekko widoczny. Ustawienia pozostawiam Wam . Ten obrazek jest
jednorodnie wypełniony tłem
2. Tworzenie elementów strony
Ten tutorial jest kontynuacja większego projektu .
Zajmniemy sie w nim pracą nad powstałym już tle ( patrz wczesniejszy tutorial ). Dodamy tu
grafikę potrzebną do przekształcenia tego obrazka w stronę internetową.
Po pierwsze wybierzmy ładna prostą czcionkę taką jak Futura , arial i piszemy słowo
CARWORLD . Sprawmy, by wygladała lepiej , zwiększmy ( spacing ) odstępy między
literami. Możecie to zrobić przez: - zaznaczenie tekstu - otworzenie type dialog box -
naciśnięcie kerning option ( odstępy miedzy znakami ) lub też set the tracking of the chracters
( AV a pod nia strzałka) następnie ctrl+t i obróćie napis o 90 stopni tak jak na rysunku.
Umieście
logo w lewym górnym rogu. Tutaj inwencje pozostawiam Wam . Możecie skorzystajcie z
innych tutoriali, by stworzyć własne logo. Utwórzmy kilka cieńkich lini. Do tego utwórzmy
nową warstwę, nazwijcię lines i przesuńcie ją na samą górę.
Wybierzcie vertical single pixel selection
tool przeciągnij narzedzie na prawo od tekstu i wypełnij białym kolorem , następnie
przeciągnija na lewo i znów wypełnij białym kolorem.
Chcemy,by linie zatrzymywały się w połowie loga. Zaznaczmy niechcianą część lini
(rectangle selection tool) i delete , pamietajmy by być na warstwie Lines.
Czas na pasek nacigacji. Zaznaczmy przestrzeń ograniczoną liniami pomocniczymi i
wypełnijmi ja kolorem niebieskim ( odcień pozostawiam wam ). Linie pomocnicze się
przydają, nie? Pasek ten i tak później trzeba będzie dostosować do użytej czcionki , więc nie
przejmujcie się jak wyszedł Wam za duży .
Nad "navbar" (pasek nawigacyjny) dodajmy jakiś slogan ja napisałem (AUTOMOBILE
CLUB PREMIERE) , napisany tym samym kolorem jakiego użylimy do stworzenia paska
nawigacyjnego (może być inny). Następnie dodajmy tekst na navbar kóry posłuży nam jako
link. Tutaj przedstawimy przykładowe nazwy Wy powinniście nadac im jakieś konkretne.
Najlepiej każdą nazwę tworzyć na osobnej warstwie, gdyż ma powstać rollover effect w
kolejnej części tego tutoriala.
Zobaczmy co stworzyliśmy do tej pory. Wyłączmy Guide
- linie pomocnicze ( ctrl+; lub view>show>guides )
Oto i mamy przygotowaną stronę . Chciałem przy tym zaznaczyć ,iż strona nie musi być
sklomplikowana by wywierała wrażenie. Tak naprawdę najlepsze projekty to proste rzeczy,
ale za to rozsądnie przemyślane.
W następnej sekcji bedziemy
używać styli warstw ( layer style ) by utworzyć efekt rollover. Nie będę tłumaczył dla czego
tak to się nazywa , jeżeli ktoś nie wie to sam zobaczy.
3. Przygotowanie efektu rollover
[ Pobierz całość w formacie PDF ]