Share
Sunt un mare fan al designului site-urilor foto-centrice? astfel încât astăzi sunt încântat să lansez un nou tutorial "complet al site-ului", orientat spre fotografi, ilustratori și alte reclame vizuale. În Ziua 1, voi fi proiectarea șablonului în Photoshop utilizând câteva trucuri și tehnici speciale. În Ziua 2 vom trece prin pregătirea "înainte de zbor" pentru faza de codificare, pe care o vom trece în detaliu în Ziua 3. În Ziua 4, vă vom arăta cum să creați trei site-uri complet diferite folosind aceleași HTML brut. Sunteți gata să începeți? Să o facem!
Ca și în cazul oricărui proiect de web design, este important să identificăm obiectivele oricărui proiect? așa că, înainte de a ne arunca cu capul, să spunem câteva cuvinte despre care sunt scopurile noastre finale:
Ultimul lucru pe care îl voi menționa este poate cel mai important: trebuie să fie 100% personalizabil folosind cea mai mică cantitate de muncă posibilă! Ce înseamnă asta pentru noi? Aș dori ca oricine să fie capabil să re-brand și re-piele întregul aspect, fără a fi nevoie de a atinge mizeria în jurul valorii de cu rescrierea orice de bază HTML. În mod ideal, prin schimbarea câtorva imagini (logo-ul și o imagine de fundal personalizată) și a unor CSS, se poate crea un rezultat complet diferit? de aceea, în ultima zi a acestei serii, vom dedica și o întreagă sesiune de creare de personalizări!
Ok, cu obiectivele noastre clar definite, să începem!
Tutorialul video este destinat să fie un însoțitor al tutului scris de mai jos. Gândiți-vă la acest material ca "suplimentar" - nu voi acoperi tot ceea ce este în partea scrisă, dar uneori este frumos să vedeți altcineva care lucrează în Photoshop pentru a ridica alte trucuri, sfaturi de eficiență și alte tehnici pe care altfel nu le-ați putea fi familiarizat cu.
Ghidul pas cu pas complet scris este de mai jos. Vom începe cu un document Photoshop gol, dar puteți descărca și demo-ul PSD pentru a vă verifica munca împotriva mea.
Începeți prin a crea un document nou la dimensiunea de 1280 x 800 pixeli. De ce? Pentru că asta ne va da o frumoasă pânză mare pentru a juca cu ea. Lățimea designului nostru final nu va fi de fapt 1280 de pixeli, dar dorim să vedem o anumită culoare de fundal, așa cum am vedea normal într-o fereastră mare de browser.
Prima dilemă practică cu orice proiect web este de a decide dimensiunea documentului cu care veți lucra. În cazul nostru, aș vrea ca designul să stea pe fața și centrul ecranului, să umple cât mai mult spațiu pe un monitor mai mic - și să nu arăți prea mic pe un monitor imens.
Considerații privind dimensiunea: Opresc să folosesc 994px ca lățime totală. Acest număr este oarecum arbitrar - ar fi putut fi de câteva ori mai largi sau mai puțini pixeli mai mici, dar în cele din urmă va face treaba. De ce? Deoarece se încadrează în "zona sigură" de 1003 pixeli pentru cele mai populare browsere utilizate acum, cu un pic de umplutură pe ambele părți pentru a fi siguri.
Înălțimea în considerare: Am de gând să lucrez cu înălțimea lui 644px în interiorul Photoshop Înălțimea este un alt număr arbitrar în cazul acestui design. De ce? Deoarece 1) va fi reglabil de la CSS, 2) vom lăsa acest "flex" pentru a se potrivi conținutului pe care îl aruncăm înăuntru și 3) Sunt mai puțin preocupat de înălțimea îndoită decât am putea fi pentru o proiecte pe scară mai largă.
Cel mai important lucru pe care trebuie să-l observăm aici este că toate acestea vor fi 100% ajustabile de la CSS odată ce am terminat. Deci, dacă preferați un aspect mai larg, cu o înălțime mai mică, veți putea obține doar acest lucru în câteva secunde de la alegerea preferințelor dvs. Ideea aici este să păstrăm lucrurile fluide chiar dacă folosim un șablon de dimensiune fixă? astfel încât să nu fiți prea agățați de numerele precise chiar acum.
Avertisment: Această abordare "păstrați-o fluidă" este de fapt unică pentru acest șablon particular? Voi începe, de obicei, orice proiect cu o analiză mult mai rafinată pentru a găsi dimensiunea perfectă, pe care o vom întâlni în alte serii tut.
Deși există o mulțime de merite pentru utilizarea unui sistem de grilă pre-construit (cum ar fi 960gs sau 978gs), am o viziune destul de clară asupra a ceea ce vreau să construiesc și nu a găsi un sistem de rețea care să se potrivească imediat designului meu, "v-ați optat pentru freestyle acest aspect.
Care sunt repercusiunile freestyling-ului?? Pentru unul, va trebui să fim mult mai atenți cu privire la dimensiunile fiecărui modul de conținut pe care îl creăm, pentru că nu vom avea ghiduri care să ne spună unde ar trebui să meargă. Pentru a crea un șablon cu adevărat uniform, ar trebui să fim mult mai sârguincioși în ceea ce privește crearea propriului nostru sistem de grilă, care este nativ pentru acest șablon.
Desenați dreptunghiul rotunjit: Acum că am decis 994px de 644px ca mărimea containerului nostru, mergeți mai departe și trageți un dreptunghi rotunjit de acea dimensiune (folosind Raza de 12 pixeli). Deschideți panoul Info (Fereastră> Info sau F8) pentru a vizualiza dimensiunea dreptunghiului în timp ce îl desenați.
Rețineți că culoarea dreptunghiului nu contează în acest moment. În timp ce în cele din urmă o vom transforma în alb, pentru moment dorim să vedem că se află în fundal.
Crearea efectului Shadow: Voi folosi aceeași metodă pe care am folosit-o în tutorialul "Creați-vă propriul Juicy Tabbed Slider" pentru că este cel mai simplu mod de a obține o umbră care va fi ușor de felii și transformată într-un PNG transparent atunci când este timpul pentru codificare.
Pentru a crea această umbră, luați instrumentul perie și setați-l la dimensiune de 60px și 0% duritate.
Atunci, creați un nou strat gol pentru a atrage, țineți apăsat Schimb cheie pentru a trage o linie dreaptă și trageți pur și simplu cursorul peste jumătate din dreptunghiul recipientului.
În cele din urmă, vom folosi Transformare libera instrument (Cntrl + T) să-l unghi foarte ușor pentru a crea un efect de plecare (am folosit aproximativ 2.5 pentru unghiul). De ce înclinați acest lucru deloc? Pentru că va contribui la crearea unei dimensiuni suplimentare în cazul în care sursa de lumină pare să se îndoaie puțin.
Acum, să duplicăm stratul periat (Cntrl + J în timp ce este selectat pe strat) și o rotiți orizontal (Editați> Transformare> Flip orizontal). Glisați noul strat de perie răsturnat până când se potrivește exact cu cealaltă parte a dreptunghiului recipientului. Rezultatul ar trebui să fie o umbră care este opusul primei.
Mutați ambele straturi de umbre în spatele cadrului? (și selectați ambele straturi și apăsați Ctrl + T) astfel încât să se potrivească doar în interiorul lățimii totale a dreptunghiului cadrului.
În cele din urmă, îmbinați ambele straturi de umbre împreună (Ctrl + E) și împingeți stratul de umbră în locul potrivit (utilizați instrumentul de selecție de bază [V] și utilizați tastatura pentru a urca). De asemenea, puteți ajusta opacitatea stratului de umbră pentru a vă potrivi preferințelor personale. Am folosit 60%, poți să faci mai mult sau mai puțin în funcție de ceea ce cauți.
Pasul Bonus: Pentru a adăuga și mai multă adâncime, utilizați Perspective Transform pe umbră pentru a face să pară că se întorc în spațiu. Doar aplicați un mic Gaussian Blur pe stratul după ce l-ați transformat pentru a elimina orice artefacte pixel.
Iată un pas suplimentar dacă căutați o dramă mai mare: încercați să creați un strat dublu de umbră care este cu 70% mai mic (utilizați Transformarea liberă și scalarea procentuală pentru a regla acest lucru), mai mult neclare și la o opacitate diferită (70 %) pentru a crea o "umbră de bază" în interiorul celui primar.
Mergeți și denumiți straturile de umbre (odată ce ați terminat să jucați cu ele) și plasați-le într-un nou layer folder numite Umbre. Organizarea va face personalizarea mult mai ușoară atunci când suntem gata să facem acest lucru!
Crearea fundalului:
Fundalul pe care o vom crea este un "model de zgomot" subtil albastru. Voi trece mai repede, dar pentru a afla mai multe despre crearea acestor tipare, verificați tutorialul nostru complet despre ele aici.
Începeți prin crearea unui nou strat gol și umpleți-l cu alb (Shift + F5).
Acum, să adăugăm un zgomot folosind Filtru> Zgomot> Adăugați zgomot. Puteți să vă adaptați la preferințele dvs., dar le-am folosit 14% pentru suma.
Setați noul "strat de zgomot" în modul Multiple în panoul modului de amestecare și desenați un dreptunghi (culoarea de umplere # e1ebef) în spatele acestui strat.
Ultima, să adăugăm un nou strat de ajustare (Layer> Layer de ajustare nou> Hue / Saturation) peste celelalte două straturi, astfel încât zgomotul nostru nu este plictisitor vechi gri.
Sub panoul de ajustare al stratului de ajustare (Fereastră> Ajustări), Am folosit setările de (Hue: 200, sâmbătă: 100 și ușoară: +60) cu caseta Colorize verificată. Puteți juca până când obțineți propriul efect dorit.
Mergeți mai departe și plasați aceste trei straturi noi (stratul adj., Stratul de zgomot și stratul de culoare de fundal) într-un nou strat layer folder numite "culori de fond".
În cele din urmă, să mergem mai departe și să facem culoarea albă a cutiei de containere acum, când am adăugat o anumită culoare de fundal. Am adăugat și o lumină 1px accident vascular cerebral în jurul cutiei noastre de containere (# d8d8d8 în culoare) pentru ao ajuta să iasă din fundal.
În acest moment, documentul dvs. ar trebui să arate astfel:
Straturile dvs. ar trebui să fie, de asemenea, organizate astfel:
Acum că avem containerul de conținut de bază creat și format, este timpul să începem să îl umplem cu conținut. Vom începe cu bara laterală de navigare, deoarece acesta va defini cât spațiu avem mai târziu pentru conținut.
Cât de mare ar trebui să fie? Lățimea barei laterale depinde de dvs.? Am ales să utilizez 235px ca lățime, deoarece poate să se potrivească mai mult sau mai puțin cu lucrurile pe care le vreau acolo (o mulțime de spațiu pentru titluri lungi de pagini, widget-ul social media și o bară de căutare). Puteți ajusta acest lucru pentru a se potrivi nevoilor dvs.? și așa cum am spus de-a lungul timpului, toate acestea vor fi reglabile de CSS mai târziu.
Pentru a începe, trageți pur și simplu o linie de 1px utilizând aceeași culoare pe care am folosit-o pentru frontiera containerului nostru (# d8d8d8) de-a lungul axei verticale a containerului. Plasați-l cu aproximativ 285 de pixeli din stânga marginii.
Apoi, poate fi util să elaborați o orientare în acest moment - aproximativ 20px distanță de marginea frontierei containerului. Vom folosi acest ghid ca destinație unde să plasăm tot conținutul nostru astfel încât lucrurile să pară uniforme și bine aliniate.
Nu voi intra prea adânc aici pentru că probabil că veți folosi propriul dvs. logo;). Pe scurt, totuși, am început cu o simplă pictogramă de cadru (din setul de pictograme Nobile) și am adăugat fotografia mea pe cadru. Apoi am folosit fontul Museo la 26pt; Folosind 2 greutăți și culori diferite pentru a crea o varietate vizuală, am setat titlul șablonului nostru, "ShutterPress" frumos lângă pictogramă.
Din nou, probabil veți dori să utilizați propriul dvs. logo (sau clientul) în acest stadiu? așa că voi trece peste stilurile de strat și alte trucuri. Simțiți-vă liber să le verificați în interiorul demo-ului PSD!
Pur și simplu plasați sigla în interiorul spațiului barei laterale. Rețineți că folosim aproximativ aceeași cantitate de material de umplutură și de umplutură din partea dreaptă pe care am folosit-o pentru umplutura din partea stângă.
Trucuri mici, cum ar fi păstrarea spațiului în jurul unui obiect la fel de important ca și uniforma logo-ului, este unul dintre acele lucruri care vor face diferența între un design bun și un design minunat.
Navigarea în acordeon este primul element funcțional pe care îl vom bate joc. Ca atare, merită remarcat faptul că vom intra în zona gri. Vrem să ne batem de parcă ar fi fost folosită? astfel încât, dacă arătăm acest lucru cuiva (ca un dezvoltator), ei vor înțelege ce ar trebui să arate în toate stările interactive posibile.
Ca atare, vrem să arătăm link activ, precum și cel puțin una acordeon deschis și unul acordeon închis.
Voi folosi un font simplu pentru asta - Lucida Sans la 12pt cu setul de conducere la 36pt cu culoarea neagră # 252525. Mi se pare că prefer să folosesc ascuțit setarea anti-alias pentru fonturile web în machete Photoshop, dar puteți folosi orice doriți.
De asemenea, folosesc o variantă mică pentru linkul activ: Îndrăzneţ cu culoarea setată la # 0285da, care se întâmplă să imite logo-ul, precum și nuanța de fundal.
Utilizați câteva spații simple de tastatură pentru a linia linkurile care vor deveni în cele din urmă linkurile noastre imbricate în acordeon.
Rețineți că folosim aceeași orientare verticală pentru a suspenda textul astfel încât să se potrivească cu sigla.
Cele 36 de picioare de conducere sunt o mulțime de a stabili o linie orizontală simplă între fiecare legătură, așa că haideți să mergem mai departe și să facem asta în acest moment. Utilizați culoarea #EAEAEA pentru aceste linii orizontale, care este ușor mai ușoară decât culoarea primară a frontierei noastre. De ce? Va ajuta să stabiliți că aceste reguli sunt puțin mai puțin fixe decât celelalte.
Acum, să adăugăm butoanele acordeonului. Începeți prin a crea un dreptunghi rotunjit cu o rază de 2px, dimensionat la 11px și 11px. Adăugați următoarele stiluri de straturi:
Gradientul gri deschis (# E6E6E6 la alb) de jos în sus, respectiv.
A 1px în afara accidentului de #bfbfbf.
Duplicați stratul respectiv și adăugați un text simplu "+" și "-" pentru a finaliza butoanele. Așezați-le după cum se arată:
De aici, vom folosi aceleași reguli de bază pentru toate elementele noi. Granițele ar trebui să se potrivească cu aceleași griuri pe care le-am folosit înainte. Plăcuța ar trebui să fie, de asemenea, aproximativ aceeași cu cea pe care am folosit-o pentru elementele anterioare. Fonturile și culorile vor face același lucru. Ca atare, nu te voi plictisi cu re-scrierea acestor note, doar tine-le minte!
Pentru Social Media Widget, mergeți mai departe și apucați setul de pictograme alese de dvs. (sau consultați setul nostru larg de seturi de icoane aici). Vom folosi 16px la 16px versiuni ale pictogramei pe care o alegeți. Demo-ul folosește acest set, dar puteți folosi orice doriți.
De asemenea, am optat pentru Desaturarea icoanelor sociale (Imagine> Ajustări> Desaturați), astfel încât să nu distragă atenția din zona de conținut de bază. Adăugați pictogramele sau alegerea dvs. (distanțate cu câteva pixeli) și adăugați textul "Social:" astfel încât să aibă un titlu.
Adăugați linia orizontală pentru separare și lăsați puțin spațiu dedesubt pentru bara de căutare.
Widgetul de căutare este foarte ușor de creat. Doar trageți a 25px înalt dreptunghi rotunjit (rază 8px) cu 1px accident vascular cerebral de # e0e0e0 și aruncați o pictogramă cu lupă. Am folosit unul din setul de icoane Fugue (este gratuit), dar puteți folosi propriul dvs. pentru a adăuga un anumit stil sau flare.
Whallah! Bara noastră laterală este acum terminată. Puteți adăuga propriile dvs. widget-uri personalizate sau le puteți lăsa așa. Este timpul să populați zona noastră de conținut cu unele, bine, conținut!
Voi face lucruri un pic înapoi în următorii doi pași. În mod normal, ați începe un design web cu designul paginii de pornire? pagina pe care oamenii vor ajunge mai întâi. Totuși, acest lucru este un caz rar în care subpagina (adică: șablonul de galerie) este cu siguranță mai importantă decât pagina de destinație reală.
Deci, știind că pot să creez întotdeauna un design homepage, voi începe proiectul nostru de conținut cu modelul Gallery, pentru că ne reprezintă mai multe probleme. Printre aceste probleme se numără:
Lucrul amuzant este că, odată ce am rezolvat aceste probleme, putem crea destul de rapid pagina de pornire. Dacă începem aici, ne vom permite să creăm o galerie de miniaturi ucigașe fără a încerca să îndeplinim orice constrângeri pe care le-am putea stabili accidental asupra noastră, pornind de la pagina de pornire.
Ok, să începem!
Voi începe prin a stabili o cantitate de bază de umplutură pe care aș vrea să o păstrez întotdeauna în jurul zonei de conținut. În cazul nostru, am selectat 32px pentru a fi suma. Este puțin mai mică decât înălțimea liniei de navigație, dar nu atât de mică încât lucrurile să se simtă strânse sau constrânse.
Asta mă lasă cu o zonă activă de aproximativ 696 pixeli la 586 de pixeli (din nou, înălțimea este flexibilă, deci nu suntem îngrijorați de asta).
Cu aria noastră de conținut activă definită, acum dorim să selectăm dimensiunea ideală a miniaturilor și umplutura. Faptul că ne aflăm nu este știința rachetelor? În esență, am jucat în jur cu mai multe aranjamente de dreptunghiuri desenate gros până când am găsit ceva care arăta armonios.
Acum, știu că cuvântul armonios nu este foarte specific? deci ce vreau să spun? Știind că vreau să se potrivească aproximativ 15-20 de imagini pe pagină, am încercat diferitele dimensiuni de miniaturi / combinații de spațiu până când am găsit unul care reflectă un echilibru bun al spațiului pozitiv și negativ, precum și un sentiment rafinat de ierarhie. Lucruri precum Raportul de Aur se joacă în acest lucru, dar voi fi sincer și recunosc că am privit-o în acest caz. Nu se petrece magie aici? doar o mulțime de experimente.
Deci, care este formula finală? A 155 de grade lățime de 125 de pixeli înălțime miniatură, plasată în 4 coloane (și, în cazul nostru, 4 rânduri, care ne umple înălțimea).
Plăcuțele: Există aproximativ 21px de separare orizontală între fiecare miniatură și aproximativ 18px de separare verticală. De ce diferența?
Pentru că avem de-a face cu un layout peisaj (care înseamnă că este mai lat decât este îngust), se simte bine că trebuie să păstrăm aceeași proporție de formă în întregul nostru design.
Observați cum dimensiunea miniatură finală pe care am selectat-o reflectă și acest raport peisaj. Deci, este logic să lăsăm un pic mai puțin între rânduri decât vom plasa între coloane.
Iată rezultatul final:
Rețineți că am lăsat aproximativ 50 de spațiu în partea de jos pentru a introduce un fel de paginare (modul în care utilizatorii vor naviga de la o pagină de miniaturi la alta). Firește, dacă nu există suficiente miniaturi pentru a declanșa paginarea, vom decupa aspectul mai strâns în partea de jos.
Stilul vizual al miniaturilor este, de asemenea, important. Pentru că luăm o asemenea grijă pentru a crea o mulțime de puțin polonez detaliile din întregul nostru design, văzând miniaturile de imagine vechi obișnuite, cu muchii dure, se simt crude.
Vom adăuga un stil subtil pentru a ușura acest lucru și pentru a da grilei galeriei un sentiment de rafinament. Aplicați următorul stil de strat pentru fiecare dintre imaginile miniatură:
Un accident vascular cerebral intern 2px (în termeni CSS, acest lucru va deveni umplutură) #EAEAEA
O umbră de drop 1px (în termeni CSS aceasta va deveni frontieră) # F2F2F2
Voi mări 100% aici pentru a vă arăta stilul final:
Acum, când ne-am stabilit grila, să adăugăm niște imagini reale pentru a da o anumită viață acestei structuri:
Am terminat aproape cu această pagină? acum tot ce avem nevoie este o modalitate prin care utilizatorii pot naviga de la o pagină de miniaturi la alta. Aceasta se numește paginare. Există multe modalități de a face acest lucru (unele mai complexe decât altele). În cazul nostru, vrem o metodă simplă de paginare? așa că optez să folosesc o simplă săgeată stânga | săgeată spre dreapta - adică: (). Aceasta este una dintre metodele mai intuitive de paginare, deci are sens pentru situația noastră.
Să mergem mai departe și să creăm două cercuri cu diametrul de 18px:
Observați că am copiat / lipit pur și simplu stil strat din butoanele de acordeon pe care le-am folosit înainte. De ce? Deoarece duplicarea stilurilor vizuale vă asigură că aspectul nostru se simte uniform? și nu există nici un motiv să pierdeți efortul în încercarea de a crea un stil complet nou. Folosirea consistentă a stilului stratului va ajuta de fapt la utilizarea site-ului nostru.
După ce ați atras cercurile, adăugați săgețile (aceasta este deja afișată mai sus). În cazul meu, am folosit o formă personalizată în Photoshop, dar puteți utiliza la fel de ușor un text personalizat ">". Deoarece acest lucru nu este un incepator tut, presupun ca poti rezolva cum sa obtii aceasta forma acolo intr-un fel;)
Fin! Aceasta finalizează de fapt această pagină de conținut. Folosind aceleași stiluri de bază și reguli de umplutură pe care le-am stabilit, putem transforma cu ușurință acest lucru în alte layout-uri de rețea (de exemplu, o grilă 2x2 sau o rețea de 3x3).
Bine - În etapa finală a sesiunii de proiectare! Putem, probabil, să rezolvăm cum să creăm diverse alte pagini de suport, dar ceea ce avem nevoie acum este designul paginii de pornire. Având în vedere că acesta este un șablon orientat spre fotografi, o fotografie ar trebui, evident, să joace în centrul atenției. De asemenea, avem nevoie de un text descriptiv (pentru ca un fotograf să explice cine este, ce tipuri de servicii oferă etc.)
Considerații privind dimensiunea: În majoritatea situațiilor, am copiat doar spațiul activ de conținut pe care l-am folosit în Șablon de Galerie. Voi schimba lucrurile puțin, schimbând padding-ul de la 32 de pixeli la 20px. De ce? Acest lucru ne va da doar puțin spațiu suplimentar pentru a folosi o imagine "FULL". Este o schimbare foarte subtilă în aspectul general, dar impactul ar trebui să fie enorm pentru că vom putea plasa o imagine masivă în spațiu.
Înălțimea în considerare: Așa cum am spus de-a lungul timpului, înălțimea este cu adevărat variabilă și în cele din urmă va fi lăsată la latitudinea utilizatorilor / designerilor / clienților individuali pentru a determina cât de mult conținut doriți pe această pagină? în cazul meu, voi încerca să păstrez dimensiunile acestei pagini, la fel ca și pagina noastră de galerie.
Rezultatul acestor considerente este un spațiu activ care este puțin mai mare decât ceea ce am folosit în șablonul de galerie: 720 pixeli la 604 de pixeli.
Acest lucru are sens pentru noi din câteva motive: 1) ne dă o mulțime de spațiu pentru a proiecta în jur și 2) se va potrivi în spațiul cel mai popular al browserelor "fold". Atâta timp cât nu punem nicio informație crucială aproape de fundul acestei zone, ar fi bine să folosim acest spațiu în orice fel ne-am putea gândi.
Desenarea imaginii: Începeți prin desenarea a 716 pixeli lățime de 438 de pixeli înălțime dreptunghi rotunjit (Radius: 10px).
Aplicați următoarele stiluri de straturi, începând cu a 2X Stroke:
Și adăugați, de asemenea, o umbră interioară (care va ajuta imaginea noastră să "popă" mai mult pe pagină):
Stilul vizual final ar trebui să arate cam așa:
Crearea filelor:
Filarele vor fi modul în care utilizatorii vor putea să circule prin imagini din pagina principală. Acesta este, în esență, doar un carusel de bază jQuery atunci când te gândești la asta în termeni de codificare? dar nu există nici un motiv să ne limităm la stilurile vizuale pe care cele mai multe glisiere pre-construite le vor utiliza în mod implicit.
Deci, hai să devenim mai creativi cu filele stânga / dreapta, creând niște cercuri interioare interesante din punct de vedere vizual.
Începeți cu a Cerc de diametru de 92 pixeli formă. Utilizare Negru pentru culoarea de umplere și setați opacitate la 57%.
Utilizați instrumentul Rectangle Marquee pentru a face o selecție care se execută de-a lungul "containerului nostru de imagini" și folosiți acea selecție pentru a crea o mască de strat.
Acum adaugati "
Deci, ar trebui să aveți acest lucru:
Mergeți și grupați aceste straturi într-un grup, apoi duplicați-l, răsturnați grupul copiat orizontal și glisați-l peste la dreapta:
Acum, tot ce trebuie să faceți este să trageți o imagine pe stratul dreptunghiului rotunjit (faceți imaginea a Mască de tăiere din acest strat), astfel încât să putem vedea cum va arăta aceasta:
Crearea spațiilor: Determinarea dimensiunii acestor spații are de-a
Accentsconagua