Share
In deze tutorial lopen we door een gratis Photoshop-extensie genaamd Velositey. Velositey (momenteel bij versie 2) biedt algemene lay-outpatronen om prototypen voor het website-ontwerp te bouwen in Photoshop.
"Besteed meer tijd aan het perfectioneren van details en styling en minder tijd aan al die saaie dingen." - Velositey
Voordat we onze Velositey in handen krijgen, zullen we eerst een aantal veelgebruikte lay-outpatronen bekijken die tegenwoordig op veel websites te vinden zijn.
Als we een kijkje nemen naar drie van de populairste WordPress-thema's in ThemeForest (Avada, Enfold en Salient), zult u merken dat ze enkele algemene kenmerken delen.
Ten eerste hebben ze op grote schermen een navigatiebalk met links hun logo-afbeelding en de navigatie naar rechts. Onder de navigatiebalk treffen we meestal een afbeelding van een held samen met een aantal knoppen die worden weergegeven via een geanimeerde diavoorstelling. Na de opvallende koptekstgebieden vinden we vaak kolommen of een soort op rasters gebaseerde lay-out.
Aangezien dit type lay-out zo gewoon is in het wild, kun je vaak merken dat je iets soortgelijks bouwt. Het prototypen van vertrouwde lay-outs kan keer op keer een steeds terugkerende taak worden.
In deze tutorial zullen we door de functies van Velositey lopen en leren hoe je deze kunt gebruiken om algemene taken te automatiseren, en uiteindelijk onze prototypingworkflow te versnellen. Daarnaast zullen we leren hoe we gebruik kunnen maken van de native functies van Photoshop om enkele toeters en bellen aan ons prototype aan te passen en toe te voegen.
Zonder verder oponthoud gaan we aan de slag!
De minimale vereiste om Velositey te gebruiken is Adobe Photoshop CC 2014 / CS6. Zorg er ook voor dat Adobe Connections Manager is geïnstalleerd. Download met de aanwezigen Velositey (je moet betalen met een tweet of Facebook-bericht) en installeer het via Adobe Extension Manager.
Start Photoshop en navigeer naar Venster> Verlenging> Velositey om het Velositey-paneel te onthullen.
Velositey-paneelOm te beginnen maken we een kale lay-out.
Ten eerste moeten we een nieuw leeg document maken via de [+] Nieuwe sjabloon knop binnen het Velositey-paneel.
Dit nieuw gegenereerde document wordt geleverd met een hulplijn van 1170 px breed met 30 x goot. Dit is een handige afspraak als u van plan bent Bootstrap te gebruiken als uw website-gridstichting.
Een van de eerste dingen die u zult zien onder de [+] Nieuwe sjabloon knop is een reeks tabbladen, waarvan de eerste voor kopteksten is. Ik ga kiezen voor het 10e header-patroon. Klik erop en Velositey zal onmiddellijk de koptekst genereren en deze in het document plaatsen.
Kop optie in Velositey paneelIn ons geval geeft het ons een kop met het logo links en de navigatie naar rechts. In de native versie van Photoshop Laag paneel, u zult ook merken dat de lagen op de juiste manier zijn gestructureerd en benoemd in de hoofd groep.
De kale lay-out van de header en de laagstructuur in de Lagen paneel.Notitie: als u later voor een andere headeroptie kiest, zal Velositey het eerste voorbeeld vervangen.
Ondanks de nadelen, willen veel mensen nog steeds een schuifregelaar op hun website. Het toevoegen van een schuifregelaar is net zo eenvoudig als het koptekstgedeelte; Velositey biedt een reeks schuifregelpatronen klaar om toe te voegen met een klik op de knop.
De opties van het Slider-lay-outpatroon.Hier heb ik gekozen voor het laatste schuifregelpatroon dat ons een schuifknop geeft met een kop, dummy-inhoud en twee knoppen.
Het schuifgebied, met bijbehorende lagen .Zoals je hierboven kunt zien, zul je een nieuwe groep vinden, schuif, toegevoegd binnen de Laag paneel waar alle schuiflagen zich bevinden.
Het toevoegen van het inhoudsgebied is eveneens eenvoudig. Navigeer naar het derde tabblad in het Velositey-paneel en je zult een aantal inhoudopties vinden.
Content lay-out patronenIk heb gekozen voor de derde stijl en geef ons de inhoud in drie kolommen, waarbij elke kolom een kop, plaatsaanduiding voor afbeeldingen en dummy inhoud bevat.
Het inhoudsgebied met zijn lagenEEN module, in dit geval is dit een onafhankelijk inhoudsblok. Het is aan ons om de inhoud te definiëren en waarvoor het wordt gebruikt. In tegenstelling tot de gebieden Koptekst, Schuifregelaar en Inhoud, kunnen we meerdere modules toevoegen binnen één document. Hier heb ik het tweede modulepatroon toegevoegd:
Module patronenHet tweede type module geeft ons een plaatsaanduiding voor afbeeldingen (die over het documentraster loopt), een kop en enkele regels dummy-tekst.
De module toegevoegd met de lagenHet laatste deel van onze website zal naar alle waarschijnlijkheid het voettekst zijn. Voor footers, nogmaals, Velositey geeft ons een aantal vooraf ingestelde patronen om uit te kiezen:
Het eerste voettekstpatroon geeft ons de volgende voettekstlay-out:
In dit stadium zijn we klaar met het toevoegen van alle benodigde secties van de website - van de koptekst tot het voetgedeelte - met slechts een paar klikken. Om elke sectie goed te rangschikken, wilt u misschien wat verticale spaties toevoegen, zoals:
Nu we de basislay-out hebben, is het tijd voor ons om het aan te passen. We moeten een aantal dingen veranderen om het prototype presentabel te maken.
De vuistregel voor het aanpassen van Photoshop-documenten is om de lagen waar mogelijk intact te laten. Elke laag moet worden aangepast zonder de oorspronkelijke vorm of eigenschappen te vernietigen. Dit brengt ons ertoe enkele Photoshop-functies in te zetten, zoals:
Daarnaast gebruik ik het minst mogelijke aantal lagen.
In ons geval, Slimme objecten zijn handig voor het opnemen van de logo-afbeelding.
Selecteer om te beginnen de laag met de naam logo binnen de hoofd groep (momenteel een rechthoekige laag Shape). Klik vervolgens met de rechtermuisknop en selecteer de Omzetten naar slim object keuze.
De logo laag is nu een Smart Object.
Als u ons logo in deze laag wilt plaatsen, klikt u met de rechtermuisknop op de logo laag en selecteer de Bewerk de inhoud keuze.
Dit zal ons leiden naar een nieuw document in het Photoshop-venster. Stel op dit tabblad de rechthoekige vormlaag onzichtbaar in, sleep vervolgens de logoafbeelding naar het tabblad en lijn het logo naar links uit. Terwijl u het bestand opslaat, moeten de wijzigingen worden weerspiegeld index.psd.
Het logo wordt geplaatst door een slim objectNu gaan we het logo laag, die nu een is Smart Object, in een Gekoppeld slim object. Hierdoor wordt ons logo effectief opgeslagen als een extern bestand. Hiertoe klikt u met de rechtermuisknop op de laag en selecteert u de Converteren naar gelinkte ... keuze.
Photoshop zal u vragen om de Smart Object het dossier, .psb. Red de Smart Object van het logo binnen een typische organisatie zoals u zou doen bij het organiseren van de website-afbeeldingen. In dit geval zou ik het opslaan in een map met de naam /afbeeldingen.
"Bewaar stockfoto's / pictogrammen in een map in de buurt van de PSD, niet in een map op het bureaublad met de naam" Diversen "- Photoshop-etiquette
Nu we met Smart Objects werken, laten we het logo opnieuw gebruiken in ons voettekstje. Ga naar de footer groep en vind de logo laag. Klik met de rechtermuisknop op de laag en selecteer Vervang inhoud ... .
Navigeer naar de map waarin u het bestand hebt opgeslagen .psb bestand van het logo, selecteer het bestand en druk op Plaats knop. U zou nu het logo in het voettekst moeten hebben.
Herhaal deze stappen om afbeeldingen in de andere secties te plaatsen; Inhoud, schuifregelaar en module. Zodra dat is gebeurd, zou je een soortgelijk resultaat als hieronder moeten hebben:
Het toevoegen van een laageffect is waarschijnlijk al bekend bij iedereen die al een tijdje Photoshop gebruikt. Laageffecten passen een of meer effecten toe, zoals kleur, verloop, schaduw enz. Bovenop een laag. In ons geval gaan we het gebruiken om een nieuwe kleur in het logo in te stellen en een verloop toe te voegen.
Beginnen door de. Te selecteren logo laag binnen de hoofd groep. Selecteer vervolgens de fx pictogram in de Laag paneel, waar de effectopties zich bevinden. kiezen Kleurbedekking… , en stel de kleur in op wit.
Herhaal deze stap om elke navigatielinkkleur, de pictogramkleur in het inhoudgedeelte en de knopkleur in de schuifregelaar aan te passen. Voeg daarnaast een verloopeffect toe aan de schuifregelaarafbeelding om meer contrast te geven tussen de koptekst en de schuifregelaar, waardoor het logo en de navigatie leesbaarder worden.
Aanpassingslagen sta ons toe om de toon van een laag (zoals de helderheid en het contrast) op een niet-destructieve manier aan te passen. In ons geval kunnen we een aanpassingslaag gebruiken om de pictogrammen van de module zwart en wit te maken.
Selecteer eerst de houder laag binnen de module groep. Klik met de rechtermuisknop en selecteer de Bewerk inhoud ... keuze. Klik daarna op Nieuwe aanpassingslaag en selecteer de Zwart en wit… keuze. En voila!
Het laatste dat u hoeft te doen, is de koppen en de tekst binnen de tijdelijke aanduidingen voor inhoud opnieuw formuleren. Met dat gedaan, hier is het, ons afgewerkte prototype:
Goed gedaan, we hebben met succes een prototype van een ontwerp voor een webpagina gebouwd. We gebruikten Velositey, waardoor we snel de kale lay-out konden genereren. Bovendien hebben we de lagen op niet-destructieve wijze aangepast met kleuren, verlopen en aanpassingen, waarbij de oorspronkelijke vorm intact bleef en toekomstige bewerkingen mogelijk waren.
Heeft u nog andere tips en trucs voor het gebruik van Velositey? Laat het ons weten in de comments!
Accentsconagua