• Ogłoszenie:

Zrobienie i pocięcie layouta

Poradniki związane z tworzeniem i edycją grafiki.

Zrobienie i pocięcie layouta

Postprzez MarcepanowyPiesek 17 Cze 2007, 19:37

reklama
W tym tutorialu dowiecie się w jaki sposób tworzy się projekty stron internetowych
w Photoshopie. Jest to program wręcz stworzony do tego typu zadań. Okej zabieramy
się do pracy.



1) Tworzymy nowy plik o wymiarach 760/600 pikseli. Wypełniamy
go kolorem szarym. Następnie klikamy na wiadro i z górnego
paska narzędzi z rozwijanego menu pt. źródło wybieramy wzorek.
Nasz wzorek powinien wyglądac tak

Image

Nakładamy ten wzorek na nasze szare tło. Pwostanie dosyc ciekawy
efekt :

Image


2) Dobra przechodzimy dalej.Tworzymy nową warstwę
( Warstwa --> Nowa )Klikamy prawym klawiszem myszy na prostokąt
i wybieramy z rozwiniętej listy prostokąt zaokrąglony.

Image

Wybieramy kolor biały i tworzymy na naszym polu roboczym duży
zaokrąglony prostokąt.

Image


Ok teraz musimy dodac obrys , cien i gradient dla naszego prostokąta.
W tym celu klikamy na Warstwa --> Styl Warstwy -- > Obrys. Ustawmy
obrys na kolor biały o wielkości 2 piksele. Teraz zaznaczamy
zakładkę cień. Tam nie musimy nic zmieniac. Jeszcze jedną rzeczą
która musimy wykonac w tym oknie to gradient. Klikamy na nałożenie gradientu.
Zmieniamy kolor zgodnie z ustawieniami na dole (aby wyskoczyło nam
to okienko musimy klikac na ten czarno biały obrazek obok napisu "gradient"

Image

Jeżeli wybraliśmy już kolor to zaznaczamy w okienie gradintu opcję
"odwrotnosc". Klikamy ok. Teraz klikamy w górnym
menu na Warstwa --> Rasteryzacja --> Warstwa. Otrzymujemy
coś takiego:

Image

3) Aby kontynuowac naszą pracę musisz zapisac
te obrazki na dysku a następnie otworzyc je w photoshopie

http://images3.fotosik.pl/251/9d4be67d9bc4db36.jpg
http://www.photoshop.bee.pl/gfx/pc.png


4) Wklejamy komputer na obszar roboczy z naszym
szablonem i ustawiamy go w lewym górnym roku. Lekko go pomniejszamy (klikamy
na niego prawym klawiszem i wybieramy swobodnie przekształc.

Image

Następnie powielamy naszą warstwę . Z górnego menu wybieramy Edycja
--> Przekształc --> Odbij pionowo. Przesuwamy nasz powielony
obrazek pod ten oryginalny. Powinniśmy otrzymac cos takiego:

Image

Teraz klikamy na zaznaczenie prostokątne w górnym pasku narzędzi
w polu wtapianie wpisujemy 50 pikseli. Teraz
zaznaczamy od dołu nasz odwrócony komputer i klikamy Delete.
Powinniśmy otrzymac cos takiego:

Image

Zmniejszamy krycie tej warstwy na 60%



5) Z paska narzędzi klakamy prawym klawiszem na zaznaczenie
i z listy wybieramy zaznaczenie pojedyńczych rzędów. Zaznaczamy
pasek pomiędzy 2 komputerami i wypełniamy zaznaczenie kolorem białym. Obcinamy
po obu stronach tak aby linia nie wchodziła na szare tło. Powielamy naszą warstwę
z linią i przesuwamy ją pod oryginalną. Zmiejszamy krycie warstwy powielonej
na 30%. Otrzymujemy cos takiego:
Image

6) Wklejamy nasz obrazek z wieżowcami i umieszczamy
go w górnym prawym rogu.

Image


Następnie w okienku "warstwy" przechodzimy do warstwy
z naszym zaokrąglonym prostokątem. Wciskamy CTRL i trzymając klikamy
lewym klawiszem myszy na warstwe z prostokątem (przedostatnia warstwa). Jeżeli
wykonaliśmy tą czynnosc i otrzymalismy takie zaznaczenie:

Image

to klikając pawym klawiszem na pole robocze wybieramy z listy
Zaznacz odwrotnie
Image

otrzymujemy cos takiego:
Image

Dobra teraz przechodzimy do warstwy z naszym wieżowcem i klikamy
delete tak aby usunąc ten zbędny kanciasty narożnik. Przesuwamy
nasz wieżowiec o 2 piksele w dół i o 2 piksele w lewo tak aby odkryc obrys.

Image

Teraz znowu wybieramy z paska narzędzi zaznaczenie z wtapianiem
ustawionym na 50%. Zaznaczamy nasze wieżowce od dołu do poziomu
lini i usuwamy tak długo aż nic nie bedzie wychodzic poza linie.

Image

Z paska narzędzi klikamy prawym na lasso i z
listy wybieramy lasso wielokątne. Robimy takie zaznaczenie
i wciskamy delete

Image

7) Teraz zabieramy się do dodania napisów na
górze obok komputera. Dajemy tutaj np. nazwę naszej firmy + jakis slogan

Image

Możemy nadac napisom jakieś efekty w tym celu klikamy na Warstwa
- Styl warstwy. Ja dodałem biały obrys i cień
z odległością ustawioną na 1.

8) Klikamy prawym klawiszem na zaznaczenie
i z listy wybieramy zaznaczenie pojedynczych kolumn. Zaznaczenie
wstawiamy mniej więcej w tym miejscu i wypełniamy kolorem białym.

Image


następnie z paska narzędzi wybieramy zaznaczenie prostokątne z
wtapianiem ustawionym na 50%. Zaznaczamy górną
częsc paska az do poziomych lini i klikamy tyle razy delete
aż nie bedzie śladu po naszej lini w tym górnym odcinku. Fotos poniżej:

Image

9) Dodajemy jakieś menu po lewej stronie.

Image

10) Kolejny raz klikamy w pasku narzędzi na zaznaczenie
prostokątne i zaznaczamy następujący obszar

Image


Tworzymy nową warstwę. Następnie klikamy prawym klawiszem myszy
na wiadro i wybieramy z listy gradient. Wypełniamy
nasze zaznaczenie w następujący sposób. Zmniejszamy krycie tej warstwy do 70%.
Otrzymujemy coś takiego:
Image

11) Możemy dodac na nasz szablon odcięcia
(nożyk obok kadrowania). Jeżeli podzielimy nasz szablon odcięciami
to podczas zapisywania zostanie on "pokrojony" na takie kawałki jakie
zaznaczyliśmy:

Image
Image

Efakt końcowy:
Image

http://www.webphotoshop.pl
http://www.netgrafik.pl

AutorŁ mdmn
tutorial zamieszczony za zgoda autora

Pochwały przyznane za posta: 3
Ostatnio edytowany przez MarcepanowyPiesek, 17 Cze 2007, 23:16, edytowano w sumie 1 raz
Wyślę zaproszenia na LOCKERZ PM
Awatar użytkownika
MarcepanowyPiesek
~user
 
Posty: 555
Dołączenie: 29 Lis 2006, 17:54
Miejscowość: Turek
Pochwały: 23



Postprzez Z@K 17 Cze 2007, 20:29

Marcepanowypiesek napisał(a):Jeżeli nie mamcie takiego wzorka , to możecie go pobrac z naszej strony z działu
PLIKI --> Wzorki



pomijając fakt ze wszystkie tutki PONOC miały byc własnorecznie napisane, to juz chyba mozna było powycinac takiego typu zdania prawda??


wybaczcie za OT'a ale większosc Userów pracuje długo zeby napisac tutek, a kopia...NC
this is a war, and we're HempLobby soldiers.!
Awatar użytkownika
Z@K
~user
 
Posty: 2691
Dołączenie: 18 Sty 2006, 13:48
Miejscowość: Jelenia Góra
Pochwały: 127



Postprzez MarcepanowyPiesek 17 Cze 2007, 23:11

Tak ale został on zatwierdzony przez admina i mam zgode od twórcy na umieszczenie go... a to jedno to pominąłem
Wyślę zaproszenia na LOCKERZ PM
Awatar użytkownika
MarcepanowyPiesek
~user
 
Posty: 555
Dołączenie: 29 Lis 2006, 17:54
Miejscowość: Turek
Pochwały: 23



Postprzez fluid 18 Cze 2007, 06:49

Z@K


jezeli osoba chce aby mu usunac warna musi napisac tutek wlasnorecznie
tutaj nie chodzilo o usuniecie warna tylko o przyklejeiu tutka dla innych
wiec jest ok
Sprzedam zestaw perkusji do GUITAR HERO na x360 - chetni pisacna PW
Each EMO can suck my ballsack but one in particular...
NIE POMAGAM NA PW, CHCESZ POMOCY - PISZ NA FORUM W ODPOWIEDNIM TEMACIE
GalkaPL - nieważne jaki będzie twój nowy nick my ZAWSZE będziemy pamiętać własnie ten...
Awatar użytkownika
fluid
*mod
 
Posty: 14746
Dołączenie: 12 Gru 2004, 00:38
Miejscowość: Warszawa
Pochwały: 947



Postprzez pitersid 15 Wrz 2007, 21:07

Tutek mało szczegółowy. Zapisać plik finalny jako co?
Może to Twój urok... może to photoshop :-)
Awatar użytkownika
pitersid
~user
 
Posty: 581
Dołączenie: 12 Mar 2007, 20:11
Pochwały: 12



Postprzez raiylo 15 Wrz 2007, 21:18

pitersid napisał(a):Zapisać plik finalny jako co?


Najlepiej w formacie .psd, gdyz w kazdej chwili mozesz naniesc poprawki na swoj projekt.
Awatar użytkownika
raiylo
 
Posty: 436
Dołączenie: 11 Sie 2007, 14:37
Pochwały: 38



Postprzez pitersid 15 Wrz 2007, 21:21

No luz zawsze zapisuje w psd - ale jeśli to ma być layout to jak mam połączyć psd z plikiem w html'u? Nie powinno się jakoś generować do gif'ow czy cos w tym stylu?
Może to Twój urok... może to photoshop :-)
Awatar użytkownika
pitersid
~user
 
Posty: 581
Dołączenie: 12 Mar 2007, 20:11
Pochwały: 12



Postprzez raiylo 15 Wrz 2007, 21:24

pitersid napisał(a):No luz zawsze zapisuje w psd - ale jeśli to ma być layout to jak mam połączyć psd z plikiem w html'u? Nie powinno się jakoś generować do gif'ow czy cos w tym stylu?


Do tego sluzy juz ImageReady, dzieki niemu potniesz layout a co najwazniejsze skonwertujesz swoj layout do html. Jest to proces zautomatyzowany, wystarczy wybrac odpowiednio opcje z zakladki Plik->zapisz jako->twoj_lay.html
Awatar użytkownika
raiylo
 
Posty: 436
Dołączenie: 11 Sie 2007, 14:37
Pochwały: 38



Postprzez Okocza 15 Wrz 2007, 21:26

przechodzisz do Image ready i tam już tniesz sobie jak chcesz, potem zapisz zoptymalizowane i musi być zaznaczone "wszystkie odcięcia" i zapisujesz, poszukaj na forum bo sam miałem taki problem, mój temat o tym traktował.
eMachines E730G - Core i5-430M, 2GiB RAM, ATI Mobility Radeon HD5470, WD 320GiB; Cort Z-44,DR 0.09-0.42, Peavey Backstage
Mac OS X 10.7.4 Lion // Windows 7 Professional x64 // NIE POMAGAM NA PW/GG/E-MAIL
Image
"Moje Ego i Anima spotykają się i wymieniają przepisami na ciasteczka" - Maynard James Keenan
Awatar użytkownika
Okocza
~user
 
Posty: 8001
Dołączenie: 19 Mar 2006, 11:53
Pochwały: 406



Postprzez pitersid 15 Wrz 2007, 21:31

Spoko - dzieki za pomoc. Tylko jak w tytule tutka widze, ze uczy on zrobic layout to oczekuje, ze wlasnie tego layouta bede mogl uzyc. A tutaj poradnik urwal sie w momencie kiedy mamy plik graficzny. Sadze, ze to co dopisaliscie pomoze w przyszlosc innym...
Może to Twój urok... może to photoshop :-)
Awatar użytkownika
pitersid
~user
 
Posty: 581
Dołączenie: 12 Mar 2007, 20:11
Pochwały: 12



Postprzez eSpEY 10 Lis 2007, 12:08

jaki napisał(a):Do tego sluzy juz ImageReady, dzieki niemu potniesz layout a co najwazniejsze skonwertujesz swoj layout do html. Jest to proces zautomatyzowany, wystarczy wybrac odpowiednio opcje z zakladki Plik->zapisz jako->twoj_lay.html


NIE MA FORMATU HTML!?
W domu:AMD Athlon X4 640 | Asus m4a78lt | DDR3 4096MB 666Mhz | NVDIA GeForce GTS 450 | ATX 500W
W pracy:Intel Core i5-3470 | 2 x DDR4 4096MB 2133Mhz | Qyadro K600 1024MB | ATX 750W
Awatar użytkownika
eSpEY
 
Posty: 1340
Dołączenie: 04 Lut 2007, 12:24
Miejscowość: Olsztyn
Pochwały: 111



Postprzez TELEPATYCZNY 10 Lis 2007, 12:16

Plik> Zapisz zoptymalizowany jako ( Ctrl + Alt + Shift + S )
"Bóg stworzył człowieka, ponieważ rozczarował się małpą. Z dalszych eksperymentów zrezygnował. Należy stwierdzić, że Bóg musi być swym nowym tworem również rozczarowany - poprawki w stosunku do małpy są wręcz niezauważalne." MARK TWAIN
Awatar użytkownika
TELEPATYCZNY
~user
 
Posty: 1769
Dołączenie: 30 Sty 2006, 22:22
Miejscowość: Sosnowiec
Pochwały: 244



Postprzez eSpEY 10 Lis 2007, 12:31

thx
działa!"D

[ Dodano: Dzisiaj o 11:33 ]
ps. a nie lepiej samemu porobić ale jako tło tabeli?!
W domu:AMD Athlon X4 640 | Asus m4a78lt | DDR3 4096MB 666Mhz | NVDIA GeForce GTS 450 | ATX 500W
W pracy:Intel Core i5-3470 | 2 x DDR4 4096MB 2133Mhz | Qyadro K600 1024MB | ATX 750W
Awatar użytkownika
eSpEY
 
Posty: 1340
Dołączenie: 04 Lut 2007, 12:24
Miejscowość: Olsztyn
Pochwały: 111



Zrobienie i pocięcie layouta

Postprzez Mały22222 09 Sty 2009, 20:01

a mam takie pytanie jak mam menu i tam storna glowna forum historia lub tam inne itd... to cyz nie trzeba odciac kazdego oddzielnie?? np oddzielnie strona glowna oddzielnie forum itd..by pozniej jak sklejac w html by dodac do tego odnosniki..??
Awatar użytkownika
Mały22222
~user
 
Posty: 1425
Dołączenie: 30 Cze 2006, 10:04
Pochwały: 73




Powróć do Grafika

Kto jest na forum

Użytkownicy przeglądający to forum: Brak zarejestrowanych użytkowników oraz 2 gości