Tutorial creare Photo Slider

Salut, la cererea lui A.Catalin de pe startut m-am decis să creez un tutorial pentru Photo Slider-ul făcut de mine ieri. Aşa că, să începem.

Previzualizare

Iniţial am început cu un fişier de 1280 x 1024, iar la sfârşit i-am dat crop pentru ca mi se părea că este mai bine aranjat în pagină.

Pasul 1

File > New(Ctrl + N) > Width: 1280, Height: 1024.

Pasul 2

Cu ajutorul Rounded Rectagular Tool cu un radius de 15 px am făcut un dreptunghi care ar trebui să arate aşa ceva:

Acest dreptunghi l-am redenumit back.

Pasul 3

Cu ajutorul Rectangle Tool am făcut un alt dreptunghi în centrul primului (de culoare #777777) şi l-am redenumit front.

Pasul 4

Cu ajutorul Pen Tool-ului am făcut acel efect din partea de sus (nu mai ţin minte cum se numeşte). După ce am făcut forma cu ajutorul Pen Tool-ului, am dat click dreapta > Fill Path > Use: Color – White şi i-am dat opacitatea de 7%. Această formă am redenumit-o Top iar pentru a scăpa de parţiile în exces am ţinut tasta ALT apasată şi am dat click între Top şi Front.

Pasul 5

Pentru a vedea cum arată o imaginile în slider am adăugat această imagine (asta am găsit-o în PC, puteţi folosi orice altă imagine doar să nu fie prea mică).

Pasul 6

Cu ajutorul Ellipse Tool am desenat un cerc de culoare #e5e3e4 şi i-am adăugat următoarele efecte:

  • Drop Shadow: Opacity:30%, Angle: 90 (bifat use global light), Distance: 2 px, Spread 0%, Size: 10 px
  • Inner Shadow: Opacity:75%, Angle: 90 (debifat use global light), Distance: 0 px, Spread 0%, Size: 5 px

Pasul 7

Cu ajutorul Custom Shape Tool am făcut acea săgeată pentru precedenta imagine.

Săgeata are următoarele efecte:

  • Drop Shadow: Color: White, Opacity:30%, Angle: 90 (bifat use global light), Distance: 1 px, Spread 0%, Size: 1 px
  • Inner Shadow: Opacity:60%, Angle: 90 (bifat use global light), Distance: 2 px, Spread 0%, Size: 4 px

Pasul 8

Pentru a crea şi cealaltă săgeată pentru următoarea imagine am duplicat grupul < l-am redenumit > şi i-am dat Merge Group pentru ca setările să rămână aceleaşi după ce o să rotesc şi mut imaginea în cealaltă parte.

Pasul 9

Cu ajutorul Rounded Rectagle Tool şi a Rectangle Tool am desenat acea căsuţă unde vor apărea butoanele pentru a schimba imaginile. Prima dată am format căsuţa cu colţurile rotunjite peste tot, iar după cu ajutorul Rectangle Tool ţinând apăsat tasta shift am făcut colţurile de jos ascuţite. Acea căsuţa are următoarele efecte:

  • Inner Shadow: Opacity:15%, Angle: 120 (debifat use global light), Distance: 1 px, Spread 0%, Size: 10 px
  • Bevel and Emboss: Deph: 100%, Direction: Up, Size: 5 px, Soften: 9 px, Angle: 90 (bifat use global light) & 30, Highlight mode: Screend, Color: White, Opacity: 0%, Shadow mode: Multiply, Color: Black, Opacity: 25%

Pasul 10

Cu un brush de 10 px (hardness 100%) am desenat primul buton pentru schimbare a imaginilor. Acest buton are următorul efect:

  • Inner Shadow: Opacity:60%, Angle: 90 (debifat use global light), Distance: 1 px, Spread 0%, Size: 1 px

Pasul 11

Pentru celelalte butoane (5 la număr, dar pot fi şi mai multe/mai puţine) am duplicat primul buton cu click dreapta > duplicate layer (ctrl+ j).

Am terminat  slider-ul propriu zis, dar pentru cei ce vor să continue mai sunt câteva detalii de făcut.

*Pasul 12

Cu ajutorul Rectangle Tool am desenat o mini-bară (culoare #1d1d1d) de lungimea layer-ului Front şi am aşezat-o în partea de sus şi i-am scăzut opacitatea la 48%.

Pentru a vedea cum arată acea bară când se încarcă am duplicat-o, i-am schimbat culoarea în
#037ad6 şi i-am micşorat lungimea la jumătate (poate fi şi mai mult-mai puţin, contează să vedem cum arată).

*Pasul 13

Cu ajutorul unui brush de culoare albă setat pe Overlay am adăugat efectul de “mouse over” (cum arată imaginea când treci cu mouse-ul peste).
Acest efect l-am adăugat la săgeţi (imaginea precedentă/următoare) şi la acele butoane cu ajutorul cărora poţi schimba imaginile manual.

*Pasul 14

În final pentru “a da bine ochiilor” am pus din nou imaginea din slider doar că de data aceasta am pus-o deasupra background-ului alb cu opacitate de 50%.

Sper că va plăcut tutorialul, iar dacă nu a-ţi înţeles vreun pas, aştept reply.

Autor: BGeo


Sursa
2012-07-06 20:53:13



Comenteaza





Ultimele 25 posturi adăugate

11:41:07NADIR (trad. al español*) —» Andrei LANGA. Blogul personal
09:04:22IMN FURNICARULUI —» Andrei LANGA. Blogul personal
07:00:26CONFLUENȚE PESTE MILENII —» Leo Butnaru
06:14:46DIALOG ȘI VERSURI DIN „HYPERION” —» Leo Butnaru
20:38:41More Control Over the Content You Share —» Soţii Bragaru
12:39:45My Condolences, You’re Now Running a Billion-Dollar Business —» Soţii Bragaru
22:11:39CIREȘE AMARE... —» Andrei LANGA. Blogul personal
21:52:32Expoziție de Mark Verlan la București —» Curaj.TV | Media alternativă
20:07:59Protest la aniversarea începutului invaziei ruse în Ucraina —» Curaj.TV | Media alternativă
20:01:16Despre Macarena feministă și impactul ei —» Curaj.TV | Media alternativă
19:26:39POEȚI STRĂINI TRADUȘI DIN LIMBA SPANIOLĂ ÎN ROMÂNĂ * —» Andrei LANGA. Blogul personal
01:04:15Poemul total versus Cartea de poezie —» Andrei LANGA. Blogul personal
19:31:49CIREȘE AMARE... —» Andrei LANGA. Blogul personal
08:58:42Fantastica viitorului apropiat…sau răvașe din cosmos pentru moldoveni (și ceilalți) —» blog cultural
22:42:35NOEMĂ —» Andrei LANGA. Blogul personal
15:44:19Stai si aștepți... —» Andrei LANGA. Blogul personal
18:03:42Hot Off the Press: New WordPress.com Themes for February 2024 —» costica
11:08:19Ministrul Culturii – în vizită la biblioteca din Negurenii Vechi —» BPR Ungheni's Blog
22:49:30IMN FURNICARULUI —» Andrei LANGA. Blogul personal
20:42:46Protest la ambasada rusă după omorîrea lui Navalny în închisoare —» Curaj.TV | Media alternativă
20:18:51Se spală podul Eroilor cu detergent dubios —» Curaj.TV | Media alternativă
20:15:29Vînătorul de bătrîni, investigație Recorder —» Curaj.TV | Media alternativă
19:01:19Muncitorii poluează chiar la poliția de sector —» Curaj.TV | Media alternativă
14:16:35IARNĂ —» Andrei LANGA. Blogul personal
06:09:59DIN POEZIA FRANCEZĂ A SEC. XX —» Leo Butnaru