Share
Ik ben een grote fan van op foto's gebaseerde site-ontwerpen? dus vandaag ben ik verheugd om een nieuwe tutorial over de "volledige site" te lanceren die is gericht op fotografen, illustratoren en andere visuele creatieven. Op dag 1 ontwerp ik de sjabloon in Photoshop met behulp van een paar speciale trucs en technieken. In dag 2 lopen we door de voorbereidende voorbereidingen voor de coderingsfase, die we in detail bespreken in dag 3. Op dag 4 laten we u zien hoe u drie totaal verschillende sites kunt maken met dezelfde ruwe HTML. Klaar om te beginnen? Laten we dit doen!
Zoals bij elk webontwerpproject, is het belangrijk om de doelen van elk project te identificeren? dus, voordat we erin duiken, laten we een paar woorden zeggen over wat onze uiteindelijke doelen zijn:
Het laatste dat ik noem is misschien wel het belangrijkste: het moet zo zijn 100% aanpasbaar met de minste hoeveelheid werk mogelijk! Wat betekent dit voor ons? Ik zou graag willen dat iedereen de hele lay-out kan herschrijven en opnieuw kan villen zonder ooit de rommel in de buurt te moeten raken door een van de kern-HTML te herschrijven. Dat betekent idealiter dat door een paar afbeeldingen (het logo en een aangepaste achtergrondafbeelding) en wat CSS uit te wisselen, er een heel ander resultaat kan worden gecreëerd? dat is de reden waarom we op de laatste dag van deze serie een hele sessie gaan wijden aan het maken van aanpassingen!
Ok, met onze doelen nu duidelijk gedefinieerd, laten we beginnen!
De video-zelfstudie is bedoeld als aanvulling op de onderstaande schriftelijke uitleg. Zie het als "aanvullend" materiaal - ik zal niet alles bedekken wat in het geschreven gedeelte staat, maar soms is het gewoon leuk om iemand anders in Photoshop te zien werken om andere trucs, efficiëntietips en andere technieken op te pikken die u anders misschien niet zou hebben. bekend zijn met.
De volledige schriftelijke stapsgewijze handleiding staat hieronder. We beginnen met een leeg Photoshop-document, maar u kunt ook de demo PSD downloaden om uw werk tegen het mijne te controleren.
Begin met het maken van een nieuw document met een grootte van 1280 x 800 pixels. Waarom? Omdat dit ons een mooi groot doek geeft om mee te spelen. De breedte van ons uiteindelijke ontwerp is niet 1280px, maar we willen een achtergrondkleur zien zoals we normaal in een groot browservenster zouden zien.
Het eerste praktische dilemma bij elk webproject is om te bepalen met welke grootte het document werkt waarmee u gaat werken. In ons geval zou ik willen dat het ontwerp vooraan op het scherm past, zoveel mogelijk ruimte opvult op een kleiner beeldscherm - en niet te klein lijkt op een groot scherm.
Breedte Overwegingen: Ik kies voor gebruik 994px als de totale breedte. Dit nummer is iets willekeurig - het zou een paar px breder of een paar px kleiner kunnen zijn, maar uiteindelijk zal het de klus klaren. Waarom? Omdat het binnen de 1003px "veilige zone" past voor de meest populaire browsers die nu worden gebruikt, met aan beide zijden een beetje opvulling om veilig te zijn.
Hoogte overwegingen: Ik ga werken met de hoogte van 644px binnen Photoshop De hoogte is een ander willekeurig getal in het geval van dit ontwerp. Waarom? Omdat 1) het instelbaar zal zijn vanuit de CSS, 2) we deze "flex" laten passen op de inhoud die we erin gooien en 3) Ik ben minder bezorgd over de vouwhoogte dan ik misschien ben voor een grootschaliger project.
Het belangrijkste om op te merken is dat dit allemaal 100% instelbaar is vanaf de CSS zodra we klaar zijn. Dus als u de voorkeur geeft aan een bredere lay-out met een meer ondiepe hoogte, kunt u dit binnen enkele seconden na het bepalen van uw voorkeur krijgen. Het idee hier is om dingen vloeiend te houden, ook al gebruiken we een sjabloon met een vaste grootte? dus wacht niet te snel op de precieze cijfers.
Caveat: Deze "keep it fluid" -benadering is eigenlijk uniek voor deze specifieke sjabloon? Meestal begin ik elk project met een veel verfijndere analyse om de perfecte maat te vinden, die we in andere tutreeksen zullen bespreken.
Hoewel er veel voordelen zijn aan het gebruik van een vooraf gebouwd rastersysteem (zoals 960gs of 978gs), heb ik een vrij duidelijke visie over wat ik wil bouwen en niet over een rastersysteem dat onmiddellijk in mijn ontwerp past, I heb ervoor gekozen om deze lay-out freestyle te geven.
Wat zijn de gevolgen van het freestylen van een lay-out? Ten eerste moeten we veel zorgvuldiger omgaan met de dimensies van elke contentmodule die we maken omdat we geen gidsen hebben die ons vertellen waar de dingen naartoe moeten gaan. Om een echt uniform uitziende sjabloon te maken, moeten we gewoon zoveel meer ijverig zijn met het maken van ons eigen rastersysteem dat eigen is aan deze sjabloon.
Teken de afgeronde rechthoek: Nu hebben we besloten 994 px bij 644 px als onze containergrootte, ga je gang en teken een afgeronde rechthoek van die grootte (met een 12px radius). Open het infopaneel (Venster> Info of F8) om de grootte van uw rechthoek te bekijken terwijl u hem tekent.
Merk op dat de kleur van de rechthoek er op dit moment niet toe doet. Hoewel we het uiteindelijk wit zullen maken, willen we het nu zien te onderscheiden van de achtergrond.
Het schaduweffect creëren: Ik ga dezelfde methode gebruiken die we hebben gebruikt in de tutorial 'Uw eigen schuifregelaar met sappige tabbladen maken', omdat dit de gemakkelijkste manier is om een schaduw te krijgen die gemakkelijk kan worden geslepen en verandert in een transparante PNG wanneer het tijd is voor codering.
Om deze schaduw te maken, pakt u gewoon uw penseel en stelt u deze in op 60 px in grootte en 0% hardheid.
Dan, maak een nieuwe lege laag om op te tekenen, houd de toets ingedrukt Verschuiving toets om een rechte lijn te tekenen en sleep eenvoudigweg de cursor over de helft van de containerrechthoek.
Ten slotte zullen we de Vrije transformatie gereedschap (Cntrl + T) om het heel licht te kantelen om een buigeffect te creëren (ik gebruikte ongeveer 2.5 voor de hoek). Waarom een hoek maken met dit alles? Omdat het helpt om een beetje extra dimensie te creëren als de lichtbron een klein beetje lijkt te buigen.
Laten we nu die geborstelde laag dupliceren (Cntrl + J geselecteerd op de laag) en horizontaal omdraaien (Bewerken> Transformeren> Horizontaal spiegelen). Schuif de nieuwe omgedraaide borstellaag over totdat deze ongeveer overeenkomt met de andere kant van de containerrechthoek. Het resultaat zou een schaduw moeten zijn die het tegenovergestelde is van de eerste.
Verplaats beide schaduwlagen achter het? -Kader? laag en schaal ze (selecteer beide lagen en druk op Ctrl + T) zodat ze net binnen de totale breedte van de kaderrechthoek passen.
Voeg ten slotte beide schaduwlagen samen (Ctrl + E) en schuif de schaduwlaag op de juiste plek (gebruik de standaard selectiegereedschap [V] en gebruik het toetsenbord om te duwen). U kunt ook de dekking van de schaduwlaag aanpassen aan uw eigen persoonlijke voorkeuren. Ik gebruikte ongeveer 60%, je kunt meer of minder doen volgens wat je zoekt.
Bonus stap: Om nog meer diepte toe te voegen, gebruikt u de Perspectief Transformatie op de schaduw zodat het lijkt alsof hij teruggaat in de ruimte. Breng een klein beetje aan Gaussiaanse vervaging op de laag nadat u deze hebt getransformeerd om eventuele pixelartefacten te verwijderen.
Hier is nog een bonusstap als je op zoek bent naar nog meer drama: probeer een dubbele schaduwlaag te maken die 70% kleiner is (gebruik de vrije transformatie en het percentage schalen om dit aan te passen), meer wazig en met een andere dekking (70 %) om een "kernschaduw" te maken aan de binnenkant van de primaire.
Ga je gang en noem je schaduwlagen (als je eenmaal klaar bent met spelen) en plaats ze in een nieuwe laag map genaamd Shadows. Organisatie maakt aanpassingen een stuk eenvoudiger als we klaar zijn om dit op te splitsen!
De achtergrond maken:
De achtergrond die we gaan maken is een subtiel lichtblauw "ruispatroon". Ik zal dit snel bespreken, maar om meer te weten te komen over het maken van deze patronen, bekijk hier onze uitgebreide tutorial over hen.
Begin met het maken van een nieuwe lege laag en het invullen met wit (Shift + F5).
Laten we nu wat ruis toevoegen met Filter> Ruis> Ruis toevoegen. Je kunt dit aanpassen aan je eigen voorkeuren, maar ik heb het gebruikt 14% voor het bedrag.
Stel de nieuwe "ruislaag" in op Meerdere onder het deelvenster Mengmodus en teken een rechthoek (vulkleur # e1ebef) achter deze laag.
Laten we als laatste een nieuwe aanpassingslaag toevoegen (Laag> Nieuwe aanpassingslaag> Tint / verzadiging) over deze andere twee lagen, zodat ons geluid niet saai oud grijs is.
Onder het aanpassingspaneel van onze aanpassingslaag (Venster> Aanpassingen), Gebruikte ik de instellingen van (Tint: 200, za: 100 en lichtheid: +60) met het vakje Colorize aangevinkt. Je kunt rond spelen totdat je je eigen gewenste effect hebt.
Ga je gang en plaats deze drie nieuwe lagen (de adj.-laag, de ruislaag en de achtergrondkleurenlaag) in een nieuwe laag laag map "Achtergrondkleuren" genoemd.
Laten we tot slot de kleur Wit van onze containerdoos maken, nu we een achtergrondkleur hebben toegevoegd. Ik heb ook een licht toegevoegd 1px slag rond onze containerdoos (# d8d8d8 in kleur) om het te helpen onderscheiden van de achtergrond.
Op dit punt zou uw document er ongeveer zo uit moeten zien:
Je lagen zouden ook als volgt georganiseerd moeten zijn:
Nu onze inhoudscontainer is gemaakt en gestileerd, is het tijd om het in te vullen met inhoud. We beginnen met de navigatiekolom, omdat die later bepaalt hoeveel ruimte we hebben voor inhoud.
Hoe breed moet het zijn? De breedte van de zijbalk is echt aan jou? Ik heb ervoor gekozen om 235px als breedte te gebruiken, omdat het min of meer past bij de dingen die ik daar wil (voldoende ruimte voor lange paginatitels, de widget voor sociale media en een zoekbalk). U kunt dit echter aanpassen aan uw eigen behoeften? en zoals ik al lang heb gezegd, dit zal later allemaal regelbaar zijn vanuit de CSS.
Om te beginnen, tekent u eenvoudig een 1px-lijn met dezelfde kleur die we voor de rand van onze container hebben gebruikt (# d8d8d8) langs de verticale as van de container. Plaats het ongeveer 285px vanaf de linkerkant van de rand.
Vervolgens kan het handig zijn om op dit punt een richtlijn te trekken - ongeveer 20 px verwijderd van de rand van de rand van de container. We gebruiken dit als een richtlijn voor het plaatsen van al onze inhoud, zodat de dingen er uniform en goed uitgelijnd uitzien.
Ik zal hier niet te diep op ingaan omdat, nou ja, je gaat waarschijnlijk je eigen logo gebruiken;). Kortom, ik ben begonnen met een eenvoudig framepictogram (uit de Noble set met pictogrammen) en heb mijn eigen foto aan het frame toegevoegd. Toen gebruikte ik het font Museo op 26pt; Met behulp van 2 verschillende gewichten en kleuren om wat visuele variatie te creëren, heb ik de titel van onze sjabloon "ShutterPress" mooi naast het pictogram gezet.
Nogmaals, u wilt waarschijnlijk in dit stadium uw eigen logo (of een klant) gebruiken? dus ik ga de laagstijlen en andere tweaks overslaan. Voel je vrij om ze te bekijken in de demo PSD!
Plaats eenvoudig het logo in de zijbalkruimte. Merk op dat we ongeveer dezelfde hoeveelheid top-padding en right-padding gebruiken die we gebruikten voor de padding aan de linkerkant.
Kleine trucs zoals het houden van de ruimte rond een object zo belangrijk als het logo-uniform is een van die dingen die het verschil maken tussen goed ontwerp en een geweldig ontwerp.
De accordeon-navigatie is het eerste functionele element dat we bespotten. Als zodanig is het vermeldenswaard dat we hier wat grijze gebieden zullen betreden. We willen dit bespotten alsof het wordt gebruikt? voornamelijk zodat als we dit aan iemand laten zien (zoals een ontwikkelaar), ze zullen begrijpen hoe het eruit moet zien in alle mogelijke interactieve staten.
Als zodanig willen we laten zien actieve link, evenals ten minste één open accordeon en een gesloten accordeon.
Ik zal hiervoor een eenvoudig lettertype gebruiken - Lucida Sans op 12pt met de leidende set naar 36pt met de off-black kleur van # 252525. Ik gebruik het liefst de Scherp anti-aliasinstelling voor weblettertypen in Photoshop-mockups, maar u kunt alles gebruiken wat u maar wilt.
Ik gebruik ook een kleine variant voor de actieve link: Stoutmoedig met de kleur ingesteld op # 0285da, wat gebeurt om het logo na te bootsen evenals de achtergrondtint.
Gebruik een paar eenvoudige toetsenbordruimten om de links te laten inspringen die uiteindelijk onze door accordeon genestelde links worden.
Merk op dat we dezelfde verticale richtlijn gebruiken om de tekst op te hangen, zodat deze goed aansluit bij het logo.
De 36pts van leading is genoeg om een eenvoudige horizontale lijn tussen elke link in te stellen, dus laten we doorgaan en dat doen op dit punt. Gebruik de kleur #EAEAEA voor deze horizontale lijnen, die iets lichter is dan onze primaire randkleur. Waarom? Het zal helpen vaststellen dat deze regels iets minder gefixeerd zijn dan de andere.
Laten we nu de accordeonknoppen toevoegen. Begin met het maken van een afgeronde rechthoek met een radius van 2px met een grootte van 11px bij 11px. Voeg de volgende laagstijlen toe:
Een lichtgrijs verloop (# E6E6E6 naar wit) van onder naar boven, respectievelijk.
EEN 1px Outside Stroke van #bfbfbf.
Dupliceer die knooplaag en voeg een eenvoudige tekst toe "+" en "-" om de knoppen te voltooien. Plaats ze zoals getoond:
Vanaf nu zullen we dezelfde basisstylingregels gebruiken voor alle nieuwe elementen. Randen moeten overeenkomen met dezelfde grijswaarden die we eerder hebben gebruikt. De opvulling moet ook ongeveer hetzelfde zijn als we voor eerdere elementen hebben gebruikt. Letterstijlen en kleuren zullen hetzelfde doen. Als zodanig zal ik je niet vervelen met het herschrijven van deze notities, houd ze gewoon in gedachten!
Voor de Social Media Widget, ga je gang en pak je de icon set van jouw keuze (of bekijk hier onze grote verzameling iconsets). We zullen gebruiken 16 px bij 16 px versies van elke pictogramset die u kiest. De demo gebruikt deze set, maar je kunt gebruiken wat je maar wilt.
Ik heb er ook voor gekozen om de sociale pictogrammen te desatureren (Afbeelding> Aanpassingen> Desatureer) zodat ze niet afleiden van het kerninhoudsgebied. Voeg de pictogrammen of uw keuze toe (met een paar px uit elkaar) en voeg uw tekst 'Sociaal:' toe zodat ze een titel hebben.
Voeg in onze horizontale lijnranden voor scheiding toe en laat een beetje ruimte eronder voor onze zoekbalk.
De zoekwidget is super eenvoudig te maken. Teken gewoon een 25px hoge afgeronde rechthoek (8px radius) met een 1px slag van # e0e0e0 en laat een vergrootglaspictogram zien. Ik heb die van de Fuga-set met pictogrammen gebruikt (deze is gratis), maar je kunt deze zelf gebruiken om stijl of opvlamming toe te voegen.
Whallah! Onze zijbalk is nu klaar. U kunt uw eigen aangepaste widgets toevoegen of laten zoals deze zijn. Het is tijd om ons inhoudsgebied te vullen met wat, nou, inhoud!
Ik ga de dingen een klein beetje achteruit doen in de volgende twee stappen. Normaal gesproken start u een webontwerp met het startpagina-ontwerp? de pagina waarop mensen voor het eerst arriveren. Dit is echter een zeldzaam geval waarbij de subpagina (dat wil zeggen: de galerij-sjabloon) aantoonbaar belangrijker is dan de daadwerkelijke bestemmingspagina..
Omdat ik weet dat ik altijd een slim homepageontwerp kan maken, start ik ons inhoudsontwerp met de galerij-sjabloon, omdat dit ons meer problemen oplevert. De belangrijkste van deze problemen zijn:
Het grappige is dat als we deze problemen eenmaal hebben opgelost, we de homepage eigenlijk vrij snel kunnen maken. Door hier te beginnen, zullen we onszelf de mogelijkheid bieden om een moordende thumbnail-galerij te maken zonder te proberen eventuele beperkingen op te lossen die we per ongeluk op onszelf zouden zetten door te beginnen met de startpagina.
Ok, laten we beginnen!
Ik begin met het instellen van een basishoeveelheid opvulling die ik altijd bij het inhoudsgebied wil houden. In ons geval heb ik 32px als het bedrag geselecteerd. Het is een beetje kleiner dan de lijnhoogte van de navigatie, maar niet zo klein dat dingen krap of beperkt aanvoelen.
Dat laat me met een actief gebied van ongeveer 696 px bij 586 px (wederom is de hoogte flexibel, dus daar zijn we niet erg bezorgd over).
Omdat ons actieve inhoudsgebied is gedefinieerd, willen we nu de ideale miniatuurgrootte en opvulling selecteren. Dit uitzoeken is geen rocket science? Ik speelde in essentie gewoon met verschillende arrangementen van grofgetekende rechthoeken totdat ik iets vond dat eruitzag harmonisch.
Nu, ik weet dat het woord harmonieus niet erg specifiek is? dus wat bedoel ik? Omdat ik weet dat ik ongeveer 15-20 afbeeldingen per pagina wil passen, heb ik onze verschillende combinatie van miniatuurgrootte en ruimte geprobeerd totdat ik er een vond die een goed evenwicht van positieve en negatieve ruimte weerspiegelde, evenals een verfijnd gevoel voor hiërarchie. Dingen zoals de Gulden Snede spelen hierin een rol, maar ik zal eerlijk zijn en gewoon toegeven dat ik het in dit specifieke geval heb gezien. Er is hier geen magie aan de gang? gewoon heel veel experimenteren.
Dus, wat is de eindformule? EEN 155 px breed bij 125 px hoog miniatuurafbeelding, in 4 kolommen (en in ons geval ook 4 rijen, die onze hoogte vult).
De vulling: Er is ongeveer 21 px horizontale scheiding tussen elke miniatuur en ongeveer 18 px verticale scheiding. Waarom het verschil?
Omdat we te maken hebben met een "landschap" -lay-out (wat betekent dat hij breder is dan dat hij smal is), voelt het gewoon goed om diezelfde vormverhouding in ons hele ontwerp te behouden.
Merk op hoe de uiteindelijke miniatuurafmeting die ik heb gekozen ook deze landschapsratio weerspiegelt. Het is dus logisch dat we wat minder opvulling tussen rijen laten dan we tussen kolommen plaatsen.
Dit is het uiteindelijke resultaat:
Merk op dat ik onderaan ongeveer 50px ruimte heb overgehouden om een soort paginering in te voegen (de manier waarop gebruikers van de ene pagina met miniaturen naar de volgende gaan). Als er onvoldoende thumbnails zijn om de paginering in gang te zetten, zullen we natuurlijk de lay-out onderaan nauwer bijsnijden.
De visuele vormgeving van de miniaturen is ook belangrijk. Omdat we zo voorzichtig zijn om heel weinig te creëren Pools details in ons hele ontwerp, het zien van eenvoudige oude afbeeldingsminiaturen met harde randen voelt ruw aan.
We voegen een subtiele stijl toe om dit op te fleuren en geven ons galerijraster een gevoel van verfijning. Pas de volgende laagstijl toe op elk van uw miniatuurafbeeldingen:
Een 2px-binnenlijn (in CSS-termen zal dit worden vulling) #EAEAEA
Een 1px slagschaduw (in CSS-termen wordt dit de grens) # F2F2F2
Ik zoom hier in op 100% om de definitieve stijl weer te geven:
Nu we ons raster hebben vastgesteld, laten we wat echte afbeeldingen toevoegen om deze lay-out een beetje leven te geven:
We zijn bijna klaar met deze pagina? nu hebben we alleen nog een manier nodig waarop gebruikers kunnen navigeren van de ene pagina met miniaturen naar de volgende. Dit wordt paginering genoemd. Er zijn veel manieren om dit te doen (sommige meer complex dan andere). In ons geval willen we een eenvoudige methode van paginering? dus ik kies ervoor om een eenvoudige pijl naar links te gebruiken | pijl-rechts benadering - ie: (). Dit is een van de meer intuïtieve methoden van paginering, dus het is logisch voor onze situatie.
Laten we doorgaan en twee cirkels met een diameter van 18px maken:
Merk op dat ik het eenvoudigweg heb gekopieerd / geplakt laagstijl van de accordeonknoppen die we eerder gebruikten. Waarom? Omdat het dupliceren van visuele stijlen ervoor zorgt dat onze lay-out uniform aanvoelt? en er is echt geen reden om moeite te doen om te proberen een geheel nieuwe stijl te ontwerpen. Consistent gebruik van de laagstijl zal de bruikbaarheid van onze site daadwerkelijk helpen.
Nadat je je cirkels hebt getekend, voeg je de pijlen toe (dit is al hierboven weergegeven). In mijn geval heb ik in Photoshop een aangepaste> vorm gebruikt, maar je kunt net zo goed een aangepast ">" symbool gebruiken. Aangezien dit geen tut voor beginners is, neem ik aan dat je op de een of andere manier kunt uitzoeken hoe je deze vorm daar kunt krijgen;)
Vin! Dat voltooit eigenlijk deze inhoudspagina. Met behulp van dezelfde basisstijlen en opvullingsregels die we hebben vastgesteld, kunnen we dit gemakkelijk omzetten naar andere rasterlay-outs (zoals een 2x2 raster of een 3x3 raster).
Oke - Op naar de laatste fase in de ontwerpsessie! We kunnen waarschijnlijk uitzoeken hoe we verschillende andere ondersteuningspagina's kunnen maken, maar wat we nu echt nodig hebben is het ontwerp van de startpagina. Omdat dit een op een fotograaf gericht sjabloon is, moet een foto uiteraard centraal staan. We hebben echter ook een beschrijvende tekst nodig (voor een fotograaf om uit te leggen wie hij / zij is, wat voor soort diensten zij aanbieden, enz.)
Breedte Overwegingen: In de meeste gevallen kopiëren we gewoon de actieve inhoudsruimte die we in de galerij-sjabloon gebruikten. Ik ga dingen een beetje veranderen door de opvulling van 32px in te wijzigen 20px. Waarom? Dit geeft ons net een beetje extra ruimte om een "FULL size" afbeelding te gebruiken. Het is een zeer subtiele verschuiving in de algemene lay-out, maar de impact zou enorm moeten zijn omdat we een enorm beeld in de ruimte kunnen plaatsen.
Hoogte overwegingen: Zoals we altijd al zeiden, is de hoogte echt variabel en wordt deze uiteindelijk aan individuele gebruikers / ontwerpers / klanten overgelaten om te bepalen hoeveel inhoud je op deze pagina wilt hebben? in mijn geval ga ik proberen de afmetingen van deze pagina gelijk te houden aan onze galerijpagina.
Het resultaat van deze overwegingen is een actieve ruimte die iets groter is dan wat we in de galerij-sjabloon hebben gebruikt: 720px bij 604px.
Dit is om een paar redenen logisch: 1) het geeft ons voldoende ruimte om te ontwerpen en 2) het past in de 'fold'-ruimte van de meeste populaire browsers. Zolang we geen cruciale informatie in de buurt van de bodem van dit gebied plaatsen, zouden we er goed aan moeten doen deze ruimte te gebruiken op een manier die we zouden kunnen bedenken.
De afbeelding tekenen: Begin met het tekenen van een 716px breed bij 438px hoog afgeronde rechthoek (Straal: 10 px).
Pas de volgende laagstijlen toe, te beginnen met a 2px slag:
En voeg ook een innerlijke schaduw toe (waardoor onze afbeelding meer "pop" wordt op de pagina):
De uiteindelijke visuele stijl zou er ongeveer zo uit moeten zien:
De tabbladen maken:
De tabbladen zijn de manier waarop gebruikers door afbeeldingen op de startpagina kunnen bladeren. Dit is in wezen gewoon een standaard jQuery-carrousel als je er aan denkt in termen van codering? maar er is geen reden om ons te beperken tot de visuele stijlen die de meeste vooraf gebouwde schuifregelaars standaard gebruiken.
Laten we dus wat creatiever worden met de links / rechts-tabbladen door een aantal visueel interessante binnencirkels te maken.
Begin met een 92px diameter cirkel vorm. Gebruik Zwart voor de vulkleur en stel de dekking tot 57%.
Gebruik het gereedschap Rechthoekmarkering om een selectie te maken die langs onze "afbeeldingscontainer" loopt en gebruik die selectie om een laagmasker te maken.
Voeg nu de "
Dus je zou dit moeten hebben:
Ga je gang en groepeer deze lagen in een groep, dupliceer het dan, draai de gekopieerde groep horizontaal om en schuif deze naar de rechterkant:
Nu hoeft u alleen maar een afbeelding naar de afgeronde rechthoek te slepen (maak de afbeelding een Knipmasker van die laag), zodat we kunnen zien hoe dit er uit zal zien:
De ruimtes maken: Het bepalen van de grootte van deze ruimtes heeft zoveel te maken met hoeveel ruimte we willen tussen ze als hoeveel ruimte we willen dat ze opnemen. Ik wil niet minder dan 20px van scheiding tussen elke module (om te voorkomen dat ze met elkaar in de war rake
Accentsconagua