Web Design Imagini

În cele din urmă încep ceea ce este de a proiecta un site web.

Deşi nu suntem încă un web design, dacă nu vom vedea aşa cum am ar fi de a crea un design, cu imagini pe care le servesc drept decor.

Primul lucru pe care il facem este într-un program de grafica, cum ar fi focuri de artificii, Photoshop sau în cazul nostru, în mod evident, Paint Shop Pro, de a crea o imagine aşa cum ne dorim.

Dar noi îl vom împărţi?

Primul lucru pe care il facem este să creaţi un folder nou pe site-ul de vis webimagenes numim, de obicei, le-am păstra în aceeaşi imagine avem deja. Dar acum este mai bine să nu ne confunda, sau bine, tot ceea ce-l vrei?

Acum, pe PSP, vom crea o nouă imagine, dimensiuni, între 400/400 sau 600/600 px, acest lucru va depinde de cât de mari vrem Corneş sau colţuri, de a crea un alt strat şi margini:

1

Format de magazin, în orice caz, se întâmplă în valoare de PSP? midiseño.psp exemplu, o dată avem de design în acelaşi PSP se va folosi un instrument care ar putea să nu ştie că există, Ghiduri:

Ghiduri

* Notă: Ghidul tau sunt linii orizontale sau verticale, care să trageţi pe imagine şi să le utilizeze pentru a localiza obiecte sau accident vascular cerebral alinierea pensulei. Noi le-a pus în locuri care le dorim.

* Notă: a se vedea, de asemenea, activa regulile, sau nu se pot folosi liniile directoare ;)

Du-te la View / Ghidul tau:

2

Şi activat, un pic mai mici, activa Ghiduri magnetice:

3

Acum, vom creşte imagine pentru a vedea fie marginile şi cursorul mouse-ului, vom localiza exact de mai sus regula, putem vedea că acesta va deveni un +, apoi faceţi clic pe noi (cu butonul mouse-ului stânga) şi se întind la imagine, fără a elibera butonul mouse-ului:

4

Veţi vedea în regulă, la sfârşitul a Ghidului (Blue Line) este ca un mic ajutor? pentru a muta, odată ce au luat, plasaţi cursorul pe el, faceţi clic şi ţineţi apăsat butonul, să ia o parte sau alta.

Am îmbunătăţit foarte mult imaginea, perfect pentru a vedea exact unde l-am pune, dincolo de arcul de imagine, atunci când, ca pixelii sunt complet opace în roşu:

5

Acum, vom elimina ghidul de orizontală, dar la fel de sus în jos:

6

Şi puneţi-l pe celălalt capăt al arcului, în acelaşi mod, în cazul în care doar pixeli neclară:

7

Cu instrumentul Cut, se taie în jurul valorii de tabel sunt liniile directoare:

8

Aşa cum am activa optiunea de ghiduri magnetice, nu, deloc greu să dovedească faptul că instrumentul Curţii, perfect adaptat la liniile directoare, va fi aproape de la sine, dar am constatat că acest drept în ele:

9

Vom folosi instrumentul Cut şi salvaţi-l în format gif. numele va fi, esquina1.gif, de exemplu, sau esqizquierda.gif Acest lucru duce la voi, bine? Numai noi trebuie să aibă în vedere faptul că colţ va fi pe stânga, sau primul ... ca te place, dar ;)

Eu de obicei numesc img1, pur şi simplu pentru că am urmeze o secvenţă, următoarea va fi img2 şi partea de sus:

10

Eu iau un nou ghid, pe verticală şi a condus la dreapta, eu puneţi-o înapoi acolo unde pixelii nu mai sunt neclară:

11

orizontală, putem folosi ceea ce am creat mai devreme. Asta este, vom folosi acest fel, deoarece trebuie să aibă aceeaşi înălţime ca şi primul.

Deci, am tăiat unghiul şi salvaţi-l cu numele img3 Undo şi a luat un nou ghid orizontal pentru a crea imaginea care va fi partea dreaptă şi am pus ceva de genul asta:

12

Clip-l ca aceasta:

13

şi a salva ca img4 Să ne verifica, acum, în colţul din dreapta jos Ghidul tau:

14

am taiat:

15

în captură poate fi văzut ca acestea sunt toate regulile pe care le avem. Păstrăm în colţul din dreapta img5

Acum, am tăiat img6, care va fi partea de jos:

16

Anulare, chiar şi după tăiere o parte ;) Colţul din stânga, care este marcat cu ghidurile, aşa cum se arată în captura de mai sus:

17

salva ca img7 Anulare. Şi, în sfârşit, partea stângă:

18

a salva imaginea şi noi, cu liniile directoare, dacă au fost necesare în orice moment, întotdeauna reţinut în formatul. PSP. Acum putem închide PSP şi du-te la Dream.

Deschideţi un document nou, şi lega foaia de stil pe care am avut de la tutoriale anterioare. Inserarea unui tabel nou cu aceste opţiuni:

19

Aliniaţi Center din Property Inspector, suntem la prima celulă:

20

şi introduceţi prima imagine, adică img1:

21

în Property Inspector, am găsit exact aceeaşi lăţime şi ataşaţi-l la această celulă, dar alerta, din Property Inspector. Nu se întinde din dreptul celulei?

22

Acesta este modul în care va arăta, după introducerea celor patru imagini care formează colţurile:

23

În fiecare celulă în care sunt inserate, vom posta aceeasi latime ca imagine.

Vom introduce acum img2, img4, img6 şi img8, care formează părţi, dar noi nu va fi ca imagini, ci ca celule de fonduri.

24

Astfel, cele patru imagini pentru a le completa în părţi, şi să vedem acum tabelul:

25

Dacă acum suntem la centrul de celule, şi se introduce numărul Enter, celula se va întinde în partea de sus, se poate verifica, de asemenea, schimbarea% în lăţime, trebuie "să se întindă sau micşora uşor şi păstrează design- ;)

Ah, şi nu să vă spun că aceste imagini ar trebui să aibă propriile stiluri acum. De mai sus am introdus ca fundaluri, alte, pe care am pus ca imagini, indiferent pentru a trece testul de 3W. Deci, putem lăsa aşa cum este.

Vezi aici de exemplu

Ei bine, o fac cu calm dacă?, Încet, nu este la fel de dificil cum pare la prima vedere şi totuşi, uita-te la ceea ce se poate face urmând aceşti paşi. Sunt sigur că vom vedea minuni ;)

Răspunde