Bespaar tijd en geld door uw Photoshop-workflow te systematiseren

Herhaalde taken kunnen snel vervelend worden. Als ontwerper merk je waarschijnlijk vaak dat je dezelfde elementen keer op keer opnieuw moet ontwerpen. HOU OP!

Het verspillen van tijd is zo ouderwets. Het betekent ook dat je geld verspilt! Laten we dus een aantal manieren bekijken waarop u uw Photoshop-workflow kunt automatiseren en systematiseren. En zorg ervoor dat u de projectbasis voor al uw nieuwe ontwerpen downloadt!

Bestandsstructuur en herbruikbare projectbasis

De eerste stap in het systematiseren van uw werkstroom is het organiseren van uw bestanden. Identificeer alle gemeenschappelijke elementen die u gebruikt in uw ontwerpen.

U kunt naar een lijst komen zoals de volgende:

  • Home-paginasjabloon
  • Over de pagina
  • Contactpagina
  • Servicepagina
  • fonts
  • Middelen

De projectbasis

Overweeg hoe uw eindproducten worden gebruikt. Als ze naar een codeerbedrijf worden verzonden, wees dan zo geordend en grondig mogelijk, inclusief opmerkingen en lettertypen, indien van toepassing.

Je kunt ervoor zorgen dat je perfect georganiseerde thema's hebt door een pakket te maken waarmee je "de lege plekken invult", om zo te zeggen. Kopieer deze map, wijs deze toe aan het project door de naam ervan in het project te wijzigen en aan de slag te gaan. Dit is een zeer eenvoudige en efficiënte manier om te werken en betekent dat websites die u vier jaar geleden hebt gebouwd eenvoudig kunnen worden bewerkt, omdat alles op zijn eigen plek is ingepakt.

Download de projectbasis

In het zipbestand vindt u een eenvoudig herbruikbaar sjabloonbeginpunt. Dit bestand bevat elementen zoals verdelers, knoppen en een vooraf ingesneden sjabloon om uw ontwerpworkflow te versnellen.

Zie je hoe eenvoudig het starten van een nieuw project nu is? Het kan enkele minuten duren om de set-up in te stellen, maar de tijd die u later bespaart is meer tijd om te doen waar u het best van geniet - ontwerpen!

Nu we een solide basis hebben waarop we kunnen voortbouwen, kunnen we beginnen onze 'boilerplater' in te vullen met specifieke bestanden en concepten.

Websjabloon

Met de voorbeeldsjabloon kunt u een pagina met uw meest gebruikte elementen maken, klaar om snel in uw nieuwste project te worden opgenomen.

Als u met name een webdesigner bent, zult u merken dat veel van uw projecten, zelfs die op elke mogelijke manier verschillen, gemeenschappelijke elementen gebruiken en hergebruiken.

Begin met het bouwen van een paar herbruikbare sjablonen. Maak je geen zorgen over welke elementen je nog wilt toevoegen, omdat je altijd terug kunt gaan naar je eerdere projecten en meer populaire functies kunt analyseren - en ze vervolgens hier opnieuw kunt maken.

Persoonlijk gebruik ik slechts één sjabloon. Ik heb een startpagina (deze bevat elementen zoals nieuwsbulletins, stijlen voor blogposts, menu's, logo's en call-to-actions). Ik kan deze sjabloon aanpassen aan blogpagina's, nu formulieren kopen en meer.

De pagina heeft ook een pre-applied 960.gs. Dit is toegevoegd om te downloaden aan het einde van het artikel, in de template boilerplate.

Als u eenmaal bent ingesteld met dit concept, kunt u zeer snel ontwerpen maken. Je moet echter zeker overwegen om je eigen te ontwikkelen en deze aan te passen aan je klanten en team. U kunt verder gaan door pictogrammen, zoekelementen en online winkelgerelateerde items toe te voegen - alles wat bij uw klantenbestand past.

Groeperen en organiseren

De bovenstaande afbeelding demonstreert het tastbare verschil tussen een georganiseerd lagenpalet en een rommelig palet!

Wanneer u een echte creatieve stroom doorbrengt, kan het moeilijk zijn om te stoppen en te beginnen met het benoemen en groeperen van lagen. Photoshop helpt ook niet echt op dit gebied!

Neem dus de tijd om lagen te benoemen en te groeperen. Dit zal je later helpen bij het coderen van het ontwerp, of als je het verzendt als je het elders wilt coderen.

Geef elke laag een naam en probeer een beschrijvend en kort woord te gebruiken, zoals 'menu' voor de navigatie. Groepeer specifieke gebieden, zoals de kop of een contactformulier.

Dit heeft een tweevoudig voordeel.

  1. U kunt hele gebieden (of het hele ontwerp) in- of uitschakelen om op de achtergrond of andere elementen te werken.
  2. U kunt secties van een ontwerp verplaatsen zonder dat u elk element hoeft te verplaatsen. Dit kan uren per project besparen!

Neem dus de tijd om elke vijf minuten of zo te stoppen en elk element een naam te geven en te groeperen. Je zult blij zijn dat je het gedaan hebt!

Maak gebruik van de selectietool! U kunt de selectiemodus schakelen tussen lagen en groepen. Dit vergemakkelijkt het bijwerken en opnieuw afstemmen van ontwerpen, dus vergeet het niet!

acties

Als u geen acties in uw workflow gebruikt, moet u ze meteen gaan gebruiken.

Photoshop-acties zijn volledig configureerbare lijsten met acties die Photoshop automatisch moet uitvoeren. U kunt uw eigen maken of kiezen uit de online beschikbare bounty. Als u bijvoorbeeld aan foto's werkt en u hebt 400 afbeeldingen om te bewerken en het formaat te wijzigen, dan zou dit lang duren. In plaats daarvan kunt u een actie maken die het contrast aanpast, de grootte wijzigt en vervolgens het bestand in .jpg-indeling opslaat, waarbij in 400 seconden door 400 bestanden wordt geschoten! Je moet acties gebruiken!

Als u niet over de kennis of ervaring beschikt om uw eigen acties te maken, GraphicRiver heeft een grote selectie acties beschikbaar vanaf $ 1!

De acties in de uitverkoop variëren van eenvoudige foto-effecten tot deze actie die verschillende vooraf opgemaakte tekstsecties zoals contactgegevens of blogberichten in seconden kan toevoegen.

Begin met het gebruik van Acties en u zult een aanzienlijke toename van uw productiviteit opmerken en het aantal keren dat u monotone taken steeds opnieuw moet herhalen, verminderen.

Een actie maken en gebruiken

Je eigen actie maken is eenvoudig. Als voorbeeld maken we een eenvoudige actie om meerdere afbeeldingen in één keer opnieuw te maken en vervolgens op te slaan.

Allereerst moet je op de actieknop op het actiepalet klikken.

U zou standaard geen instellingen moeten wijzigen, bar verandert de naam voor een betere organisatie. Photoshop neemt nu uw acties op. U hoeft dus alleen de afbeelding opnieuw in te stellen. Ga naar afbeeldingsgrootte en wijzig de afmetingen. De actie zal elke afbeelding naar deze dimensies veranderen. Sla vervolgens op Opslaan.

Druk ten slotte op stop in het actiepalet.

Als u nu op play drukt bij de actie die u hebt gemaakt, volgt Photoshop de lijst met gedefinieerde acties in uw afbeelding. Hoewel het heel eenvoudig is, kan een actie zoals deze uren uren monotoon verkleinen van foto's en afbeeldingen besparen. Dit is slechts een heel eenvoudige kijk op acties. Ze kunnen zoveel meer doen, dus neem de tijd om ze te leren kennen en echt te gebruiken. Het mooie ervan is dat je in principe elke actie in Photoshop kunt vastleggen - stijlen selecteren, wijzigen, transformeren, herschikken en opslaan.

iPhone & UI-ontwerp

Werkt u met gebruikersinterfaces? Als dat zo is, moet je echt een GUI-elementenpakket voor Photoshop downloaden.

Er zijn veel beschikbaar voor de meeste populaire besturingssystemen en mobiele platforms.

Als u bijvoorbeeld met de iPhone werkt, kunt u het iPhone GUI-pakket downloaden dat alle elementen bevat die beschikbaar zijn in de iPhone-interfacebibliotheek en vervolgens gewoon beginnen met het ontwerpen van uw app. Eenvoudig, snel en veel eenvoudiger dan deze helemaal opnieuw te maken.

Android GUI Kit

http://www.smashingmagazine.com/2009/08/18/android-gui-psd-vector-kit/

Teehan Lax-sets

Het bureau Teehan Lax heeft verschillende hoogwaardige, levensechte UI-kits. Deze zijn geweldig voor het bouwen van een iPhone-app-verkoopsite of het ontwerpen van de daadwerkelijke gebruikersinterface van een app. Sets zijn beschikbaar voor de iPhone, Palm Pre en Browsers.

Palm Pre

http://www.teehanlax.com/blog/2009/07/08/palm-pre-gui-psd/

iPhone

http://www.teehanlax.com/blog/2008/11/06/iphone-gui-psd-update-13/

Browser elementen

http://www.teehanlax.com/blog/2008/12/16/browser-form-elements-psd/

Conclusie

Ik hoop dat we u enkele tips hebben gegeven die u kunt gebruiken om uw productiviteit en efficiëntie te verbeteren. Photoshop is een geweldig hulpmiddel, maar als we niet voorzichtig zijn, kunnen we merken dat we de sames-taken steeds opnieuw moeten herhalen. Dus zorg ervoor dat u de bovenstaande tips implementeert en begin tijd, geld en gezond verstand te besparen!

Download de projectbasis

Hebt u tijdbesparende tips van Photoshop? Heeft u ideeën over andere taken die kunnen worden geautomatiseerd om tijd en herhaling te besparen? Deel deze via de reacties met de community.