Share
Hallo iedereen! Dit is mijn eerste tutorial over deze geweldige nieuwe site van de tuts + familie. Deze keer heb ik een zeer gedetailleerde tutorial over het maken van een illustratief webdesign met één pagina vanaf de grond af met Photoshop. Je leert hoe je een lay-out maakt voor een webdesign met één pagina, illustratieve achtergronden met een bepaalde stijl maakt, een zwevende navigatiebalk ontwerpt, werkt met tekst met CSS3 in gedachten, en meer ... klaar om te starten?
De laatste tijd zijn er een paar geweldige "verticaal scrollende" sites opduiken rond het net. Voordat we gaan duiken, laten we een paar van hen bekijken om te zien hoe het uiteindelijke effect eruit zal zien. Deze zullen helpen om de rest van de tutorial in context te plaatsen:
Deze zelfstudie vereist enige basiskennis van de Photoshop-gereedschappen. Ik sla enkele basisverklaringen over zoals het maken van een laagmasker, het toevoegen van een gids of het toevoegen van een tekstlaag.
Mijn ontwerp is gebaseerd op verschillende voorbeelden op het web met een zeer trendy stijl, een verticaal panoramisch vectorlandschap als achtergrond en schone tekstgebieden die de belangrijke informatie tonen. Stel u deze site voor als een ontwerp met één pagina als een portfoliowebsite van een creatieve ontwerper of een illustrator.
We zullen niet ingaan op het coderingsgedeelte van dit project, omdat we ons concentreren op de verschillende illustratie- en lay-outtechnieken, maar het is gebaseerd op de populaire plug-in jQuery.ScrollTo, die je kunt bekijken voor tips over het coderen van dit type ontwerp.
Laten we beginnen, de troeven voor deze tutorial zijn:
Eerst moeten we het werkdocument opstellen, ik baseer deze lay-out op het 12 kolommen 960 rastersysteem dat je gratis kunt downloaden, anders maak je gewoon een document 960px aan en teken je een paar gidsen naar de linker en rechter randen.
Zoals een gangbare praktijk bij webdesign werkt, moeten we dit gebied vergroten om te zien hoe het eruitziet op hogere resoluties, maar we moeten ook een standaardformaat voor de hoogte instellen, deze hoogte moet het minimaal zichtbare gebied zijn (boven de vouw) omdat we een enkele pagina-indeling ontwerpen. Ga naar Afbeelding> Canvasgrootte en stel de breedte in op 1420 px en de hoogte op 750 px.
Gebruik vervolgens een tijdelijke afbeelding om het document in secties op te delen, maak met behulp van het gereedschap Rechthoek een rechthoek van boven naar beneden (750 px hoogte). Verhoog vervolgens de Canvasgrootte veel (u kunt de Crop Tool hier gebruiken).
Teken een hulplijn onderaan Rectangle en dupliceer deze en vergelijk de bovenkant van de kopie met de onderkant van de eerste rechthoek en voeg een hulplijn toe onderaan de tweede rechthoek, herhaal dit proces zo vaak als secties die u in de lay-out hebt , in dit geval hebben we 4 nodig: Home, Over ons, Portfolio en Contact met ons opnemen. Gebruik vervolgens het gereedschap Bijsnijden om het extra canvas te verwijderen. Je zou een canvas moeten hebben van ongeveer 3000px hoogte met 4 secties, elk van 750px. Verwijder de leidende rechthoeken en ga vooruit.
Gebruik het gereedschap Rechthoek om een rechthoek te tekenen van de bovenkant naar de onderkant van het derde gedeelte. voeg vervolgens een verloopoverlay-laagstijl toe met de volgende kleuren: #FFFFFF # 6E98C8 # 2A3256 en # 0C0E1A, stel de hoek in op 90 ° (het is erg belangrijk omdat deze gradient-achtergrond op de x-as wordt gesplitst) en druk op OK.
Teken een rechthoek op het vierde deel van het document en voeg vervolgens een laagstijl> kleurovergang toe met deze kleuren: # 486302 # 64A500 en # BEDC40. Stel de hoek naast de vorige stap op 90 ° in.
Nu gaan we beginnen met het ontwerpen van de aanvullende grafische elementen van de achtergrond. Het eerste element dat we moeten tekenen is een ruimteraket, die op het deel van het ontwerp wordt geplaatst. Maak hiervoor een nieuw document (400px breedte en 600px hoogte) en sla het op met een beschrijvende naam zoals "raket", voeg een donkerblauwe achtergrond toe # 181C35.
Klap vervolgens de Pen-tool in door een witte gevulde vorm te tekenen die lijkt op de onderstaande afbeelding, dupliceer deze en ga naar Bewerken> Transformeren> Horizontaal spiegelen en plaats de kopie precies naast het origineel, selecteer beide lagen en voeg ze samen door op Command te drukken / Controle + E. Dit wordt het lichaam van de raket.
Voeg nu een Layer Style> Gradient Overlay toe aan de laag "Rocket body" met behulp van de volgende kleuren: # 0B85DB, # 014C83, # 2396EF, # 004B82 en # 1477B8, stel de hoek in op 0 ° en druk op OK. Eindelijk rasteren het verloop door het samenvoegen van de laag "Rocket lichaam" met een nieuwe blanco laag.
Maak drie gele ellipsen met behulp van de Ellipse Tool en plaats ze zoals de onderstaande afbeelding laat zien. Rasteren ze (Klik met de rechtermuisknop op de miniatuur van de laag en selecteer Rasteriseren). Houd vervolgens de Command / Ctrl-toets ingedrukt en klik op een Ellipse-miniatuur in het Lagenpaneel om automatisch de vorm van de laag te selecteren en met de cursors de selectie enkele pixels erboven te verplaatsen en vervolgens op de Delete-toets te drukken, zal dit proces een mooie gebogen streep creëren. herhaal de acties met de andere ellipsen.
Dupliceer elke streep en plaats deze enkele pixels boven het origineel. Selecteer vervolgens alle strepen en voeg ze samen in een laag met de naam "Strepen". Zet dan Command / Ctrl op de "Rocket Body" om de Rocket-vorm te selecteren, ga dan naar Selecteren> Wijzigen> Uitbreiden en stel 2 pixels in. Keer de selectie om door op Command / Ctrl + Shift + I te drukken. Volgende op het Lagenpaneel klik op de "Stripes" -laag en verwijder de selectie.
Selecteer de laag "Strepen" en voeg een laagstijl> Verloopoverlay toe met de volgende kleuren: # EFAC00, # BD8401, # C39700, # FFCF2C, # C39700, # BD8401 en # EFAC00 Hoek 0 °. En een subtiele Black Drop Shadow (grootte: 2px).
Selecteer de laag "Rocket Body", gebruik dan de Elliptical Marquee Tool en selecteer de punt van de raket, zoals de afbeelding hieronder laat zien, kopieer de selectie en plak deze boven de raketlaag en onder de strepen, noem de nieuwe laag "Tip". Kopieer de Layer-stijl en plak de stijl in de "Tip".
Gebruik de Ellipse Tool om een ellips te tekenen aan de linkerkant van de raket en noem het "Window", en voeg dan een Layer Style> Gradient Overlay toe met de volgende kleuren: # 777777, # E8E8E8, #ADADAD, #FEFEFE, # C8C8C8 en Angle: 0 °.
Dupliceer vervolgens de laag "Venster" en maak deze een klein beetje kleiner, plaats de kopie recht boven het origineel. Aangezien de ellips een vectormasker is, verandert u de kleur van de achtergrond in: # 00CCFF en dubbelklikt u op de laagstijl Laagoverlopende laag, in het dialoogvenster verandert de overvloeimodus in scherm. Voeg ten slotte een subtiele Inner Shadow toe aan de laag "Window Copy" en als je een slagschaduw wilt naar de laag "Window".
Laten we de basis van de raket toevoegen, eerst alle Rocket-gerelateerde lagen (lichaam, punt, strepen en venster) plaatsen en samenvoegen. Gebruik het gereedschap Pen om drie vormen te tekenen volgens het voorbeeld van de onderstaande afbeelding, of ze boven de nieuwe laag 'Hoofd' en één hieronder. Gebruik deze vulkleur voor de vormen: # FBCC28.
Voeg drie nieuwe vormen toe, die het volume van de raketbasis weergeven. Volg de afbeelding hieronder en gebruik deze vulkleur: # AB8204.
Pas de Verlooplaag overlay toe op de sokkels en gebruik de volgende kleuren: # FACB2, # FFF393, # FFD952 en # D4A500, stel de hoek in op 90 °, probeer zo iets te krijgen zoals de onderstaande afbeelding.
Voeg alle lagen samen (ik heb altijd een kopie van de vectorlagen achtergelaten in een kopie voor het geval dat). Maak een ellips over de raket gevuld met deze kleur: # DFF8FF, ga dan naar Filter> Vervagen> Gaussiaans vervagen en stel de straal in op 23 of 24 pixels, noem de laag "Licht". Command / Ctrl - Klik over de laag van de raket om de vorm te selecteren, Command / Ctrl + Shift + I om de selectie om te keren en de selectie uit de laag "Licht" te verwijderen. Eindelijk verander je de mengmodus in zacht licht.
Voeg alle Rocket-lagen samen en kopieer ze. Plak de raket aan de rechterkant van deel 1 van ons hoofddocument.
je kunt deze stap doen op het raketdocument of op het hoofddocument. Maak twee ellipsen met de Ellipse Tool, de ene kleiner dan de andere, zoals de onderstaande afbeelding laat zien, gebruik de volgende kleuren: # FF8A02, # FFC801. Voeg beide lagen samen in een nieuwe laag met de naam "Vuur". Plaats het dan net achter de laag "Rocket". Breng vervolgens een vervaging van 9 pixels met Gauss aan en gebruik de Free Transform Controls om het vuur een klein beetje te vervormen, waardoor het smaller wordt.
Open de Stars Brushes uit de presets en open vervolgens het Brush Presets Panel (F5).
Selecteer onder Brush Tip Shape de 50px ster en verander de grootte in 25px, controleer het vakje Spacing en stel de waarde in op 300%.
Onder verstrooiingsset Verspreiding tot 1000% Controle: pendruk (voor het geval u een grafische tablet hebt) Aantal: 1 en Aantal jitter: 100%.
Stel bij Kleurdynamiek de voorgrond / achtergrondjitter in op 100%.
Zet als laatste de voorgrondkleur op: # E1F5FF en de achtergrondkleur op #FFFFFF, en verf op een nieuwe laag net boven de laag "Sky". Je kunt de dekking van de laag "Sterren" verminderen om ze een beetje minder intens te maken.
De tweede extra illustratie van ons ontwerp zal me een leuke heteluchtballon maken. Maak een nieuw document met de naam "Balloon" 400px x 600px en vul het met een blauwe # 476492 achtergrondlaag. Gebruik vervolgens het gereedschap Pen om verschillende vormen te maken, zoals de bloemblaadjes van madeliefjes om de vorm van de ballon te bouwen.
Gebruik het penbooggereedschap om een vorm te tekenen die lijkt op de eerste schermafbeelding van de onderstaande afbeelding. Gebruik vervolgens het gereedschap Rechthoek om er twee diagonale balken naast te tekenen en een dwarsbalk. Teken met de Pen-tool een heel eenvoudige mand en geef het met de Ellipse Tool een beetje diepte.
Wijzig nu de achtergrondkleur van de ballonlagen in # FFE305 # D00000 en # 0162A7. Selecteer vervolgens de middelste sectie en pas een Layer Style> Gradient Overlay toe met een weerspiegeld zwart - wit verloop. Wijzig de modus Overvloeien overvloeien in Overlay en speel met de hoek zodat deze een beetje stuitert. Breng vervolgens een Inner Shadow Style aan, gebruikmakend van de waarden die in de onderstaande afbeelding worden getoond, het belangrijkste is de dekking, deze moet rond de 50% zijn. Kopieer de laagstijl en pas deze toe op alle andere vormen, voor het geval de schaduw er niet goed uit ziet na het toepassen, dubbelklik op het effect Verloop overlaag en klik en sleep over de schaduw om deze te verplaatsen.
Verander de kleur van de mandgerelateerde lagen in bruin: # 874E21 en plak de laagstijl van de vorige stap. Gebruik voor de interne ellips een donkerdere kleur: # 291700. En dat is het! voeg alle lagen samen en gebruik Dodge / Burn Tools om wat schaduwen en lichten toe te voegen.
Kopieer de ballon en plak twee exemplaren in het tweede gedeelte van ons document, de ene groter dan de andere. Selecteer de kleinere ballon en maak met behulp van de Lasso-tool een selectie van de feitelijke ballon. Druk vervolgens op Command + U om de kleurverzadigingswaarden aan te passen en deze naar wens te wijzigen. Bovendien kunt u wat scherptediepte toevoegen door de tweede ballon een beetje te vervagen.
Voorwaarts met het achtergrondontwerp is het tijd om wat wolken aan onze hemel toe te voegen. Maak een nieuw document met de naam "Clouds" elke gewenste grootte en vul het met dezelfde achtergrondkleur als het "ballon" -bestand: # 486493. Gebruik vervolgens het gereedschap Pen om wat witte wolken te tekenen, zoals op de afbeelding hieronder.
Pas op met de wolkenlagen een Laagstijl> Verloop Overlay met behulp van deze Kleuren: # D1D7E7 - #FFFFFF Hoek: 0 graden en een Gloed binnenkleur: # BBD5D6 Mengmodus: Normaal, de grootte hangt af van de grootte van je wolken, I ' m met 6px.
Voeg wat wolken toe aan deel 2 van ons hoofddocument, achter de ballonnen, als je wat diepte wilt toevoegen aan het landschap, vervagen sommige verre wolken een klein beetje.
Voeg meer wolken toe naast de horizon in sectie 3 van het hoofddocument, verander de kleuren een beetje, want de Inner Glow gebruik #FFFFFF en voor de Gradient Overlay: # DBE1F1 - #FFFFFF. Je zou iets als de afbeelding hieronder moeten krijgen.
We zijn net klaar met de hemel, onthoud dat je geen belangrijke elementen naast de rand plaatst en alle lagen georganiseerd houdt. We zijn halverwege, het is een goed moment om een kop koffie te pakken!
Laten we de bergen toevoegen, deze keer "werk ik direct aan het hoofddocument, teken met behulp van het gereedschap Pen een bergachtige vorm zoals wordt weergegeven in de onderstaande afbeelding." Pas dan een laagstijl> Verloopoverlay toe met de volgende kleuren: # 557200 - # 88B707 en stel de hoek in als beter passend voor u, in dit geval 99 graden, dupliceer dan de berg, plaats deze achter de eerste berg en maak deze een beetje groter en verander de kleuren van zijn verloopoverlay in: # 415800 - # 8AB00B om het een beetje donkerder te maken.
Maak een nieuwe laag boven de Grote berg en noem die "Schaduwen" met een grote zachte borstel en deze kleur: # 527300 beschilder sommige schaduwen. Vervolgens Command / Ctrl- Klik op de berglaag om er een selectie omheen te maken en druk vervolgens op Command / Ctrl + Shift + I om de selectie om te keren en de selectie uit de laag "Schaduwen" te verwijderen. Herhaal het proces door een laag met de naam "Lights" te maken met een lichtgroen gekleurd penseel om enkele lichten aan de bergen toe te voegen.
Teken met de Pen-tool de boomstam en enkele takken. Teken dan op een nieuwe laag een gestileerde vorm met de bladeren. Voeg op de stamlijn een Overlay-laagstijl toe met deze kleuren: # 574E00, # 957800 de hoek hangt sterk af van uw vorm. Voor de bladeren gebruikt u de volgende kleuren voor de verloopoverlay: # 577E01, # 8DDA00. Voeg vervolgens meer blaadjes toe op kleine struiken voor de takken.
Maak verschillende vormen en als je wilt voeg je een beetje wazig donkere ellips toe aan de basis van elke boom. Elke boom rasteren en vooruit gaan.
Plaats de bomen over de bergen en over het groene veld op de secties 3 en 4 van ons hoofddocument, maak de bomen onderaan het beeld groter dan die naast de bergen om een scherptediepte illusie te creëren, naast het vervagen van de kleinste bomen een beetje.
Gebruik tenslotte de Dodge / Burn Tools op de grootste bomen om de intensiteit van de schaduwen te vergroten.
Op dit punt heb je een aardig illustratief achtergrondontwerp. Zet alle achtergrond gerelateerde lagen in een map met de naam "Achtergrond".
Laten we de paginatitel toevoegen, gebruik het tekstgereedschap om twee tekstlagen toe te voegen, in het eerste type "Webontwerp" en op het tweede: "Tutsplus" (u kunt deze woorden uiteraard vervangen door uw eigen tekst). Stel vervolgens in het tekenvenster het lettertype in op Futura Book (u kunt een ander gebruiken) Stel voor de eerste regel de grootte in op 42pt, Kerning: 0pt, markeer de optie Alle kappen en stel de voorgrondkleur in op Wit #FFFFFF. Voor de tweede regel gebruik ik ook Futura Book, Size 18pt en 1250pt van Kerning, zet de voorgrondkleur op # FFD001 en markeer ook de All Caps optie.
Teken met behulp van het lijngereedschap een blauwe lijn (# 9AA4D9), voeg een wit effect voor de buitenste gloed toe en zet de lijn op een rij (voeg de laag samen met een zwarte laag erboven of eronder), pas dan een laagmasker toe> Alles verbergen en vul het masker met een zwart / wit weerspiegeld verloop.
Zorg ervoor dat de titel zich in de buurt van de tweede gids van links bevindt, wat 10 pixels rechts van de linkerrand van 960 betekent.
Gebruik het gereedschap Rechthoek om een smalle witte rechthoek te tekenen in de rechterbovenhoek van sectie 1, de vulwaarde in te stellen op 25% en vervolgens een 1pixel witte lijn, dekking: 50% toe te voegen. Rasteer de laag door deze samen te voegen met een zwarte laag erboven of eronder, voeg een Laagmasker toe> Alles verbergen ... en vul het met een gereflecteerd zwart / wit verloop, probeer iets als de onderkant van de afbeelding hieronder te krijgen.
Met CSS3 kunnen we lettertypen op onze website insluiten, er zijn een aantal gratis lettertypegidsen die gratis lettertypen beschikbaar stellen voor gebruik in ons ontwerp, we nemen de hand van het prachtige lettertype met de naam: "Bonveno". Typ de navigatielinks met Bonveno, Grootte: 12pt, Alle hoofdletters en Voorgrond: Wit. Selecteer de HOME-link en markeer deze met geel # FFCF00. Voeg een instructieve tekst toe: "Spring naar" met bonveno, grootte 8px en grijze voorgrond.
Om een mooiere achtergrond te hebben, dupliceert u de "Nav" -laag en verplaatst u de kopie een aantal pixels linksonder. Wijzig ten slotte de dekking van elke laag in 50%. Zet alle navigatie gerelateerde lagen op een map met de naam "Navigatie".
Om meer nadruk te leggen op de sitenaam, selecteert u het grote woord en past u een subtiele Gradient Overlay toe (# C5C5C5 - #FFFFFF) en een kleine slagschaduw (afstand en grootte 2 px), past u de kleine slagschaduw toe op de tweede regel ook.
Laten we de welkomsttekst toevoegen, we beginnen met het toevoegen van de titel. Aangezien de titels gewone tekst moeten zijn, gebruikt u het Bonveno-lettertype en de gele voorgrond (# FFCF00). Pas de slagschaduw toe die in de vorige stap werd getoond. Aarzel niet om verschillende gidsen te gebruiken om uw inhoud te markeren. In dit geval maak ik 10 px boven en onder de welkomsttekst gidsen om me te helpen de alineatekst en de achtergrond toe te voegen.
Gebruik de Rechthoek-tool om een vak te tekenen als achtergrond voor de welkomsttekst, gebruik deze kleur # 0E1122 voor het vak en omlaag de Vulling tot 25%. Voeg daarnaast een 1px-lijn toe met deze kleur # 4E6575.
Rastervak maken (samenvoegen met een lege laag), een Laagmasker toepassen en dit vullen met een zwart - wit verloop. Je kunt een grote zachte borstel gebruiken en over het laagmasker schilderen om sommige gebieden te verbergen om de vervaging er zachter uit te laten zien. Eindelijk, net als bij de slechte navigatie, de achtergrond van de doos dupliceren en deze een paar pixels linksonder verplaatsen om een stijl te maken die lijkt op de stijl die wordt weergegeven aan de onderkant van de afbeelding hieronder.
Gebruik het gereedschap Tekst om een vakje van alineatekst te tekenen en het te vullen met Lipsum-tekst, gebruik "Lucida Sans - Regular" als lettertype, formaat 11px, voorloper: 19pt en voorgrondkleur: wit. eindelijk, aangezien CSS3 ons in staat stelt om dit soort details toe te voegen, voeg een 2px zwarte slagschaduw toe aan de alinea van de tekst.
Gebruik dezelfde instructies als getoond in stap 40 en 41 om een achtergrond te maken die deze keer kleiner is. Open de Social Network Icons van de assets en plak de volgende pictogrammen: RSS, Twitter en Facebook, voel je vrij om de iconen van je voorkeur toe te voegen. Gebruik ten slotte het lettertype "Bonveno" met het woord "Netwerk" als een titel en gebruik "Helvetica" (ook Arial werkt prima) om een aantal witte nummers van abonnees, volgers en sympathieën toe te voegen.
Op dit punt hebben we het gedeelte 1 dat de feitelijke welkomstpagina (of startpagina) is voltooid. Het is een goed moment om te bekijken of alles zich in een goede positie bevindt, probeer in evenwicht te blijven met het witte tempo, bijvoorbeeld de ruimte tussen de linkerrand en de welkomsttekst en de rechterrand met de netwerkpictogrammen zijn hetzelfde. Werken met witte ruimte (wat natuurlijk niet letterlijk "wit" is) is echt ingewikkeld, verwerp de impuls om elke kleine ruimte in te vullen met een afbeelding of een pictogram, vaak is een brede en duidelijke achtergrond meer dan duizend glanzende elementen.
Behalve dat al uw lagen zijn geordend, is onderaan de afbeelding een mappenstructuur die ik heb gemaakt. Een van de belangrijkste mappen hier is "Nav", ik ben van plan om een zwevende navigatie te maken met JavaScript, maar voor mock-updoeleinden zullen we het een paar keer moeten dupliceren om te zien hoe de andere "pagina's" of secties er uit zien.
Herhaal voor dit gedeelte in principe het proces van de stappen 39-42, maar plaats de lagen aan de rechterkant van het tweede gedeelte en verander de titel in "Over ons". Op dit punt was ik van plan om een functie met tabbladen toe te voegen, maar verander de posities van de tabbladen naar de onderkant, gebruik het lettertype "Bonveno" en noteer de tabbladen onder de paragraaf about us. gebruik deze voorgrondkleur voor de tabbladen: # C3DFFF en Wit voor het geselecteerde tabblad. Teken tenslotte met behulp van de Polygoon Tool een Sky Blue # D5E5F2-driehoek om de selectie te markeren.
Gewoon om te zien hoe het lijkt op de "Nav" map van de vorige sectie, maar markeer het woord "Over ons" op de navigatielinks. Zorg ervoor dat alle inhoud zich tussen de marges van de sectie bevindt en organiseer de lagen in mappen.
Herhaal de instructies van de vorige stappen om een vak met inhoud te maken, maar gebruik in plaats van geel voor de titel blauw: # 336A91 en gebruik de volgende kleur voor de achtergrond van de doos: # 7FA5D2 en een witte lijnstijl.
Voor deze sectie zullen we een zeer eenvoudige portfoliogalerij ontwerpen, met behulp van het gereedschap Rechthoek een aantal lichtblauwe vierkanten tekenen aan de linkerkant van het onlangs gemaakte inhoudsvak. en een grote rechthoek aan de linkerkant. Voeg aan elke box een Layer Style> Stroke, 1px en White toe. Gebruik het gereedschap Rechthoek om kleine vierkanten rechtsonder in het grote vierkant te tekenen. Dit zijn miniaturen om een soort overgangseffect te regelen en voeg dan een dummy tekst toe over elk vierkant om aan te geven welke inhoud daar geplaatst moet worden. U kunt ook voorbeeldafbeeldingen gebruiken als u dat wilt.
Volg hetzelfde proces als stap 43 en voeg een paar koppelingen toe voor het portfolio voor sociale media, zoals Flickr of LinkedIn. Gebruik het lettertype "Bonveno" voor de titel en deze kleur: # 034D8A.
Dupliceer de map "Nav" nogmaals en markeer het woord "Portfolio". Zorg ervoor dat alles binnen de grenzen van sectie drie valt en organiseer je lagen.
We zijn bijna klaar, laten we nu een container toevoegen voor het contactformulier. In dit geval moet de rechthoek groen zijn # 67A802 en de lijn lichter groen # B8D942. De titel van het gedeelte moet "Contact" zijn en ik gebruik een witte voorgrond om het contrast met de achtergrond te vergroten. Vervaag de box een beetje en dupliceer om de double line-effect te creëren uit de vorige inhoudsvakken.
Eindelijk met behulp van de witte voorgrond en een kleiner lettertype "Bonveno" de contactformulierlabels schrijven. Breng de Slagschaduw die we gebruiken ook aan op de titels van deze labels.
Gebruik het gereedschap Afgeronde rechthoek (5px radius) en teken de volgende vormen die de daadwerkelijke invoergebieden van ons contactformulier worden. Breng vervolgens de onderstaande laagstijlen Inner Shadow, Colour Overlay (# 4B6800) en Stroke (# A8D02F) aan.
Gebruik het lettertype "Bonveno" typ een aantal dummy woorden in de invoervakken, ik gebruik deze kleur als een voorgrond: # AFD437. Onder de invoervakken kunt u ook een telefoonlijn toevoegen (voel je vrij om de informatie aan te passen zoals je wilt).
Laten we tenslotte de knop Contact toevoegen, waarbij we de knop Rounded Rectangle (5px Radius) gebruiken om een knop te tekenen. een slagschaduw toepassen, een verloopoverlay (# B17F02 - # FFD101) en een lijnstijl (# FFDB04).
Voor de tekst van de knop gebruik ik het lettertype "Futura Black", maar voel je vrij om elk ander lettertype te gebruiken. Breng vervolgens een binnenste schaduw, een kleuroverlay (# 564100) en een lijn (# F0C401) aan op de tekstlaag. Je zou iets gelijkaardigs moeten hebben onderaan de afbeelding hieronder.
Accentsconagua