Share
De meeste mobiele apps missen dat extra beetje detail van het ontwerp waardoor ze zich kunnen onderscheiden van de App Store-crowd. Hoewel er geen vervanging is voor het urenlang poetsen van de pixels van uw app door een getalenteerde ontwerper, is het doel van deze serie om mensen met beperkte Photoshop-ervaring en een low-to-no budget te leren apps te maken die stralen!
Deze serie is bedoeld voor de ontwikkelaar die niet het budget heeft om een professionele ontwerper in te huren. Het zal je leren hoe je in het oog springende elementen kunt creëren met een zeer beperkte kennis en inspanning van Photoshop.
In dit bericht gaan we ons concentreren op het wijzigen van bestaande PSD-bestanden om de uitstraling te krijgen die u zoekt voor uw app.
Als u een programmeur bent, heeft u ooit de code van iemand anders gelezen om te weten hoe zij een bepaalde taak hebben volbracht? Bijna alle programmeurs doen dat, en leren ontwerpen is niet anders. Net als in de ontwikkelingswereld, zijn er veel websites vol met PSD's waarmee u kunt experimenteren en waarvan u kunt leren. Op sommige van deze sites kunt u zelfs de PSD's wijzigen en gebruiken in uw eigen werk. Het sleutelwoord is wijzigen. Hoewel veel van de PSD's waar ik het over heb, feitelijk kunnen worden gekopieerd en commercieel zonder aanpassingen kunnen worden gebruikt, zou ik het afraden. Je zult dat niet leren en je zult geen ontwerp vrijgeven dat echt uniek is voor je toepassing.
Zoals vermeld, zijn er honderden sites met gratis PSD's. Als u echter een realistisch project wilt maken, is het de kunst om de sites te vinden waarmee u die PSD's opnieuw kunt gebruiken in uw eigen werk. Tenzij ik gewoon surf voor educatieve doeleinden, bekijk ik meestal alleen sites die zowel kwalitatief hoogstaand werk bieden als flexibele gebruiksvoorwaarden. Hieronder staan mijn vijf favoriete PSD-gerelateerde sites:
Het punt is hier simpel: als ontwikkelaar ontbreekt het u waarschijnlijk aan de vaardigheid om zelf gepolijste applicaties te maken. Je kunt echter snel de ontwerpen van anderen mashupten om je eigen unieke gevoel te creëren met heel weinig kennis van Photoshop.
Met behulp van de hierboven besproken PSD "Mashup" -techniek, zullen we een aangepaste UINavigationBar ontwerpen met behulp van een PSD van www.pixelbeam.net. Zouden gaan wijzigen verschillende elementen in de PSD om ons eigen unieke gevoel te creëren.
Download de PSD hier en open het bestand in Photoshop.
Maak een nieuw project van 640 x 88.
Gebruik nu de knop Documenten schikken om het scherm tussen beide projecten te splitsen.
Controleer voor dit deel van het proces dat Auto-Select Layer is aangevinkt. Dit betekent dat Photoshop automatisch de laag selecteert van het item waarop u zojuist hebt geklikt. Dit helpt bij het navigeren door grotere PSD's. Je kunt het tijdens dit project uitschakelen wanneer nodig.
Selecteer met de verplaatsingstool de actieve kogel hierboven afgebeeld. U zult opmerken dat Photoshop die laag automatisch heeft geselecteerd.
In de gesplitste schermmodus sleep je de actieve opsommingslaag naar het scherm van je UINavigationBar. U zult merken dat de laag- en laagstijlen zijn gekopieerd naar uw UINavigationBar-project.
Dubbelklik nu op de laagminiatuur. Hiermee wordt de kleurenkiezer weergegeven. Vanaf hier kunt u de kleur van de kogel wijzigen.
Kopieer de Bullet Color # 567200 en stel deze in als je voorgrondkleur.
Gebruik het gereedschap Verfemmer om uw project te vullen met de # 567200-kleur.
Klik met de rechtermuisknop op de actieve opsommingstag. Selecteer Laagstijl kopiëren.
Klik met de rechtermuisknop op uw UINavigationBar-laag en selecteer Lay-outstijl plakken.
Selecteer de achtergrond van het diagebied. Vergelijkbaar met stap 6 selecteert Photoshop automatisch de laag (automatisch geselecteerde laag moet worden aangevinkt). Verplaats nu de laag naar uw UINavigationBar-project.
Beweeg de muis over de "Pattern Overlay" -laagstijl. Klik en sleep het naar de laag UINavigationBar.
Zorg ervoor dat alle lagen behalve je UINavigationBar-laag onzichtbaar zijn.
Dubbelklik op de laagstijl Patroonlaag. Het vak Patroonoverlay-laagstijl verschijnt. Zet de dekking op 8.
Als u een aangepaste UINavigationBar in uw project wilt integreren, kunt u de voorbeeldcode in dit github-project bekijken.
Neem even de tijd om door de PSD te kijken. Je zult snel merken dat een goed ontwerp zowel hard als tijdrovend is. Tegelijkertijd is het de moeite van het harde werk waard om de uiteindelijke esthetiek te bereiken. Als u het budget heeft voor een geweldige ontwerper, raad ik u ten zeerste aan een te vinden en te huren. Als u niet over het budget beschikt, kunt u Mashup uw eigen ontwerpelementen gebruiken met behulp van verschillende PSD's. Ik raad ook aan om ontwerpen te bestuderen die te vinden zijn op sites als Creattica Mobile, Pattrns en Beautiful Pixels.
Ik hoop dat je deze tutorial nuttig vindt. Als je iets geweldigs maakt, tweet je het op @williamherring.
*De voorbeeldafbeelding voor dit bericht is gemaakt door het wijzigen van de Leerachtig - één paginasjabloon welke hier te vinden is. De UINavigationBar is gemaakt door het wijzigen van de Simple Dark Slider thema dat hier te vinden is.
Accentsconagua