Share
Geconfronteerd, er is een app voor bijna alles. Met nieuwe apps komt innovatie in de manier waarop we onze mobiele producten kunnen presenteren aan potentiële klanten. Apple heeft ons gezegend met een prachtig glanzend en slank merk dat in feite geweldige websites voor ons bouwt. Deze zelfstudie gaat een stap verder en neemt een illustratieve stijl op onder de Apple-glans, om een unieke landingspagina bij elkaar te brengen.
Geconfronteerd, er is een app voor bijna alles. Met nieuwe apps komt innovatie in de manier waarop we onze mobiele producten kunnen presenteren aan potentiële klanten. Apple heeft ons gezegend met een prachtig glanzend en slank merk dat in feite geweldige websites voor ons bouwt. Deze zelfstudie gaat een stap verder en neemt een illustratieve stijl op onder de Apple-glans, om een unieke landingspagina bij elkaar te brengen.
Misschien ben ik old school, maar ben ik nog steeds dol op sites die op 960px zijn gerepareerd. Het is zo'n mooi rond getal, deelbaar door 1, 2, 3, 4, 5, 6, 8, 10 dat het werken met een pseudo-grid zoveel gemakkelijker maakt. Deze tutorial is niet anders; dus ik heb een nieuw document gemaakt van 1000px bij 1200px met richtlijnen die het midden uithakken voor een 960px bij 1200px ontwerp.
Vervolgens gaan we de kolommen instellen die we zullen gebruiken voor de rest van het ontwerp. Ik koos 3 kolommen, met 40px padding ertussen. De kolommen van links naar rechts zijn 240 px, 390 px, 240 px.
Omdat we willen dat ons ontwerp eruitziet alsof het op een boekenplank zit, hebben we een soort behang nodig om erachter te zitten.
Maak een nieuwe laag en vul de hele laag met wit (Shift + F5). Ga vervolgens naar je laageigenschappen en overlay je sierlijke patroon (ik sla de creatie van het patroon over, omdat ik ervan uitga dat iedereen al weet hoe dit te doen).
Na het toepassen van de laagstijl, zou ons document er ongeveer zo uit moeten zien:
We zullen een nieuwe laag maken die het gehele document beslaat en ongeveer 140 px hoog is. We gebruiken dezelfde techniek als stap 2, hoewel we een houtstructuur toepassen in plaats van de sierlijke textuur. Nogmaals, er zijn honderden sites die royalty-vrije houtstructuren weggeven: Google Search for Royalty Free Wood Textures
Het resultaat zou ongeveer zo moeten zijn:
Hernoem deze laag 'plank'.
Het schap ziet er een beetje plat uit, dus we moeten wat diepte toevoegen met behulp van verlopen, schaduwen en hooglichten. Voeg als volgt nieuwe laagstijlen toe voor: Lijn, Slagschaduw & Verloopoverlay:
Je zegt misschien tegen jezelf dat de slagschaduw er op dit moment behoorlijk lelijk uitziet. Akkoord; maar het ziet er niet zo hard uit als we de boeken ervoor hebben. Dit is hoe uw document er nu zou moeten uitzien:
Vervolgens maken we de voorkant van het schap. Dupliceer (Command + J) de 'plank' laag en hernoem het 'voorkant van plank'. Verplaats de laag 'voorkant van plank' naar beneden, zodat de onderkant van de 'plank' laag uitgelijnd is met de bovenkant van de 'top of shelf'-laag. Snij 20px weg van de onderkant van de 'top of shelf'-laag, zodat de hoogte varieert. We willen de illusie geven dat de plank dieper is dan dat de voorkant van de plank lang is.
Vervolgens moeten we enkele van de laagstijlen voor de 'top of shelf'-laag wijzigen. Eerst moeten we de laag 'voorkant plank' onder de laag 'plank' verplaatsen in het palet Lagen. Vervolgens keren we het verloop om (en verlagen we de dekking), omdat we willen dat de schaduw op de bodem staat in plaats van op de bovenkant. Door dit te doen, zullen we een lichtbron creëren die zich in de bovenste hoek van de plank bevindt - precies waar we onze boeken zullen laten zien en het screenshot van onze iPhone.
Na het toepassen van alle laagstijlen, zou uw afbeelding er als volgt uit moeten zien:
Nu kunnen we hier stoppen, maar ik denk dat er iets meer detail is dat op de plank ontbreekt. De hoeken lijken nog steeds een beetje vlak en we willen dat het een ton diepte heeft, dus we zullen enkele eenvoudige 1px hoge markeringslijnen toevoegen om het die extra toegevoegde diepte boost te geven.
Maak de lijn net onder de 2px slagrand van de 'schap' laag. Vervolgens kunt u een kleur kiezen om te vullen (Shift + F5) die lichter is dan alle houtnerf op het schap of gewoon vullen met wit en de dekking aanpassen. Het resultaat geeft je dat extra beetje diepte:
We zullen ons houtpatroon hergebruiken om de plank hierboven te creëren om een soort "achterkant" naar onze boekenplank te creëren. Het idee hier is om het te laten lijken alsof we de iPhone en boeken boven op de boekenplank hebben geplaatst en onze aanvullende informatie erin hebben. We maken deze laag onder de planklagen in de stapel.
Maak een selectie, vul met je houtpatroon (Shift + F5). Hernoem deze laag 'achterkant van plank'.
Omdat onze lichtbron naar de bovenste voorhoek van de plank is gericht, moeten we de achterkant net iets donkerder maken om deze meer op een boekenplank met diepte te doen lijken, en minder op houten vloeren. Het is eenvoudig om dit te doen met Layer Styles; Voeg een "Colour Overlay" -laagstijl toe aan je laag op de plank en stel de kleur in op zwart. Pas de dekking tot 50% aan en je zou nu het donkerdere hout voor de achterkant van de boekenplank moeten zien.
Na een kleine aanpassing met de dekking van mijn sierlijke achtergrond, zou je afbeelding er ongeveer zo uit moeten zien:
Nu we ons hele document hebben ingesteld, evenals alle achtergrondlagen die voor het thema zijn gemaakt, gaan we door en maken we alle elementen die boven de achtergrond blijven (technisch, op de achtergrond).
Voor het logo koos ik het lettertype Rockwell (het is mijn obsessie als van laat) op 60px. Maak een nieuwe tekstlaag met tekst: "Lees het". Om dat bubbelgevoel te krijgen, moeten we enkele laagstijlen toevoegen voor lijn, verloopoverlay, binnenschaduw, buitenste gloed (zowat elke laagstijl die u eventueel kunt toevoegen). Dit zijn de instellingen:
Nadat u de laagstijlen heeft toegepast, lijnt u uw logo uit met de meest rechtse gids. Het zou er ongeveer zo uit moeten zien:
Nu hebben we het bladwijzerslint nodig voor de "i". We beginnen met het maken van een nieuwe vorm (die ik helemaal opnieuw heb gemaakt met de tool Polygonal Lasso). Vul je selectie in elke gewenste kleur. Het zou in deze zin moeten zijn:
Omdat een effen zwarte bladwijzer buitengewoon lelijk is, moeten we er wat glans aan toevoegen. Alles wat we hier nodig hebben is een slagschaduw, lijn en verloop overlay om het lint op te laten vallen:
Uw bladwijzervoorschrift zou dit nu leuk vinden:
Het enige dat overblijft is om de "i" toe te voegen, die we met hetzelfde lettertype (Rockwell) met witte tekst zullen gebruiken. Voeg een lichte innerlijke schaduw toe (70% dekking, 90 graden, afstand: 1, choke: 0; maat: 1) en je moet helemaal klaar zijn. Ik heb ook een patroon aan mijn bladwijzer toegevoegd, maar dit is eigenlijk wat u zou moeten zien:
Maak je geen zorgen; je hoeft niet alles helemaal opnieuw te creëren. Het mooie van het web is nu dat er duizenden opties zijn voor stockillustraties - wat u uiteindelijk tijd bespaart. Ik vond de boeken hier op iStockphoto. Deze exacte boeken zijn niet helemaal van cruciaal belang voor deze tutorial. Als u wilt, kunt u altijd doorgaan naar het volgende gedeelte.
Als je ervoor kiest om de boeken te kopen, plaats ze dan op je afbeelding halverwege de bovenkant van je plank:
De boeken zijn veel te plat op zichzelf, dus we voegen nog een aantal perspectiefschaduwen toe (zoals we deden met de plankhoeken) zodat ze eruitzien alsof ze op de plank liggen. Begin eerst, hernoem de nieuwe laag met de boeken in 'boeken'.
Voeg een slagschaduw toe aan de laag 'boeken' met de volgende instellingen: Dekking: 19%; Hoek: -90; Afstand: 10; Spread: 10; Grootte: 15. Kies voor de kleur een bruin uit de laag 'achterkant plank'. We gebruiken hier bruin omdat het zwart gewoon te veel lijkt en niet overeenkomt.
Om de schaduw onder de boeken te maken, maken we een nieuwe zwarte ellips over de volledige breedte van de boeken die verticaal staan. We zullen nadien het achterliggende boek behandelen.
Rasteer de zwarte ellips en ga naar Filter> Vervagen> Gaussion Blur. Gebruik een straal van 4,7 om de gewenste spreiding te krijgen. Zet de dekking van de zwarte ellipslaag op 70% om het een beetje zachter te maken. Het resultaat zou er als volgt uit moeten zien:
Herhaal dezelfde techniek voor het scheve boek, maar met een veel kleinere ellips. Het zou er ongeveer zo uit moeten zien:
Geen iPhone-bestemmingspagina is compleet zonder een grote, glanzende iPhone - en deze tutorial is daarop geen uitzondering. Ik heb de iPhone-sjabloon van de geweldige mensen van teehan + lax gebruikt om naar het apparaat te emuleren. Verwijder alle lagen die u niet op uw iPhone wilt opnemen en sleep deze naar uw document. Plaats het iets lager op de bovenste plank om de illusie te geven dat de iPhone dichter bij je staat dan de boeken. We willen die mooie iPhone front & center.
Uiteraard is dit waar je helden screenshot van je app zou gaan. Ik ga niets toevoegen aan de mijne, maar je bent zeker welkom bij het volgen van de tutorial. We zullen ook dezelfde techniek uit stap 6 gebruiken om een schaduw aan de onderkant van de iPhone toe te voegen. Uw uitvoer moet lijken op:
Slechts één laatste item (een van de belangrijkste) is de prijssticker. Begin door een cirkel te maken in de rechterbovenhoek van de iPhone. Hernoem deze cirkel in 'prijssticker':
Gebruik vervolgens de volgende laagstijlen voor Slagschaduw, Afvlakken & reliëf, Overlapping met kleurovergang en Lijn. Dit wordt een belangrijke laagstijl, omdat we het meerdere keren gebruiken op de rest van de site voor knoppen, enzovoort.
Dit creëert iets volledig boterachtig:
Voeg wat tekst toe voor de prijs met een 1px slagschaduw naar de top en onze sticker is klaar:
Tot nu toe is dit wat we hebben gemaakt (ziet er goed uit, en het beste van alles: zeer uniek):
We missen nog steeds onze knop "Oproep tot actie" om mensen naar de AppStore te halen om onze app te kopen. We gaan die tekst maken alsof deze is 'gebeiteld' aan de voorkant van de plank (met een perfect lettertype).
Dus hier gaat het: maak wat nieuwe tekst; Ik gebruikte: "Je boekencollectie zal je er dol op zijn." Ik gebruikte Gotham op 36px om de gewenste look te krijgen. Voor die tekst moeten we twee laagstijlen toepassen om het die gebeitelde look te geven:
De gewenste uitkomst, afhankelijk van het lettertype, zou ongeveer zo moeten zijn:
Nu moeten we de AppStore-knop toevoegen. Ik heb een iPhone-pictogram van IconFinder.net gebruikt om de knop "Beschikbaar in de AppStore" opnieuw te maken.
Als u de knop wilt maken, maakt u een nieuwe, afgeronde rechthoek met een straal van 10 px. Ik heb mijn rechthoek 240 px breed en 74 px hoog gemaakt.
Omdat we al onze mooie, kleine laagstijl voor knoppen hebben gemaakt toen we de prijssticker in stap 7 creëerden, kunnen we eenvoudig de laagstijl van die sticker kopiëren en de laagstijl op onze nieuwe knooplaag plakken. Klik hiervoor met de rechtermuisknop op de laag waaruit u de laagstijl wilt kopiëren en kies "Laagstijl kopiëren" in het pop-upmenu. Selecteer de laag waarop u deze laagstijl wilt toepassen en klik met de rechtermuisknop en selecteer "Plak laagstijl". Zo eenvoudig is het.
Plaats het iPhone-pictogram dat je hebt gedownload van IconFinder op de top van de knop, en geef het laagstijlen van:
Voeg de AppStore-tekst toe en hergebruik de Layer-stijl die u hebt gemaakt voor het iPhone-pictogram in de tekst. Uw resultaat zou moeten lijken op:
Dit is waarschijnlijk het minst interessante deel van het ontwerp, maar het meest interessant voor iedereen die op zoek is naar uw app. Maak een nieuwe kop, formaat 30px tekst (ik heb Rockwell opnieuw gebruikt) en voer de tekst "Functies" in. Weet je nog die gidsen die we aan het begin van deze tutorial hebben gemaakt? We zullen ze nu gebruiken voor onze 3 kolommen; pas dus de tekst Functies aan de meest rechtse gids.
Pas een aantal laagstijlen toe op deze tekst:
Maak vervolgens een cursieve tekst hieronder en voeg enkele kogels toe. Makkelijk genoeg juist?
We moeten pronken met onze app. Niet alleen zal het screenshot van onze iPhone afbeeldingen van onze app bevatten, maar we moeten ook vergrote afbeeldingen van onze app laten zien zodat mensen precies weten wat ze kunnen verwachten.
Eerst dupliceren we (Command + J) onze tekstlaag 'Functies' in stap 9. Wijzig de tekst om 'Screenshots' te lezen en verplaats deze zodat deze in de middelste kolom wordt geplaatst.
Vervolgens maken we de screenshots. We beginnen met het maken van de buitenste inzetlaag. Begin met het maken van een nieuwe afgeronde rechthoekvorm, 180 px bij 180 px met een straal van 10 px. Kopieer de Layer-stijl van de gebeitelde tekst in stap 8 en plak deze op je afgeronde rechthoekige vorm. Dupliceer de laag (Command + J) en spreid ze gelijkmatig uit in de 390px brede kolom:
Nu maken we een tijdelijke aanduiding voor de afbeeldingen (deze zou u uiteraard later vervangen door de schermafbeeldingen van uw app). Maak een nieuwe afgeronde rechthoek, maar deze keer met instellingen:
Dupliceer de laag en verplaats de gedupliceerde laag boven het andere screenshot inzet.
Voeg een kleuroverlay toe aan beide lagen (met kleur # f6f3eb) voor de tijdelijke aanduiding.
Ten slotte moeten we het zoompictogram toevoegen. Begin door een cirkel in de rechterbovenhoek te tekenen (zoals je deed voor de prijssticker). De mijn heeft een diameter van ongeveer 30px.
Plak dezelfde laagstijl van de prijssticker op de nieuwe cirkel. Ik heb de kleuren Verloop en Lijnkleur aangepast om een iets ander uiterlijk te krijgen dan het groen.
Ten slotte moeten we het pictogram "Zoom" toevoegen. Ik gebruik het zoompictogram van de geweldige Glyphish-pictogramserie. Naar
voltooi het zoompictogram, we moeten gewoon een lichte innerlijke schaduw toevoegen (1 px of zo) om het wat diepte te geven.
Dupliceer de zoompictogramgroep die u hebt gemaakt en verplaats deze naar de andere miniatuur. Toen je dit ging implementeren, zou het zeker cool zijn om wat te doen
cool inzoomen op deze screenshots toen je erop klikte. Misschien voor mijn eerste Nettuts :).
Last but not least voor de hoofdsectie zijn de testimonials. Ik heb de tekstballonnen van een afgeronde rechthoek en een aangepaste vorm.
We beginnen met de afgeronde rechthoek. Maak een nieuwe afgeronde rechthoek met instellingen:
Kies nu het Custom Shape Tool en zoek de tekstballon om de staart te maken:
Maak een tekstballon boven de afgeronde rechthoeklaag, zodat alleen de staart niet overlapt.
Selecteer beide lagen en voeg ze samen samen (Command + E). Het resultaat zou één vorm moeten zijn waar we wat styling op kunnen toepassen.
Nogmaals, laten we onze Layer Style van de prijssticker kopiëren en de laagstijl op onze testimonial bubbel plakken (we zullen het in een seconde houtstructuur maken). We doen dit omdat we de meeste stijlen van de sticker willen, zoals de stijlen Beveling, Drop Shadow en Stroke. We gaan slechts een beetje met de textuur en kleuren spelen om het de juiste look te geven. Door dergelijke laagstijlen te hergebruiken, kunt u uw ontwerpen consistent houden en uzelf een hoop tijd besparen doordat u niet steeds dezelfde effecten opnieuw hoeft te maken.
Eerst zullen we de Gradient Overlay veranderen. We hebben het nodig van een kleur tot transparant (omdat we willen dat de houtnerf erachter komt). Ik heb ervoor gekozen om het verloop te laten vervagen tot een zeer donkerbruin: # 292115.
Ten slotte doen we een patroonoverlay van de houtstructuur om deze meer te laten overvloeien in de achtergrond.
Pas de lijnkleur aan om donkerder bruin te worden (niet groen) en u bent helemaal klaar!
Het enige dat u nu hoeft te doen, is uw enthousiaste klantrecensies toevoegen en u hebt een unieke testimonial-zeepbel. Dupliceer de testimonialgroep
en verplaats het recht onder de andere, en dat is het!
We beginnen met het maken van de omringende container waarin de tekst en het formulier zich bevinden. Ik heb een afgeronde rechthoek gemaakt met een straal van 40 px en een breedte van 960 px (onze paginabreedte). Ik heb de laagstijl uit de tekst in stap 8 geplakt om het die inzet te geven. Zoals ik eerder heb vermeld, heb ik de neiging mijn laagstijlen zoveel mogelijk opnieuw te gebruiken omdat dit consistentie garandeert.
Ik ging opnieuw naar IconFinder om het postpictogram te vinden - gelukkig voor ons
het 64px bij 64px-pictogram was precies wat we nodig hadden. Plaats dat pictogram in de linkerhoek van onze inzet bar - het wordt het anker
voor de nieuwsbrief en help de knop Verzenden in evenwicht te brengen.
Voeg vervolgens het volgende toe: "Wilt u het laatste nieuws? Word lid van de verzendlijst." tekst. Ik heb de Gotham opnieuw gebruikt, maar met een iets kleiner formaat op 24px. Maken
de tekstkleur # 161008 (omdat we niet willen dat deze te veel opvalt) en voeg hieronder een lichtbruine 1px slagschaduw toe (we maken opnieuw die diepte).
Wauw! We zijn zo dichtbij. Het enige dat we moeten doen is het e-mailformulier en de knop toevoegen en we zijn klaar. Maak een nieuwe afgeronde rechthoek met een straal van 20 px
(de helft van wat de buitenste afgeronde rechthoek is) en een hoogte van 40 px (zodat we geen rechte randen aan de twee kanten hebben).
Een ding om op te merken is hoe consistent de afstand aan de rechterkant is. Door de innerlijke radius te halveren, houden we een consistente opvulling tussen de buitenste container en de binnencontainer.
Gebruik dezelfde voorinstellingen voor de afgeronde rechthoek (20px radius, 40px hoogte) om een nieuwe afgeronde rechthoekknop te maken. Kopieer de Layer-stijl van onze zoomiconen uit stap 10 (de roodachtige oranje kleur). Plak die laagstijl op je nieuwe knop. Je zou zoiets als dit moeten hebben:
Het enige dat u nu hoeft te doen, is de "Submit" -tekst toevoegen en u bent klaar!
Dat is het. We hebben een unieke iPhone-bestemmingspagina gemaakt; voeg een nieuwe illustratieve stijl samen met het glanzende iPhone-gevoel. Deze zelfstudie is niet alleen voor een boektoepassing - u kunt de boeken op het schap uitschakelen voor vrijwel alles (dus converteer het naar een tafel voor drankjes). Ik hoop dat je ervan genoten hebt!
Accentsconagua