8 manieren om websites sneller te ontwerpen in Photoshop
Als webdesigner is het moeilijk om georganiseerd te blijven. Je brengt niet alleen meerdere projecten tegelijkertijd in balans, maar je hebt waarschijnlijk ook te maken met strakke deadlines en lastige klanten. U kunt ook van merk naar merk stuiteren en voortdurend nieuwe richtlijnen en stijlen van het merk leren.
Gelukkig zijn er veel manieren om uw workflow efficiënter te maken. Om je hierbij te helpen, heb ik deze acht tips samengesteld om je gezond te houden in je webontwerpcarrière
1. Houd uw bestanden georganiseerd
Een van de gemakkelijkste dingen die u kunt doen om uw gezond verstand te behouden, is uw bestanden georganiseerd te houden. Het creëren en onderhouden van een consistente mappenstructuur maakt het vinden van uw bestanden een fluitje van een cent. Er doen zich problemen voor wanneer u de ene map anders structureert dan de andere, waardoor het een uitdaging is om het bestand Final-Final-logo.ai te vinden.
Consistente bestandsnaamconventies zijn essentieel bij het organiseren van uw bestanden. Dit is waar versiebeheer binnenkomt. Sommige ontwerpers gebruiken datums, anderen gebruiken versienummers en sommige gebruiken ronden. Dit hangt af van uw branche en uw persoonlijke voorkeuren, maar het is een goede gewoonte. Dankzij versiebeheer kunt u gemakkelijk bijhouden welk bestand het meest actueel is, vooral als u oude versies hebt opgeslagen als referentie.
Ik houd meestal twee tot drie oude versies voor het geval de klant terug wil naar die heldenstrategie van Round One, of de voorkeur geeft aan uw mobiele behandeling uit de tweede ronde. Om de pack-rat mentaliteit te voorkomen, is het goed om oudere bestanden te archiveren of verwijderen om te voorkomen dat uw harde schijf verzandt.
Hier is een voorbeeldstructuur die ik gebruik bij Clearlink.
De combinatie van een consistente mapstructuur en naamgevingsconventies met versiebeheer helpt ook bij het zoeken. Als u bijvoorbeeld al uw bestandsnamen van één merk start met de merknaam of afkorting, kunt u de items voor dat merk eenvoudiger filteren. Dit zal helpen om "ATT-logo-final.ai" te onderscheiden van wat mogelijk een zee van "logo-final.ai's" zou kunnen zijn.
2. Begrijp uw raamwerk
Een ding dat ik pas in mijn ontwerpcarrière leerde kennen, is hoe je een bestaand raamwerk op de juiste manier gebruikt. De twee zware hitters in de framework-wereld zijn momenteel bootstrap en fundament , maar Google's materialiseren zal ze zeker een run voor hun geld geven in de nabije toekomst. Het bedrijf waarvoor ik werk, maakt gebruik van Foundation voor het merendeel van hun merksites.
Foundation wordt geleverd met een ingebouwd responsief raster, samen met een vormgeving voor knoppen, velden, typografie, navigatie, etc. en nog veel meer om uw leven gemakkelijker te maken. Door het ingebouwde raster van de Foundation in uw PSD's te gebruiken, maakt u het voor de ontwikkelaar eenvoudiger om uw ontwerpen op een meer perfecte pixelimplementatie te implementeren dan wanneer u uw eigen ding doet. Photoshop heeft deze handige gids-lay-outtool die niet alleen het maken van rasters een eitje maakt, maar ze ook aan het kunstbord koppelt voor het gemak van bestandsherstructurering en verplaatsing.
Screenshot van de Stichting Cheat Sheet
Kaders bieden ook een goed startpunt voor knopstyling, formulieren, enz. En helpen bij het tonen van de mogelijkheden en beperkingen van de ontwerpstrategieën die u kunt implementeren. Dit geeft je niet alleen een goed startpunt voor je ontwerp, maar het zal ook helpen om een vriendelijkere samenwerking met je ontwikkelaar te bevorderen.
3. Organiseer je lagen op inhoudsgedeelte
Wanneer je te maken hebt met complexe webdesign PSD's met zoveel mappen, lagen, slimme objecten, enz., Is het gemakkelijk voor dingen om rommelig te worden. Zodra laag 2.455 wordt weergegeven, begin je je te realiseren dat je een soort organisatie binnen je PSD nodig hebt. Daarom raad ik aan om je PSD per sectie te organiseren.
De mijne bestaat over het algemeen uit mappen die Nav, Hero, Intro, Packages, Benefits, Footer, etc. bevatten. Ik kleur deze mappen ook in regenboogvorm, zodat ze gemakkelijk te navigeren zijn. Dit maakt het updaten van secties en het opnieuw inregelen van uw PSD een eitje.
Ik organiseer mijn bestand in sectiemappen met regenboogkleurcodes voor eenvoudige scanmogelijkheden.
Als u bijvoorbeeld het gedeelte hero groter wilt maken, kunt u eenvoudig alle onderstaande mappen slepen als één eenheid (opdracht houden) en vervolgens terug slepen nadat de update is gemaakt. Deze strategie helpt ontwikkelaars en andere ontwerpers ook gemakkelijk door uw bestand te navigeren. Door begrijpelijke namen als 'Hero' en 'Nav' te gebruiken, kan een nieuwe ontwerper gemakkelijk in de map springen en de gewenste wijzigingen aanbrengen.
Sommige ontwerpers zullen zelfs in het benoemen van individuele lagen stappen, wat ook ongelooflijk voordelig kan zijn, maar een beetje tijdrovend kan zijn. Omdat lagen eenvoudig te vinden zijn via het automatische selectiegereedschap wanneer het op 'laag' is ingesteld, is het tegenwoordig gemakkelijk om afzonderlijke lagen te bereiken, dus het is aan de individuele ontwerper hoe ze hun lagen willen organiseren. Het punt is dat je klaar bent.
4. Onthoud alle sneltoetsen die u normaal gebruikt
Deze is een biggie voor efficiëntie. Als u merkt dat u regelmatig een bepaalde opdracht gebruikt, moet u deze onthouden. Je verhoogt je efficiëntie exponentieel als je alle hoofdtoetsenbordsneltoetsen hebt uitgeschakeld.
Enkele belangrijke zijn opslaan, lettertypegrootte en leiden, laagbestelling, sparen voor web en dekking onder veel meer. Met Photoshop kunt u ook aangepaste snelkoppelingen maken. In mijn boek is het opslaan van je bestand de belangrijkste opdracht die je moet onthouden. Als gevolg van de willekeurige crashes van Adobe is het goed om een fout te maken aan de kant van het opslaan, in plaats van het risico te lopen dat u uw voortgang verliest.
Adobe biedt je de mogelijkheid om je sneltoetsen aan te passen via Bewerken> Sneltoetsen
Snelkoppelingen komen ook overeen met het organiseren van uw lagen door mappen met inhoudsonderdelen (zoals hierboven vermeld). Het is eenvoudiger om lagen met behulp van sneltoetsen naar de bovenkant en onderkant van een map te brengen dan om lagen in een ongeorganiseerd bestand opnieuw te ordenen. Dit is waar het organiseren van je bestand terwijl je ontwerpt in het spel komt. Door vaak gebruikte sneltoetsen te onthouden en uw lagen georganiseerd te houden, wordt uw efficiëntie enorm verbeterd en kunnen andere ontwerpers met uw bestanden werken.
5. Gebruik CC-bibliotheken
Een van de beste dingen die Adobe sinds het maken van CC heeft toegevoegd, zijn bibliotheken. Als je nog nooit van hen hebt gehoord, moet je dit eens bekijken geweldige tutorial hoe ze te gebruiken.
Ik heb het gevoel dat elk ontwerpteam deze geweldige functie zou moeten gebruiken. Met bibliotheken kunt u een merkbibliotheek maken met items zoals kleuren, letterstijlen, foto's, pictogrammen en symbolen (zoals kop- en voetteksten). Dankzij bibliotheken kunt u eenvoudig samenwerken met creatieven van meerdere organisaties die gebruikmaken van één merkbibliotheek.
Bibliotheken maken het gemakkelijk om kleuren te wijzigen en tekststijlen bij te werken met één klik op de knop. Ze helpen ook om merkpictogrammen op te slaan die gemakkelijk op één plek kunnen worden bijgewerkt met updates die snel worden weergegeven op PSD's. Dit is ongelooflijk gunstig voor kop- en voetteksten voor uw site, waar u waarschijnlijk gedurende het hele project kleine updates zult maken.
Ik gebruik ook CC Libraries voor lettertypestyling tijdens mijn ontwerp. Ik stel stijlen in voor hero-copy, koppen, subkoppen, body-copy, disclaimers, enz. Voor desktop-, tablet- en mobiele applicaties. Wat de weergaveknop betreft, merk ik dat ik meer gebruik maak van het lijstformaat dan de tegelweergave vanwege de eenvoudige scanmogelijkheden.
Bibliotheekelementen bekeken als een bijdrager
Bibliotheken zijn ook geweldig voor teamsamenwerking. U kunt ervoor kiezen om samen te werken met andere advertenties, zodat ze kunnen worden bewerkt en aan de bibliotheek kunnen worden toegevoegd, of u kunt de bibliotheeklink delen voor eenvoudige toegang. Ze hebben ook een functie "Nieuwe bibliotheek maken van documenten", maar ik maak er de voorkeur aan om de bibliotheek zelf te maken, dus deze blijft georganiseerd en heeft alleen de meest relevante items.
Helaas zijn er enkele nadelen aan bibliotheken, waaronder het ontbreken van afzonderlijke teken- en alineastijlen voor tekst. Ik werk hier omheen door mijn tekenstijl toe te passen in een apart vak en vervolgens verschillende stijlen in een vak te plakken om tekstvakken gemakkelijker te beheren in het bestand. Een ander nadeel is dat je momenteel een karakterstijl niet globaal kunt bijwerken. Momenteel zijn er binnen de bibliotheek geen organisatiecapaciteiten om submappen in de categorieën te maken (kleur, tekenstijlen, enz.), Maar hopelijk werkt Adobe hier ook aan.
De huidige manier waarop CC Libraries werken, is dat het meest recent bijgewerkte / toegevoegde item bovenaan verschijnt. Kleuren van CC-bibliotheken kunnen niet worden toegepast op afzonderlijke tekst in tekstvakken en kunnen alleen gemakkelijk worden toegepast op vormen en volledige tekstvakken. Ik ben er zeker van dat Adobe hard aan het werk is om deze problemen op te lossen, dus ik maak me geen zorgen, vooral omdat de voordelen absoluut opwegen tegen de nadelen.
6. Houd afbeeldingen en vectoren in slim object-formaat
Hoewel uw bestand hierdoor groter wordt, kunnen toekomstige ontwerpers uw PSD's bewerken door uw afbeeldingen en vectoren in een slim objectformaat te houden. Stel je dit voor: de client komt terug met bewerkingen die het opnieuw bijsnijden van een hero-foto en het maken van kleine aanpassingen aan een vectorpictogram omvatten. Dit gaat gemakkelijker als de PSD de foto met volledige resolutie bevat in plaats van een kleinere, gerasterde versie. Vectoren zijn ook gemakkelijk aan te passen als het slimme objecten uit Illustrator zijn in plaats van gerasterde afbeeldingen.
Een ander voordeel van het hebben van foto's in slim object-formaat is wanneer u ze opslaat als PSD's en ze vervolgens als slim object in uw bestand plaatst. Een geplaatste foto gebruiken Met PSD is het eenvoudig om aanpassingslagen en bewerkingen toe te voegen in een afzonderlijk, ingesloten fotobestand, in plaats van dat het uw bronbestand verbergt. Het gebruik van slimme objecten als bibliotheekafbeeldingen geeft u nog meer een winnende combinatie. U kunt niet alleen de vectorobjecten gemakkelijk bewerken, maar bibliotheekafbeeldingen worden ook in alle toepassingen bijgewerkt.
De afbeelding "Heldillustratie" kan in een afzonderlijke PSD worden bewerkt om de rommel van het hoofdbestand tot een minimum te beperken.
7. Maak een stijlgids en houd u eraan
Veel merken hebben een algemene stijlgids voor u die u kunt volgen als het gaat om lettertypen, kleuren, foto's, pictogrammen, illustraties, enz. Dit is handig als hulpmiddel maar zal u niet altijd consistent houden met uw website-specifieke styling . Ik heb mijn efficiëntie enorm verbeterd door webstijlgidsen te maken voor elke specifieke site waar ik aan werk.
Soms hebben merken meerdere sites met verschillende stijlen, dus ik zorg ervoor dat ik er één heb voor elke site, zodat ik consistent kan blijven terwijl ik ontwerp. Dit zorgt ook voor een gemakkelijk hulpmiddel om te slepen en neerzetten wanneer ik knoppen, pictogrammen, illustraties, foto's, enz. Nodig heb. Dit maakt je niet alleen efficiënter als ontwerper, maar het zal je ook helpen om consistent te blijven in je stijl op de hele site.
Welke tussenafstand gebruik ik tussen secties? Bekijk de stijlgids! Wat was de primaire knopkleur en padding opnieuw? Pak het uit de stijlgids! Dit zal ook andere ontwerpers helpen gemakkelijk op de siteontwerpen te springen met gemak en efficiëntie. Als je het gebruik van CC Libraries samenvoegt met de stijlgids, ben je nog een stap voor op het spel.
Ik maak een PSD-stijlgids voor alle verschillende merken waar ik aan werk, zodat ik eenvoudig elementen zoals knoppen en pictogrammen kan pakken.
Veel ontwerpers zijn in de verleiding om nieuwe stijlen toe te voegen telkens wanneer ze geconfronteerd worden met een nieuw probleem binnen het ontwerp. Voor consistentie is het het beste om dit te vermijden en u altijd te houden aan de normen die u hebt vastgesteld in uw stijlgids. Als u nieuwe lagen en stijlen toevoegt, moet u ervoor zorgen dat deze op de hele site worden toegepast.
Hoe meer nieuwe stijlen worden gemaakt, hoe complexer toekomstontwerp zal zijn en hoe moeilijker het zal zijn voor nieuwe ontwerpers om op projecten te springen en ontwerpen consistent te houden. In veel gevallen is consistentie belangrijker dan constante innovatie als het gaat om gebruikerservaring. Ook al kost het u misschien meer tijd om de webstijlgids aan het begin van een project te maken, het verhoogt uw efficiëntie voor alle toekomstige pagina's.
Een van de beste werkwijzen die ik heb geleerd van Brad Frost is om een interface-inventaris ofwel tijdens het ontwerpproces of op een bestaande site waar je aan zult werken. Een interface-inventaris bestaat uit het verzamelen van alle verschillende tekststijlen, knopstijlen, enz. Via schermafbeeldingen en het compileren ervan om inconsistenties te vinden. Vervolgens kunt u uw bevindingen presenteren aan de klant om updates en verbeteringen voor te stellen.
Omdat websites meerdere ontwerpers raken in het geval van hun bestaan, kunnen dingen behoorlijk harig worden op de afdeling Consistency. Zodra u een uniforme ontwerpstijl hebt gevonden voor de elementen op de pagina, moet u uw stijlgids bijwerken zodat iedereen op de hoogte is.
Interface inventaris screenshot van http://bradfrost.com/blog/post/interface-inventory/
8. Bevorder interdepartementale samenwerking
Veel mensen die carrière maken in marketingproductie (ontwerpers, ontwikkelaars, copywriters, enz.) Zijn vaak introvert, dus het is moeilijk om uit je comfortzone te stappen als het gaat om samenwerking. Het is ook moeilijk om uw expertise-bubbel achter te laten, vooral wanneer het gemakkelijker is om contact te maken met mensen in uw vakgebied. Hoewel het soms lastig of ongemakkelijk kan zijn, kan het verlaten van je bubbel en regelmatig samenwerken met mensen van andere afdelingen de kwaliteit van je ontwerpen enorm verbeteren, samen met je efficiëntie.
Een goed voorbeeld hiervan is wanneer ontwerpers en ontwikkelaars samenwerken aan een herontwerp. Je moet van tevoren met de ontwikkelaar overleggen over welk raamwerk ze gebruiken, je opleiden voor het rastersysteem en de mogelijkheden beoordelen. Wanneer het ontwerp voltooid is, moet je je Photoshop-bibliotheek delen, zodat de ontwikkelaar gemakkelijk toegang heeft tot het kleurenpalet, letterstijlen, enz. Het is ook handig om de stijlgids van tevoren te delen, samen met alle componenten die je hebt ontworpen om ze een goede voorsprong te geven.
Door samen te werken met andere ontwerpers in uw team die gebruikmaken van bibliotheken, blijft u consistent en efficiënter. Door de leiding van de Art Director of de meeste Senior Designer verantwoordelijk te stellen voor updates van de bibliotheek en stijlgids, wordt verwarring voorkomen en blijft het merken consistent. Zorg ervoor dat er een communicatielijn is wanneer updates worden uitgevoerd, zodat iedereen op dezelfde pagina staat.
Blijf gezond
Webdesign kan soms overweldigend en uitdagend zijn. Het hoeft niet altijd zo te zijn. Door deze eenvoudige tips voor Photoshop-efficiëntie te volgen, kunt u een flinke hoeveelheid stress verlichten. Dit zal niet alleen uw welzijn verbeteren, maar managers en directeuren op zowel zakelijk als creatief vlak zullen uw harde werk zeer op prijs stellen en u daarvoor prijzen. Iedereen is tenslotte goed met een meer consistent, efficiënt en mooi ontworpen ontwerp.