Share
In deze zelfstudie gaan we door met deze serie over het maken van een promotiessite voor een iPhone-app door ons vorige Fireworks-gebouwde draadframe te maken en kleur, textuur, afbeeldingen en effecten toe te voegen om dit ontwerp in Photoshop op te lossen. We zullen enkele interessante elementen gebruiken, zoals iPhone-afbeeldingen en een stijlvolle aurora-vectorachtergrondillustratie. We eindigen met een professioneel siteontwerp dat klaar is om gecodeerd te worden! Laten we ernaar toe gaan!
Bekijk het webdesign dat we gaan maken. U kunt hier het uiteindelijke afbeeldingsvoorbeeld hieronder of de afbeelding op ware grootte bekijken.
Grijp de "wireframe_final.psd" die we hebben geëxporteerd in onze laatste zelfstudie in deze reeks (een promotiewebsite voor een iPhone-website bouwen in Fireworks). Hernoem dit bestand naar "final.psd," of de naam van je voorkeur.
Lees hieronder hoe het geïmporteerde bestand redelijk goed opent in Photoshop. Er is een probleem met de tekstvakken die langer zijn dan het document (zie de tweede afbeelding hieronder, merk op hoe lang het vak is en ga verder langs de onderkant van het document). Ik weet niet een snelle manier om dit op te lossen. Het is een eigenaardigheid die ik in de vorige tutorial noemde. Als iemand een goede oplossing weet, laat het me dan zeker weten. Dus, ga door en kopieer de tekst van elk element, maak vervolgens een nieuw tekstvak opnieuw en plak de tekst terug op zijn plaats, of laat het gewoon zoals het is.
Ook, ga je gang en verwijder de "Notes" -map ook, want we hebben de notities hier niet nodig.
Ik werk graag eerst aan de dominante (en belangrijker) visuele elementen van het ontwerp en bouw daarna vanaf daar. Dus laten we aan de slag gaan met het "promotie" -gebied.
We gaan hier een aurora-illustratie aan de achtergrond toevoegen. Ian Yates schreef een geweldige Illustrator-tutorial over het maken van een Aurora Borealis Vector Sky in Illustrator. Er zijn een paar voordelen aan het gebruik van een vectorafbeelding hier. Een daarvan is dat het stilistisch opvalt met een unieke look. We kunnen het ook gebruiken voor andere grote merkgebieden.
Na het voltooien van de aurora borealis vector tutorial ga je gang en importeer je je unieke resultaat in Photoshop. Je kunt zien dat de enige verandering die ik heb gemaakt het omdraaien van het ontwerp was. Je moet natuurlijk je eigen creatie maken voor je werk. Ik heb de illustratie geplakt als Pixels omdat ik geen wijzigingen in het vectorbronbestand hoef door te voeren nadat ik het heb binnengebracht, dus het is niet nodig om een slim object te gebruiken.
Sleep het vectormasker nu van onze promotionele achtergrondvorm naar ons aurora borealis-ontwerp.
Dit past het vectormasker toe zoals hieronder getoond, zorg er alleen voor dat het op een lijn staat zoals u het wilt.
Er is een spectaculaire freebie van een iPhone-afbeelding met veel grafische afbeeldingen van de iPhone. Ga je gang en download de iPhone GUI PSD 3.0. Open het bestand en sleep de iPhone-afbeelding naar uw werkdocument. Schaal het vervolgens op en lijn het uit met de hulplijnen zoals getoond in de tweede afbeelding hieronder. Zorg ervoor dat u de afbeelding grijpt zoals weergegeven. Het enige schermcomponent dat werd vastgepakt, behalve de telefoon, is een transparante schuine schermglans.
Nu voegen we de aurora borealis-illustratie toe aan de iPhone. Dit maakt het ontwerp er alleen maar interessanter uit. Op de uiteindelijke website zou hier een videobestand goed staan, wat de app in actie laat zien. Breng nog een kopie van de aurora borealis-illustratie bij. Je kunt deze keer een kleinere versie hiervan toevoegen, omdat we een kleinere ruimte vullen. Plak het opnieuw als Pixels.
Nu met de afbeelding die op de iPhone is geplaatst in de positie waarin u deze wilt plaatsen en de illustratie die is geselecteerd, gaat u naar Laag> Vectormasker> Alles onthullen. Pak vervolgens het gereedschap Rechthoek (U), zorg ervoor dat het is ingesteld op Paden in de linkerbovenhoek en teken uw scherm. Als je het niet de exacte maat krijgt die je de eerste keer nodig hebt, druk dan op Command + T en pas het formaat van het rechthoekige vectormasker naar wens aan.
Zorg ervoor dat je je lagen overzichtelijk houdt terwijl we dit ontwerp blijven maken.
We hebben zojuist twee dominante elementen op de pagina toegevoegd. Ook is de aurora-illustratie die we hebben toegevoegd een geweldige bron om wat kleur van te halen om het kleurenschema van deze pagina te maken. Ga je gang en dubbelklik op de standaardlaag "Achtergrond" om deze te ontgrendelen, noem deze "achtergrond" en plaats hem in een nieuwe "achtergrond" -map.
Pak het gereedschap Verfemmer (G) en verander de voorgrondkleur in een donkerblauwachtig grijs (# 536475), die ik in de illustratie heb geselecteerd. Wijzig nu de primaire navigatie-achtergrond in de map "header" donkerblauw (# 212b3f), die ook uit de illustratie is gesampled. Geef de achtergrond op het "onderste" gebied dezelfde donkerblauwe kleur voor de achtergrond.
We zullen op dit moment ook de kleur van sommige van onze navigatieknoppen wijzigen. De afbeelding hieronder laat zien waar we ons tot nu toe bevinden in dit ontwerp. Wijzig de achtergrondkleuren van de primaire navigatieknop in een iets lichtere grijsblauwe achtergrond (# 5e7285) dan de pagina-achtergrond, behalve de knop voor de huidige pagina. We willen de huidige paginaknop de indruk geven dat hij wordt ingedrukt. Maak hem dus dezelfde kleur als de pagina (# 536475). We zullen dit aanzienlijk later in de tutorial verbeteren wanneer we styling toevoegen.
Selecteer in het gebied "secondary_nav" de grotere achtergrond achter het Aurora-pictogram en verander de kleur in een grijsachtig blauw (# 475665) die iets donkerder is dan de achtergrond van de pagina. Nogmaals, we laten deze blik inspringen. Ga ook door en gebruik dezelfde lichtere grijsblauwe achtergrond (# 5e7285) als de primaire navigatieknoppen op de voetteksten.
U kunt zien hoe donker het is met ons paginaontwerp pijnlijk duidelijk dat het tijd is om aan de tekstkleuren te werken. We hebben de tekst meestal met donker op licht voor het draadframe ontworpen, maar nu moeten we in het donker naar licht gaan. Verander het grootste deel van uw tekst in wit. Ik zal de enkele uitzonderingen hieronder aangeven. Maak ook tekst op, verplaats elementen en experimenteer met het lettertypegewicht terwijl u dit doorloopt.
Ik stel een deel van de tekst in Myriad Pro in, hoewel ik in gebieden die worden gecodeerd en geen afbeeldingen, vaak Helvetica gebruik voor dit ontwerp, dat alomtegenwoordig is op computersystemen. Ik heb ook Helvetica voor sommige gebieden gebruikt, dat ik een iets ander uiterlijk wilde hebben dan de Myriad Pro die werd gebruikt. Ik heb de Aurora-naam ingesteld in Futura Condensed Extra Bold, waar het zou worden gebruikt voor branding.
Je ziet dat de tekst in de meeste "header", "secondary_nav", "promotie" en "body" wit is. Een paar uitzonderingen zijn het logo-gebied (dat voorlopig slechts een tijdelijke aanduiding is), de tekst "Aurora App" die donkerblauw is (# 131828) om hem te laten opvallen en de koppen voor het lichaam die hetzelfde donkerblauw zijn.
We moeten ook werken aan de "onderste" sectietekst. Ik heb alle kopjes in Myriad Pro Bold op 20pt gezet. De kleur is helder babyblauw (# 85a1bc). Ik heb hetzelfde blauw gebruikt voor de tekstlinks. Ik heb de rest van de tekst in het wit gezet met een kleinere Helvetica Bold.
De "voettekst" heeft slechts een paar kleurwijzigingen. De links werden veranderd in een nog helderder babyblauw (# 97b8d8), behalve de actieve link die wit en onderstreept is. De copyrighttekst is 12pt Helvetica en donkerblauw (# 212b3f).
Maak eerst een screenshot van ons PSD-bestand van het gebied waarin we het logo plaatsen (met de tekst van de tijdelijke aanduiding voor het logo uitgeschakeld). Start Illustrator op. Plaats de screenshot op zijn eigen laag en vergrendel deze. Ik heb ook de zichtbaarheid van het tekengebied uitgeschakeld (Shift + Command + H). Maak nu een laag voor uw logo en voeg de tekst 'iLoveMyApps' in, die fungeert als de bedrijfsnaam voor deze zelfstudie. Zet de tekst in Cooper Std Black Italic op 30pt, en vul deze wit in, zoals hieronder weergegeven. Nu met de geselecteerde tekst, ga je naar Tekst> Contouren maken en vervolgens de tekst van groep opheffen (Shift + Command + G). Wis ook de "o", omdat we die met een hart zullen vervangen.
Laten we nu aan de hartvorm werken. Schakel eerst het raster in (Command + ") en schakel Snap to Grid in (Shift + Command +"), waarmee u de vorm gemakkelijk kunt tekenen. Ga je gang en maak een halve hartvorm met de Pen Tool. Ga nu naar Object> Transformeren> Reflecteren en pas een kopie toe met de onderstaande instellingen. Plaats nu de binnenrand van beide halfhartige vormen en klik vervolgens in het palet Pathfinder op Samenvoegen, wat ons een uiteindelijke hartvorm geeft.
Schaal nu de hartvorm naar beneden en plaats deze zoals getoond. Werk ook aan het uit elkaar plaatsen van elke letter van de tekst totdat deze er goed uitziet. Ik wilde dat de hele tekst als één zou verschijnen, maar ik plaatste elk woord er een beetje uit om de leesbaarheid te vergroten. Het leest echter nog steeds als één woord. Kopieer en plak het uiteindelijke logo nu als een slim object in Photoshop.
We blijven ons van boven naar beneden werken, maar onthoud dat je tijdens het ontwerpen meer kunt stuiteren in verschillende delen van het ontwerp en kunt experimenteren met verschillende looks en stijlen, wat geweldig is en je vrij voelt. om dat te doen.
Selecteer de achtergrond in het gedeelte "koptekst" en pas vervolgens de onderstaande laagstijlen toe. Dit geeft de bovenkant van het lichaam een kleine highlight en er wordt een subtiele schaduw op het header-gebied gegoten, waardoor het een beetje naar achteren wordt gedrukt.
Breng nu de onderstaande stijlen aan op ons logo. Voor de verloopoverlay gaat het verloop van grijs (# c0c4c9) naar lichtgrijs (# e3e5e7).
Eerst zullen we werken aan de non-actieve achtergrondstijlen van de primaire link, dit betekent alles behalve de link 'Apps'. Pas de onderstaande stijlen toe en gebruik kleuren die er goed uitzien. Opmerking: ik kreeg veel inspiratie van de Meta Lab-site voor dit deel van het ontwerp. Ik ben dol op het werk van dit bedrijf, bekijk hun folio terwijl je daar bent.
Het is altijd belangrijk om je voor te stellen waar de lichtbron in jouw ontwerp is. We passen een aantal subtiele lichteffecten toe, waardoor dit ontwerp een moderne uitstraling krijgt, hoewel we nog steeds de lichtbron in gedachten moeten houden.
Stel je voor dat er een lichtbron komt van de bovenkant van de pagina die recht naar beneden schiet, wat ons de lichtrichting geeft voor veel van de stijlen die we zullen toevoegen. Natuurlijk kun je je meer dan één lichtbron voorstellen, en daar kun je enigszins van afwijken, maar als je de primaire lichtbron voor het licht in je achterhoofd houdt, kun je de stijlen die je toepast, logisch maken en visueel samenwerken.
Pas nu de onderstaande stijlen toe op de link "Apps" -link, onze actieve link en laat het eruitzien alsof deze is ingedrukt.
Breng nu de volgende Bevel and Emboss-stijl aan op de tekst in de primaire navigatie om deze een beetje te laten opvallen. Het effect op de tekst is subtiel, maar merkbaar.
Laten we eerst onze iPhone-app-pictogrammen toevoegen. Gebruik voor het hoofd Aurora-pictogram dezelfde aurora-afbeelding die wordt gebruikt in het promotiegebied. Versleep het vectormasker dat momenteel wordt toegepast als een grijs vierkant, naar een verkleinde versie van de aurora-illustratie, raadpleeg stap 2 voor meer informatie hierover. Laten we hier nu wat stijl toevoegen. Voeg de volgende laagstijlen toe aan het pictogram.
Pas dezelfde stijlen toe op de buitenste pictogramachtergrond als bij de achtergrondknop "Apps" in stap 7. Houd Ctrl ingedrukt en klik op de laagminiatuur van de achtergrond van de knop "Apps" en selecteer Laagstijlen kopiëren. Selecteer vervolgens de buitenste achtergrond, houd Control ingedrukt en klik op de laagminiatuur en kies Laagstijl plakken, zoals hieronder weergegeven.
Nu gaan we wat stijl toevoegen aan onze andere toepassingspictogrammen. Dit zijn slechts plaatshouders om de klant te tonen waar andere pictogrammen naartoe zouden gaan. Dus ik wil ze een gelijkaardige uitstraling geven als het Aurora-pictogram, maar laat ze niet opvallen. Laten we beginnen met het invullen van een patroon. Eerst maken we het patroon.
Open een 4px bij 4px nieuw document dat is ingesteld voor internet. Pak de Pencil Tool, zet de penseelgrootte op 1px en schilder vier rechthoeken zoals hieronder wordt getoond. De donkerste rechthoek is # 05020a en de lichtste is # 251440 deze kleur. Druk op Command + A om Alles te selecteren en ga vervolgens naar Bewerken> Patroon definiëren en noem deze "Paars regen." Ja, ik deed waar een shirt met dit patroon erop stond in de jaren tachtig op de lagere school.
Selecteer het eerste pictogram voor tijdelijke aanduidingen. Merk op hoe het momenteel een vormlaag is. We moeten dat rasteren. Ga dus naar Laag> Rasteren> Inhoud vullen, die ons vectormasker op zijn plaats houdt, maar de vulling rastert. Het resultaat is een gerasterde laag waarop een vectormasker is toegepast - snel en eenvoudig. Ga door en doe dit voor elk pictogram van de tijdelijke aanduiding.
Grijp het gereedschap Verfemmer (G) en kies in de linkerbovenhoek Patroon uit de vervolgkeuzelijst, zorg dat ons patroon "Paarse regen" is geselecteerd en klik vervolgens één keer op elk pictogram van de tijdelijke aanduiding om het patroon toe te passen. Klik nu op Control-klik op de miniatuur van het Aurora-pictogram en kopieer de laagstijl en plak deze op elk pictogram van de tijdelijke aanduiding. Pas ook de spatiëring van de toepassingsnamen aan om ruimte te maken voor de stijlen.
Laten we ook onze standaardplaceholderknop voor de app store aanpassen aan de rechterkant van dit gedeelte. Een eenvoudige manier om deze knop beter in ons ontwerp te laten samenvloeien, is om de achtergrondkleur te veranderen. Ga naar Afbeelding> Aanpassingen> Kleurtoon / verzadiging en pas de hieronder getoonde instellingen toe, of die van uw keuze.
Laten we beginnen met de achtergrond en knoppen. Eerst zullen we stijl toepassen op ons grote achtergrondgebied. Selecteer de aurora-illustratie en pas de volgende laagstijlen toe. Dit geeft ons een hoogtepunt aan de bovenkant en een streekstreek rond het gebied.
Pas nu dezelfde stijlen toe op de achtergrond in de rechterbovenhoek van het prijsgebied, maar voeg ook de onderstaande stijlen toe. De kleuren die voor de paarse verloopoverlay worden gebruikt, worden uit de aurora-afbeelding genomen. De kleuren van het verloop gaan van paars (# 68448f) naar donkerder paars (# 320580) en vervolgens terug naar een paarse middentint (# 65428c).
Pas dezelfde laagstijlen toe op onze hoofdkop 'Verlicht je iPhone', zoals we in stap 7 deden. Je kunt de laagstijl vanaf daar kopiëren en plakken. Pas dezelfde Bevel and Emboss-stijl toe op de prijstekst en de subkop, zoals we hebben toegepast op de primaire navigatietekst in stap 7. Misschien wilt u de dekking van de markeringsmodus of de schaduwmodus wijzigen voor de arcering, experimenteer met wat ziet er het beste uit. Selecteer ook de horizontale regel, die een 1px hoge vorm is, en verander de kleur in zwart. Pas de instellingen hieronder ook toe.
Breng nu de volgende laagstijlen aan op onze hoofd-call-to-action-knop. We hebben hier een slagschaduw op geplaatst, zodat deze meer van de achtergrond afsteekt. Het heeft een heldere kleur die de aandacht trekt. De plaatsing trekt ook de aandacht. De verloopoverlay heeft vergelijkbare kleuren als de overlay die wordt gebruikt voor de prijsachtergrond, maar er zijn slechts twee kleuren toegepast, die van paars (# 68448f) naar donkerpaars (# 320580) gaan. We voegen in een ogenblik een pijl toe om het meer op te laten vallen.
Grijp nu het Ellips-gereedschap (U) en gebruik het om een vormlaag te maken zoals hieronder getoond. De kleur doet er niet toe, omdat de stijlen het toch zullen overlappen. Herschik de knoptekst om er uit te zien in balans met het toegevoegde element. We gebruiken deze cirkel om binnenkort een downloadpijl in te plaatsen. Pas de volgende laagstijlen op de knop toe (de kleuren in de verloopoverlay gaan van # 9cc67e naar # 3a4f66).
Nu maken we onze pijl, plaatsen deze in Photoshop en stylen hem.
Open Illustrator en maak een webdocument. Schakel Weergave> Raster tonen en Weergave> Uitlijnen op raster in. Gebruik het gereedschap Pen om een pijl te tekenen met behulp van het raster. De grootte doet er niet toe. Verander het formaat nu naar een vorm die ongeveer zo groot is als de grotere pijl hieronder. Ga nu naar Effect> Stijl> Ronde hoeken en pas met een straal van 0,139 inch toe. Kopieer nu de pijl en plak als Vector slim object in Photoshop. Opmerking: ik gebruik zwart hieronder voor demonstratiedoeleinden, maar de pijl moet wit zijn.
Breng nu dezelfde stijlen op de pijl aan als bij ons logo in stap 7 en schaal om in de ruimte te passen. Het resultaat wordt getoond in de tweede afbeelding hieronder.
Dit is wat we tot nu toe hebben. Het bovenste gedeelte ziet er goed uit. Laten we nu naar het lichaam gaan. We hebben het grootste deel van de site nu gestileerd. Het zal vanaf hier vlot varen.
Er zijn niet veel stijlen die hier moeten worden toegepast - slechts een paar. Laten we beginnen met de titels. We willen ze ingesprongen laten lijken door de randen van het binnenste benedenpersonage te benadrukken, een stijl die vaak wordt gebruikt op Apple-sites. Pas de onderstaande stijl op de titeltekst "Aurora" toe. Pas dezelfde stijl ook toe op de titels "Screenshots" en "Functies". Met deze latere twee titels verander je de dekking echter naar 40% (al het andere in deze Drop Shadow Layer-stijl is hetzelfde).
Pas dezelfde laagstijl toe op de opsommingstekens onder de kolom 'Functie', zoals toegepast op de titel. De resultaten tot nu toe zijn hieronder weergegeven.
Kopieer nu de horizontale regel van het gedeelte 'promotie', verander de kleur naar donkerblauw (# 131828) en schaal deze naar het gebied boven de titel 'Schermafbeeldingen'. Let op hoe de stijl wordt behouden.
Kopieer nu dezelfde horizontale regel en gebruik meerdere kopieën ervan in de laatste kolom van dit gedeelte, zoals hieronder weergegeven. Zorg ervoor dat u de bestaande niet-gestileerde horizontale regels verwijdert.
Volg nu dezelfde stappen voor deze plaatsaanduidingafbeeldingen als in stap 10. Pas dezelfde laagstijlen en opvulling "Achtergrond met paarse regen" toe. Dit is slechts een snelle manier om dit gebied er goed uit te laten zien voor de beoordeling door klanten voordat u de werkelijke foto's krijgt die daar later zullen komen. De laatste sectie "lichaam" wordt hieronder getoond.
Laten we eerst dezelfde Bevel- en Emboss-laagstijl toepassen op onze titels als bij de tekst in onze primaire navigatie in stap 8. Sleep nu vier exemplaren van onze gestileerde horizontale regel naar beneden en wijzig zo nodig de grootte, of pas dezelfde stijlen toe en inkleuren op de bestaande horizontale lijnen zoals we ze in de sectie "body" hebben gedaan.
Vervang de resterende horizontale regels van dit gedeelte door streepjes. U kunt hiervoor het gereedschap Tekst en de streepjescode gebruiken. Hiervoor heb ik Myriad Pro op 14pt gebruikt. Dit is iets dat gecodeerd zal worden in CSS, maar we willen ervoor zorgen dat we dit effectief communiceren in het ontwerp.
Pas dezelfde laagstijlen op onze knoppen toe als in onze primaire navigatie. Kopieer die laagstijlen gewoon naar beneden. Vergeet ook niet de tekst van de knoppen te stylen. Vervang nu onze twitter-vogel door een versie in kleur, die je gratis kunt downloaden in het Practika Icon-pakket van Smashing Magazine.
Pas de volgende laagstijlen toe op de achtergrond van het gedeelte 'onderaan' en we zijn klaar!
Er zijn veel creatieve website-oplossingen die u kunt maken met slechts een handvol gekozen elementen, een interessant kleurenschema, gebruik van de juiste stijlen en aandacht voor subtiele lichteffecten. De uiteindelijke afbeelding is hieronder. U kunt hier een grotere versie bekijken.
Accentsconagua