Share
Photoshop CS6 is een veel krachtigere vectorbewerkingstoepassing dan zijn voorgangers. In deze zelfstudie laten we u zien hoe u deze nieuwe functies kunt gebruiken om een iPhone-app-interface voor muziekspelers te maken in zowel de originele iPhone-resolutie als in het netvlies zonder hetzelfde proces voor beide ontwerpen te hoeven herhalen. Laten we beginnen!
De volgende items zijn gebruikt tijdens het maken van deze zelfstudie.
Maak een nieuw bestand. Stel de breedte in op 320px en de hoogte op 480px.
In deze stap gaan we de achtergrond maken. Er is een nieuwe, eenvoudigere manier om vectorvormen te maken in Photoshop CS6 en we gaan die methode gebruiken in de hele tutorial.
Maak een nieuwe groep en noem deze "Achtergrond". Selecteer het Rechthoekgereedschap (R) en stel in de optiebalk de gereedschapsmodus in op vorm en klik vervolgens op de knop ernaast om het vormvultype te kiezen. Selecteer de knop Verloop in de lijst met vultypen. Stel alle waarden hetzelfde in als de waarden die in de onderstaande afbeelding zijn gemarkeerd. Gebruik de kleuren # 3F4042 en # 303133 voor het verloop.
Klik ergens op het canvas. Wanneer het Create Rectangle-venster tevoorschijn komt, klikt u gewoon op OK en zorgt u ervoor dat de afmetingen zijn ingesteld op 700x700px. Geef de nieuw gemaakte laag 'Achtergrond' een naam.
Druk op Cmd / Ctrl + A om het hele canvas te selecteren, selecteer het gereedschap Verplaatsen (V) en klik vervolgens in de optiebalk op Horizontaal uitlijnen centreren en onderste randen afstellen.
Dubbelklik op de laagminiatuur op de laag "Achtergrond" en zorg dat het selectievakje Dither is aangevinkt. Op deze manier krijg je een vloeiende overgang zonder strepen.
Open statusbar.psd in Photoshop en importeer de statusbalkgroep naar uw werkende PSD. Gebruik de hierboven genoemde methode om de groep "Statusbalk" uit te lijnen - Druk op Cmd / Ctrl + A om het hele canvas te selecteren en gebruik de Verplaatsingshulpprogramma (V) door op de knoppen Horizontale vlakken uitlijnen en Bovenste randen uitlijnen te klikken.
Maak een nieuwe groep onder de groep "Statusbalk" en noem deze "Navigatiebalk". Selecteer het gereedschap Afgeronde rechthoek (U) en stel de eigenschappen in zoals weergegeven in de onderstaande afbeelding. Gebruik # 5F8F1D en # 99B83D voor het verloop. Klik ergens op het canvas en klik op OK wanneer het venster Afgeronde rechthoek maken tevoorschijn komt. Geef de nieuwe laag 'Nav Bg' een naam.
Lijn de laag horizontaal uit met het midden en verticaal net onder de statusbalk zoals hieronder weergegeven.
Selecteer het gereedschap Rechthoek (U) en teken een rechthoekige vorm die lijkt op de rechthoek die hieronder wordt weergegeven, maar zorg ervoor dat deze vorm alleen het onderste deel van de laag "Nav Bg" bedekt. Ik heb de optie Geen kleur gebruikt voor het vormvultype.
Gebruik het gereedschap Pad selecteren (A) om de zojuist gemaakte vorm te selecteren. Druk op Cmd / Ctrl + C om de vorm naar het klembord te kopiëren. Selecteer nu de laag "Nav Bg" in het deelvenster Lagen en druk op Cmd / Ctrl + V. Nu wordt de vorm geplakt op de laag "Nav Bg."
Terwijl het gereedschap Pad selecteren (A) nog steeds is ingeschakeld, klikt u op de knop Padbewerkingen op de optiebalk en selecteert u Voorvorm aftrekken.
Klik nu opnieuw op de knop Padbewerkingen en selecteer vervolgens Vormcomponenten samenvoegen.
Gebruik het gereedschap Direct selecteren (A) om de twee onderste punten te selecteren en verplaats ze totdat de hoogte van de vorm 43px is.
Pas de volgende laagstijl toe op de laag "Nav Bg":
Gebruik het gereedschap Afgeronde rechthoek (U) om een vorm te tekenen met de eigenschappen die hieronder worden getoond. Gebruik effen kleur voor het vormvultype. Geef de nieuw gemaakte laag 'Instellingen Bg' een naam.
Pas de volgende laagstijl toe:
Verplaats "Instellingen Bg" zodat deze verticaal is uitgelijnd met het midden van "Nav Bg" en horizontaal 6 px vanaf de rechterrand van het canvas.
Open icons.psd en verplaats de laag "Instellingen" naar je PSD. Lijn het pictogram horizontaal en verticaal uit met het midden van "Instellingen Bg."
Pas de volgende laagstijl toe:
Gebruik het gereedschap Afgeronde rechthoek (U) om een vorm te tekenen met de eigenschappen die hieronder worden getoond. Gebruik effen kleur voor het vormvultype. Geef de nieuwe laag "Back Bg." Een naam.
Gebruik het gereedschap Ankerpunt toevoegen om één ankerpunt aan de linkerkant van de rechthoek toe te voegen en 14 px onder de bovenrand.
Klik met behulp van het gereedschap Punt converteren op hetzelfde ankerpunt.
Selecteer nu het gereedschap Direct selecteren (A) en verplaats het punt 10 px naar links.
Met het gereedschap Direct selecteren (A) nog steeds selecteert u de twee ankerpunten die op de afbeelding hieronder zijn gemarkeerd en verplaatst u ze 1px naar links. Selecteer vervolgens het gereedschap Punt converteren en klik op elk van de twee ankerpunten.
Lijn de vorm verticaal uit met het midden van "Nav Bg" en horizontaal 6 px vanaf de linkerrand van het canvas.
Nu we klaar zijn met het tekenen van de vorm, kunnen we er een stijl aan toevoegen. Klik met de rechtermuisknop op de laag "Instellingen Bg" en selecteer Laagstijl kopiëren, klik met de rechtermuisknop op de laag "Terug Bg" en selecteer Laagstijl plakken.
Voeg tekst toe aan de knop met behulp van de parameters in de onderstaande afbeelding. Ik heb het lettertype Helvetica Neue gebruikt. Lijn de tekst uit met het midden van de vorm en kopieer de laagstijl uit de laag 'Instellingen'.
Voeg titeltekst toe met behulp van de parameters in de onderstaande afbeelding en lijn deze uit op het midden van de navigatiebalk.
Maak een nieuwe groep onder de groep "Navigatiebalk" en noem deze "Positie". Selecteer het gereedschap Rechthoek (U) en stel de eigenschappen in zoals wordt weergegeven in de onderstaande afbeelding en klik vervolgens ergens op het canvas. Gebruik # 2E2F30 en # 494A4C voor het verloop. Noem de laag "Positie Bg."
Plaats de vorm onder de navigatiebalk, maar zorg ervoor dat er een ruimte tussen de pixels is. Lijn de vorm horizontaal uit met het midden van het canvas.
Pas de volgende laagstijl toe op de vorm:
Selecteer het gereedschap Afgeronde rechthoek (U) en stel de eigenschappen in zoals weergegeven in de onderstaande afbeelding en klik vervolgens ergens op het canvas. Stel de Radius in op een hogere waarde. Ik heb 50px gebruikt.
Noem de laag "Positie Leeg" en lijn deze uit, zowel horizontaal als verticaal, naar het midden van de laag "Positie Bg".
Pas de volgende laagstijl toe:
Selecteer het gereedschap Afgeronde rechthoek (U) en stel de eigenschappen in zoals weergegeven in de onderstaande afbeelding en klik vervolgens ergens op het canvas. Gebruik # 85AD2A, # A0D028 en # B6D028 voor het verloop. Stel de Radius opnieuw in op een hogere waarde. Noem deze laag "Positie vol".
Lijn de vorm uit zoals wordt weergegeven in de onderstaande afbeelding, maar zorg ervoor dat er aan alle kanten een opening van twee pixels is tussen de vorm en de laag "Positie Leeg".
Pas de volgende laagstijl toe op de vorm:
Selecteer het Ellips-gereedschap (U) en stel de eigenschappen in zoals wordt weergegeven in de onderstaande afbeelding en klik vervolgens ergens op het canvas. Gebruik # 444547 en # 5C5E61 voor het verloop. Noem deze laag "Handvat".
Lijn deze vorm uit zodat deze de rechterrand van de laag 'Positie vol' bedekt.
Pas de volgende laagstijl toe:
Selecteer opnieuw de Ellipse Tool (U) en stel de eigenschappen in zoals wordt getoond in de onderstaande afbeelding en klik vervolgens ergens op het canvas. Gebruik # 636669 en # 38393B voor het verloop. Noem deze laag "Handle Circle."
Lijn de vorm uit met het midden van de laag 'Handvat'.
Voeg tekst voor de tijd toe. Gebruik Helvetica Neue, Bold. De grootte is 10pt en de kleur # B2B2B2. Lijn de tekst uit zoals getoond op de afbeelding hieronder.
Maak een nieuwe groep en noem deze "Playback Controls". Gebruik de Ellipse Tool (U) om een cirkel met afmetingen van 50x50px te tekenen. Let niet op de andere parameters. Noem de nieuwe laag "Play Bg."
Vouw de groep "Positie" uit, klik met de rechtermuisknop op de laag "Handvat" en selecteer Vormkenmerken kopiëren in het menu.
Ga terug naar de groep "Afspeelbesturingen", klik met de rechtermuisknop op de laag "Play Bg" en selecteer Vormkenmerken plakken in het menu. Dit is een nieuwe functie in Photoshop CS6. Op deze manier in plaats van het instellen van alle attributen voor Shape Fill Type, zoals gradiëntkleuren, hoek etc. we kopiëren die attributen van de laag "Handle", omdat we dezelfde waarden gebruiken voor de nieuw gecreëerde laag.
Lijn de laag horizontaal uit met het midden van het canvas en verticaal 20px onder "Positie Bg".
Pas de volgende laagstijl toe:
Klik met de rechtermuisknop op de laag "Play Bg" en selecteer Laag dupliceren. Noem de nieuwe laag "Fast Backward Bg."
Gebruik het gereedschap Pad selecteren (A) en klik op de laag "Snel achteruit BG" en wijzig de afmetingen in de optiebalk in 34x34 px.
Lijn de laag verticaal uit naar het midden van "Play Bg" en horizontaal 8 px naar links.
Dupliceer "Fast Backward Bg" en noem de nieuwe laag "Fast Forward Bg." Lijn de laag uit op dezelfde manier als de vorige, maar nu aan de rechterkant.
Maak een nieuwe cirkelvorm met de parameters uit de onderstaande afbeelding. Gebruik # 46484A en # 2C2D2E voor het verloop. Zorg ervoor dat de nieuw gemaakte laag zich onder alle andere lagen in de groep 'Afspeelbesturingen' bevindt.
Noem de laag "Playback Bg" en lijn deze zowel horizontaal als verticaal uit in het midden van "Play Bg"
Dupliceer "Playback Bg" en verkleinen tot 48x48px, met behulp van de methode die we in stap 12 hebben gebruikt. Lijn de laag uit naar het midden van "Fast Backward Bg."
Dupliceer nu de laag opnieuw en lijn deze uit met het midden van "Fast Forward Bg."
Importeer de lagen "Fast Backward", "Play" en "Fast Forward" van icons.psd. Lijn de pictogrammen uit zoals weergegeven in de onderstaande afbeelding.
Selecteer de drie pictogramlagen door Cmd / Ctrl op het toetsenbord te houden en dienovereenkomstig op elke laag te klikken. Zet de dekking op 85%.
Importeer de lagen "Speaker" en "Repeat" van icons.psd. Lijn de pictogrammen uit zoals hieronder getoond.
De geïmporteerde pictogrammen zijn gevuld met effen kleuren, maar we gaan er een verloop op toepassen. Gebruik het gereedschap Pad selecteren (A) en selecteer de laag "Luidspreker" en stel de parameters in van de onderstaande afbeelding. Gebruik de kleuren # 6B6C70 en # 797B80 voor het verloop.
Kopieer de kenmerken van het luidsprekerpictogram met de optie Vormkenmerken kopiëren en plak deze op het herhaalpictogram.
Pas de volgende laagstijl op de spreker toe en herhaal pictogrammen:
In deze stap gaan we de albumhoezen in ons ontwerp plaatsen. Na het importeren gaan we ze omzetten naar slimme objecten en de grootte van de slimme objecten met 50% verminderen. We doen dit omdat in de laatste zelfstudie het formaat van het bestand wordt aangepast aan de retina-resolutie. Op deze manier zullen we de kwaliteit van de rasterafbeeldingen niet verliezen nadat het formaat is aangepast aan het netvlies.
Open albumcover-02.jpg en importeer de afbeelding naar je PSD.
Converteer de laag naar slim object door naar Laag> Slimme objecten> Omzetten naar slim object te gaan. Druk op Cmd / Ctrl + T op het toetsenbord om de laag te transformeren. Verklein de maat tot 50%. Noem deze laag "Album Cover Center."
Lijn de laag horizontaal uit met het midden van het canvas en verticaal 20px onder de laag "Play Bg."
Gebruik het gereedschap Afgeronde rechthoek (U) om een vorm te tekenen met de hieronder getoonde parameters. Stel de grootte in op 180x180 px. Gebruik Geen kleur voor het vormvultype en stel de straal in op 3px.
Lijn de vorm precies uit op de afbeelding van de albumhoes.
Pas de vorm nu toe op de afbeelding van de albumhoes door de muiscursor van de miniatuur van de afgeronde rechthoeklaag naar de miniatuur van de laag "Album Cover Center" te slepen, terwijl u de Cmd / Ctrl + Alt-toetsen op uw toetsenbord ingedrukt houdt. Nadat u klaar bent met het kopiëren, verwijdert u de laag met de afgeronde rechthoek, omdat we deze niet meer nodig hebben.
Open albumcover-01.jpg en importeer de afbeelding naar je PSD, converteer hem naar een slim object en verklein hem naar 50%. Lijn de klep verticaal uit met het midden van de laag "Album Cover Center" en horizontaal 40 px naar links. Noem de laag "Albumcover links".
Gebruik het gereedschap Afgeronde rechthoek (U) om een vorm te tekenen met de hieronder getoonde parameters. Stel deze tijd in op 160x160px. Gebruik Geen kleur voor het vormvultype en stel de straal in op 3px.
Kopieer de afgeronde rechthoek naar de laag "Albumcover links" met dezelfde methode voor de middelste hoes. Nadat u klaar bent, verwijdert u de laag met de afgeronde rechthoek.
Open albumcover-03.jpg en importeer deze naar je PSD. Herhaal dezelfde procedure die we hebben gebruikt voor de linkerklep, maar deze keer lijnt u de afbeelding aan de rechterkant uit, zoals hieronder wordt weergegeven.
Pas de volgende laagstijl toe op de middenafdekking:
Kopieer de laagstijl van de middenafdekking en plak deze op de andere twee omslagen. Selecteer nu zowel de linker als de juiste deklaag en stel de vulling in op 50%.
Voeg een tekst in voor de titel van het spelende nummer. Plaats deze enkele pixels onder de middelste kap.
Voeg nog een regel tekst in voor de auteur van het afspeelsong. Lijn beide lijnen uit met het midden.
Gebruik het gereedschap Rechthoek (U) om een vorm te tekenen met de hieronder getoonde parameters. Gebruik # 292A2B en # 38393B voor het verloop.
Lijn de vorm uit met de linkerbenedenhoek van het canvas.
Gebruik het gereedschap Ankerpunt toevoegen om twee ankerpunten toe te voegen en de afstanden in te stellen zoals weergegeven op de afbeelding.
Selecteer de twee ankerpunten die op de afbeelding zijn gemarkeerd en verplaats ze 6 px naar boven.
Gebruik het gereedschap Direct selecteren (A) om de richtingslijnen te slepen, zodat ze er ongeveer zo uitzien als die hieronder worden weergegeven.
In deze stap voltooien we de tabbalkachtergrond door het pad dat we in de vorige stap hebben gemaakt te dupliceren en te spiegelen.
Dupliceer de laag en draai deze horizontaal door naar Bewerken> Transformeerpad> Horizontaal spiegelen te gaan.
Verplaats de gedupliceerde laag precies naar de rechterbenedenhoek van het canvas. Een belangrijke opmerking: zorg ervoor dat er geen opening is tussen de twee vormen.
Selecteer nu beide lagen zoals weergegeven in de afbeelding, klik met de rechtermuisknop en selecteer Vormen samenvoegen.
Dit zou de resulterende vorm moeten zijn. Zoals je kunt zien is er een verticale lijn in het midden van de vorm. Dit betekent dat we twee vormen in één laag hebben die niet volledig zijn samengevoegd.
Gebruik het gereedschap Pad selecteren (A), klik op de vormlaag, klik op de knop Padbewerkingen op de optiebalk en selecteer Vormelementen samenvoegen. Nu heb je de twee vormen volledig samengevoegd. Noem deze laag "Tabbalk Bg."
Als we de directe selectie (A) selecteren, zullen we merken dat er enkele onnodige ankerpunten zijn gemaakt tijdens het samenvoegen van de vormen. Probeer altijd je paden schoon te houden van onnodige punten.
Om deze ankerpunten te verwijderen selecteert u het Ankerpunt-gereedschap verwijderen en klikt u respectievelijk op de twee ankerpunten.
Pas de volgende laagstijl toe op "Tabbalk Bg":
In deze stap maken we handleidingen die ons helpen de pictogrammen in de tabbalk gemakkelijker te aligneren.
Gebruik het gereedschap Rechthoekig selectiekader (M) om een selectie van 60 pixels breed te maken vanaf de linkerkant van het canvas.
Sleep nu een hulplijn van de linkerliniaal en plaats deze aan de rechterrand van de selectie. Zorg ervoor dat de optie voor het klikken op hulplijnen is ingeschakeld. U kunt dit vinden door naar Beeld> Snap To> Gidsen te gaan.
Herhaal de vorige procedure om de andere hulplijnen te plaatsen. Stel de afstanden in zoals getoond op de afbeelding hieronder.
Sleep twee horizontale hulplijnen van de bovenste liniaal en stel de afstanden in zoals wordt weergegeven op de afbeelding.
Sleep de laag "Home" vanuit het icons.psd-bestand.
Gebruik het gereedschap Rechthoekig selectiekader (M) om een selectie te maken die naar de hulplijnen klikt zoals hieronder.
Klik met behulp van het verplaatsgereedschap (V) op de knoppen Verticale centra uitlijnen en Horizontale centra uitlijnen op de optiebalk.
Typ de tekst "Home" met de volgende parameters:
Lijn de tekst verticaal uit naast de onderste geleider en horizontaal naar het midden van het pictogram.
Herhaal stap 21 voor de andere pictogrammen en tekst (Favorieten, Afspeellijsten en Zoeken). Gebruik de afbeelding hieronder voor referentie.
Gebruik het gereedschap Rechthoek (U) om een vorm te tekenen met de parameters uit de onderstaande afbeelding. Gebruik # 5F8F1D en # 99B83D voor het verloop.
Lijn de vorm uit zodat de bovenrand de bovenste horizontale geleider raakt en horizontaal naar het midden van de tabbalk. Noem de laag "Now Playing Bg."
Pas de volgende laagstijl toe:
Sleep de laag "Now Playing" vanuit het icons.psd-bestand en wijzig de vulkleur van de laag in # 000000.
Pas de volgende laagstijl toe:
Lijn het pictogram horizontaal uit met het midden van "Now Playing Bg" en verticaal enkele pixels onder de bovenrand.
Typ de tekst "Now Playing" met de volgende parameters:
Lijn de tekst horizontaal opnieuw uit met het midden van de knop en verticaal enkele pixels onder het pictogram. Kopieer de laagstijl van het pictogram Nu afspelen.
We zijn klaar met het creëren van alle elementen van het ontwerp. Maar we hebben nog een laatste stap, en dat is het bestand opschalen naar het netvlies.
Schalen naar de retina-resolutie is heel eenvoudig en het vergt slechts één stap. Ga naar Afbeelding> Beeldformaat en stel de waarden in zoals hieronder wordt getoond. Zorg ervoor dat alle gemarkeerde parameters exact hetzelfde zijn ingesteld als op de afbeelding.
Dit zou het resultaat moeten zijn na het resizen van de afbeelding naar de retina-resolutie.
Tip:Probeer altijd de elementen in uw ontwerpen te tekenen met vectorvormen, net als in deze zelfstudie. Op die manier kun je ze eenvoudig aanpassen en verlies je niet aan kwaliteit bij het schalen naar het netvlies.
In deze zelfstudie hebben we u laten zien hoe u een iPhone-toepassingsinterface in Photoshop kunt maken met behulp van de nieuwe vectorbewerkingsmogelijkheden. Daarnaast hebben we laten zien hoe u deze technieken kunt gebruiken om een iPhone-toepassing te maken die compatibel is met het oorspronkelijke resolutie-apparaat en de retina-resolutie-tegenhanger ervan.
Accentsconagua