Launcher-App-Icon-Design für IOS- (Iphone) und Android-Geräte

1. Was werden wir in diesem Kurs behandeln?: In diesem Kurs lernen Sie, wie Sie tolle und cool-aussehende App-Symbole und Launcher-App-Symbole für Android- und iOS-Geräte erstellen . Jetzt werden wir alle verschiedenen Größen von App-Symbolen von kleinen Geräten und großen Geräten und Tetra-Geräten erstellen , 3x, 2x und 1x. Das wird automatisch sein. Sie müssen nur lernen, die Vorlagen zu verwenden, die ich Ihnen zeigen werde. Sie benötigen einige der Erfahrungen mit Photoshop und Illustrator. Mal sehen, was wir in diesem Kurs behandeln werden. Lassen Sie mich Ihnen zeigen, was wir in diesem Kurs tatsächlich tun werden. Zunächst einmal werden wir iOS-App-Symbol entwerfen, die unser Mailbox-Symbol sein wird und wir werden alle seine verschiedenen Größen für verschiedene iOS-Geräte erforderlich generieren . Dann werden wir auf Android App-Symbole verschieben und wir werden sehr schön und cool aussehende Hydration App-Symbol generieren. Eigentlich werden wir zu verschiedenen Themen dafür entwerfen. Eines ist dieses Herz eins und das zweite ist dieses Glas App Symbol. In diesem Kurs werde ich Ihnen auch zeigen, wie ich mit frühen Skizzen dieser Hydratation App kam und wie Sie die gleiche Technik verwenden werden, um einige Ideen zum Laufen zu bringen und kreative Säfte fließen zu lassen. Dann werden wir am Ende auch einige mobile Mockups entwerfen, die unseren Kunden zeigen , weil Kunden einfache einfache Icons nicht mögen. Also werden wir ihnen etwas Cooles zeigen. Jetzt ist die Frage, warum muss ich diese Fähigkeit lernen? Was ist die Marktnachfrage dieser Fertigkeit? Die Marktnachfrage ist, lassen Sie mich Ihnen nur zwei Websites zeigen und das ist 99designs Contest Website. Sie können dort verschiedene Wettbewerbe für App-Icon-Design im Bereich von $200 bis $999 sehen. Dazwischen gibt es $600 für nur ein App-Symbol. Sie können hier sehen, sie sind einfache Symbole und der Preis ist, können Sie hier sehen $999. Dann haben wir dieses Envato Studio und sie bieten verschiedene App-Icon-Designs mit verschiedenen Preisspannen. Sie können hier drüben bei $150, $65, $200, $300, $390 sehen. So ist der Durchschnitt fast über $100. Sie können einfach $100 in nur ein oder zwei Stunden verdienen. Es ist nicht sehr schwierig. Ich weiß, dass Sie bereits überzeugt sind und diesen Kurs wirklich starten müssen, also lasst uns loslegen und einige fantastische App-Icons entwerfen. 2. Warum brauchen wir App-Symbole: Lassen Sie uns also darüber sprechen, warum wir wirklich ein App-Symbol brauchen. App-Symbol ist das allererste, was Ihr App-Benutzer sich ansehen wird. Wenn Sie also gute erste Auswirkungen auf Ihre Benutzer haben möchten, müssen Sie ein sehr schön aussehendes und elegantes App-Symbol haben. Nun, schlechte Symbole ist einer der drei großen Gründe für App-Ablehnungen. Wir brauchen also wirklich ein gutes App-Symbol, um Ablehnungen zu vermeiden. Nun, aus der Sicht des Verkaufs, ist ein gutes App-Symbol ein Muss. Wenn Sie Ihre App wirklich verkaufen möchten, wird sich niemand jemals die Mühe machen, Ihre App herunterzuladen oder sie sogar anzusehen , wenn Ihr App-Symbol lahm und erbärmlich ist. Deshalb ging es darum, warum wir wirklich ein gut aussehendes App-Symbol brauchen. Gehen wir zur nächsten Vorlesung. 3. Eigenschaften der guten App-Symbole: Lassen Sie uns nun über einige Qualitäten guter App-Symbole sprechen. Nun, das erste ist, Ihre Symbole, App-Symbole müssen leicht erkennbar sein. Jeder kann es leicht von jedem anderen Symbol sofort und einfach unterscheiden. Wissen Sie, Ihre Symbole müssen leicht unvergesslich sein, und wenn jemand spielt Sie ein Spiel oder laden Sie eine App, sie sofort sehen und sagen: „Oh ja, ich habe diese App einmal verwendet, es ist eine sehr schöne App.“ Sie müssen ästhetisch ansprechend sein. Wenn sie schrecklich und hässlich aussehen, denke ich nicht, dass jemand sie einmal ansehen oder sogar herunterladen wird. Ihr App-Symbol muss sich aus der Masse herausstechen. Also Leute, die surfen, den App Store oder versuchen, Ihre App herunterzuladen, verwenden und laden Sie Ihre App anstelle der anderen ähnlichen Apps. Dies ist sehr wichtiger Punkt, die Ihre App-Symbol muss einfach sein und sollte eine sehr einfache Formen und Farben verwenden. Das ist alles über die Qualitäten eines guten App-Symbols. Nun, wir sollten zur nächsten Vorlesung übergehen. 4. Donts of App Icondesign: Lassen Sie uns über einige davon sprechen Don'ts von App Icon Design. Ich habe hier einige Dinge von IOS-Richtlinien von Apple aufgelistet, also lassen Sie uns darüber sprechen. Regel Nummer 1; versuchen Sie niemals, Text auf Ihre Icons zu setzen, denn da Ihre Symbole kleiner werden, werden die Texte unlesbar sein. Es gibt also keine Bedeutung, viele Texte über Ihre App-Symbole zu setzen. Wenn Sie versuchen, viele Objekte in einem einzigen Teil eines kleinen App-Symbols zu verwenden, geben Sie viele Fokuspunkte in einem Design weg. Es wird nur Ihre Benutzer Augen ablenken, und dies ist keine sehr gute Design-Praxis, also versuchen Sie, das zu vermeiden. Verwenden Sie keine stumpfen Farben im App-Symbol-Design. Unsere Augen werden diese stumpfen Farben vernachlässigen, also versuchen Sie, sie zu vermeiden. Entwerfen Sie Ihre App-Symbole nicht nur für die großen Bildschirme oder die neuesten iOS-Geräte. Sie beim Entwerfen von App-Symbolen BeachtenSie beim Entwerfen von App-Symbolen immer auch alle anderen kleineren Geräte. Versuchen Sie niemals, das Foto Ihres eigenen Haustiers als App-Symbol oder ein Foto, das Sie vor ein paar Jahren gemacht haben, zu verwenden. Sie können Ihren Benutzer falsch führen und möglicherweise nicht darstellen, was Ihre App tatsächlich tut. Vermeiden Sie, Symbole zu machen, die ähnlich wie IOS Standard-Apps Icons aussieht. Dies wird eine Menge Verwirrung im Kopf Ihres Benutzers erzeugen. Dieser ist ein bisschen technisch; Vermeiden Sie Transparenz in jedem IOS-App-Symbol, das Sie entwerfen, und versuchen Sie dann, Ihre App-Symbole in den App Store hochzuladen. Es gibt keine Unterstützung für PNG oder transparente Dateien. Wenn Sie mehr darüber lesen möchten, werde ich den Link in die Ressourcen für IOS-Designrichtlinien einfügen. Versuchen Sie, die Apple IOS Richtlinie gründlich über App-Symbole zu lesen, so dass Sie einige genial aussehende App-Symbole entwerfen können, und wiederholen Sie nicht die Fehler, die viele Designer machen in diesen Tagen. 5. Do's des App Icon-Designs: Lassen Sie uns darüber sprechen, was Sie wirklich tun müssen, während Sie App-Symbole entwerfen. Lebendige und scharfe Farben erregt das Auge des Benutzers und fängt ihre Aufmerksamkeit auf. Es ist ein Muss. Verwenden Sie lebendige und scharfe Farben so viel wie möglich. Verwenden Sie ein einzelnes dominantes Objekt in der Mitte, um Ihre Zuschauer darauf zu fokussieren. Alle beliebten Apps teilen diese gleiche Qualität, also verwenden Sie sie mit Bedacht. Sie können auch ein Buchstabensymbol verwenden, wenn Sie an nichts anderes denken können. Manchmal passiert es mit allen Designern. Es funktioniert sehr gut, wenn Sie eine große Marke sind. Ihr Gehirn kann einfache Formen leichter verstehen als die komplexen. Verwenden Sie sie in Ihren App-Symbolen. Versuchen Sie nicht, ein Picasso zu sein. Das ist ein bisschen technischer Punkt. Vektoren sind Formen, die sich erweitern oder zusammenziehen können, ohne an Qualität zu verlieren. Versuchen Sie, sie zu verwenden, während Sie in Photoshop entwerfen. Wir werden nur Vektorformen in Photoshop verwenden, wenn es darum geht, App-Symbole zu entwerfen. Dies sind die wichtigsten Punkte, die Sie im Auge behalten müssen, während großartig und genial aussehende App-Symbole entwerfen. 6. IOS (Iphone) Symbol-Spezifikationen: Lassen Sie uns über einige Symbolgrößen-Spezifikationen sprechen. Hier sind einige der wenigen Anleitungen zu iOS-App-Symbolgrößen und ich möchte sie mit Ihnen teilen. Das ist einer von ihnen von diesem Ivo Kerl; ich kenne seinen vollständigen Namen nicht. Ich werde auch die Links in den Abschnitt „Ressourcen“ einfügen, also stellen Sie sicher, dass Sie sie auschecken. Jetzt machen Sie sich keine Sorgen, dass Sie diese Symbolgrößen merken müssen, Sie müssen nur auf sie schauen, damit Sie wissen, welche Symbolgrößen normalerweise verwendet werden. Dies ist also ein Leitfaden, dann ist dies ein anderer. Es gibt nur wenige Symbolgrößen für das iPhone. Sie sich keine Sorgen über Punkte und pt und dies mit der Rate von 2x und mit der Rate von 3x. Wir werden nur diese Pixelgrößen verwenden und wir werden eine Vorlage verwenden, um alle verschiedenen Symbolgrößen automatisch zu rendern. Mach dir keine Sorgen um sie. Sie einen Blick auf sie, damit Sie wissen, welche Größen üblich sind. Dann, wenn Sie in eine Menge Details gehen möchten, können Sie diese Apple iOS Human Interface Guideline auf alle Icons und Bildgrößen lesen. Das ist eine sehr große Liste. Dies alles über Symbolgrößen. Jetzt gehen wir zur nächsten Vorlesung über. 7. Gestalte immer in der Quadrate für IOS: Immer wenn Sie eine iOS-App-Symbole entwerfen, denken Sie immer im Quadrat. Was bedeutet es also ist, dass Sie diese Form nie als Symbolbasis verwenden , da iOS-App-Symbole keine Transparenz oder PNG unterstützen. Dieses Clipping wird automatisch von iOS- oder iOS-Betriebssystemen angewendet. Sie sich also keine Sorgen über diese Rundheit Ihrer Symbole. Einfach im Quadrat entwerfen und Ihre Rundung wird automatisch angewendet. Dies ist ein sehr wichtiges Band, weil die meisten der Größe, die sie versuchen, in dieser Form zu entwerfen, die sehr hässlich endet, indem es schwarzen Bildschirm hinter Ihrem App-Symbol zeigt. Denken Sie also daran und gehen Sie zur nächsten Vorlesung über. 8. Raum und Schwachpunkt der Symbole verwenden: Lassen Sie mich einen anderen Tipp mit Ihnen teilen, während Sie IOS-App-Symbol entwerfen. Stellen Sie sicher, dass Sie so viel Platz wie möglich in dieser Arbeitsfläche verwenden. Wenn Sie entwerfen, wenn Sie ein Hauptobjekt wie irgendein Ding hier haben, versuchen Sie, so viel wie möglich zu verwenden, denn wenn wir versuchen, zu den kleineren Größen zu gehen, wird es schön aussehen. Wenn Ihr Objekt sehr klein ist, wie etwas in der Mitte, vielleicht wie dieser Kreis, so. Lassen Sie mich es einfach in die Mitte bewegen. Wenn wir versuchen, zu sehr kleineren Größen zu kommen, wird das Hauptobjekt unseres Designs immer kleiner. Also das ist sehr wichtiger Tipp, versuchen Sie immer, so viel Platz wie möglich zu nutzen. Denken Sie auch immer an kleinere Größen. Entwerfen Sie also nicht nur 1024 Pixel x 1024 Pixel Leinwand, versuchen Sie immer, die kleineren Größen zu sehen oder zoomen Sie heraus und vergrößern wieder, um zu sehen, dass Ihr Design in fast allen Größen perfekt aussieht. Dies sind einige Tipps zum Entwerfen von IOS-App-Symbolen in Photoshop. Gehen wir nun zur nächsten Vorlesung. 9. Using und Formen für App-Symbole verwenden: Versuchen Sie immer, Vektorformen in Photoshop zu verwenden, wenn Sie iOS-App-Symbole oder andere App-Symbole entwerfen. Nun, was ich mit Vektorformen meine, werden wir hauptsächlich diese Werkzeuge verwenden, diese Formwerkzeuge. Dann werden wir diese Balkenauswahl und vielleicht dieses Stift-Werkzeug verwenden. Dies sind die Werkzeuge, die wir die meiste Zeit verwenden werden. Wenn Sie keine Illustration oder ein 3D-Objekt oder so etwas machen, brauchen wir nur diese Werkzeuge. Gehen wir zur nächsten Vorlesung. 10. App und Raster: Jetzt ist die Frage : „Mit welcher Größe soll Ihr Design beginnen?“ Die Antwort ist, dass Sie in der größten Größe entwerfen müssen, die diese ist, 1024 Pixel mal 1024 Pixel, was eine Voraussetzung für App-Store-Symbol ist, und lassen Sie mich Ihnen zeigen, wie ich es in Photoshop eingerichtet habe. Jetzt habe ich dieses 1024 mal 1024 Pixel quadratische Brett verwendet, und so richte ich dieses Raster ein. Lassen Sie mich es Ihnen zeigen. Gehen Sie zu bearbeiten, Einstellungen und dann Grade Hilfslinien und Slices, und gehen Sie zu diesem Abschnitt. Was ich verwendet habe, ist, dass ich diese Create-Zeile nach jeweils 64 Pixeln und Unterteilungen zu zwei Unterteilungen dafür verwendet habe. Jede kleine Box ist 32 Pixel und jede große Box ist 64 Pixel. Dies ist meine Einrichtung für App-Icon-Design, und ob Sie Illustrator oder Photoshop verwenden, verwenden Sie immer diese 1024 Pixel x 1024 Pixel Leinwand für Ihre App-Icon-Designs. Jetzt wissen wir über die Größe, die wir für das Design verwenden werden. Gehen wir zur nächsten Vorlesung. 11. Photoshop für das IOS App Icondesign: Ich wollte Ihnen mein Datei-Setup für ein App-Symbol zeigen, das 1024 mal 1024 Pixel und die Auflösung auf 72 Pixel, Farbmodus auf RGB und der Hintergrund sollte transparent sein. Stellen Sie sicher, dass Ihr Farbprofil auf „Dieses Dokument nicht mit Farbe verwalten“ eingestellt ist. Dies ist ein sehr wichtiger Punkt. Dies ist meine Dokumente Setup für App-Symbol. Sie fragen sich vielleicht, was ich in Auflösung oder Farbprofil verwendet habe, also ist dies die Antwort. Gehen wir zu einigen der nächsten Vorträge. 12. So verwendest du die kostenlose App Icon PSD: Lassen Sie uns sehen, was in dieser App-Symbol Vorlage ist. Öffnen Sie es in Photoshop. Ich habe es hier in Photoshop geöffnet. Okay, jetzt ist das die Hauptdatei, aber wir werden das benutzen. Bearbeiten Sie mich und speichern Sie Photoshop Smart Object, doppelklicken Sie darauf und Sie können hier sehen, ist unser quadratisches Symbol. Grundsätzlich sind dies wenige Masken für die Rundheit. Wir werden sie benutzen, um unserer Rundheit zu helfen. Dies ist die Rundheit, die angewendet wird, sobald das App-Symbol auf die iOS-Website hochgeladen wird. Das ist eine innere Maske und das ist eine äußere Maske. Wir müssen das am Ende verstecken. Dies sind nur wenige iOS-Farbverläufe und -farben für die Hintergründe. Wenn Sie eine einfache Farbe verwenden möchten, können Sie diese verwenden, jede dieser Farben oder wenn Sie einen Farbverlauf verwenden möchten, können Sie hier einen Farbverlauf verwenden. Dies ist alles über diese Icon-App-Vorlage, so werden wir diese verwenden, um unsere Aufgabe zu erfüllen ISFP-Symbol in Photoshop zu entwerfen. Fahren wir mit der nächsten Vorlesung fort. 13. Aktualisieren von Informationen über die App Icon: Hallo, alle App-Icon-Designer. In den letzten Monaten beschweren sich viele Studenten, dass wir keine App-Icon-Vorlagen herunterladen können. Jetzt ist das Problem, dass dieser Kerl, der die App-Symbol Vorlage besitzt, es in eine kostenpflichtige Website umgewandelt hat. Sie können hier sehen, um Pixel anzuwenden. Wenn Sie auf diese Website gehen, können Sie sehen, dies sind alle App-Symbole Vorlagen und Sie müssen mindestens zahlen $9 monatlich oder jährlich, $60, um diese zu bekommen. Da mein Kurs kostenlos war, neige ich dazu, kostenlose Vorlagen zu verwenden. Ich habe bereits eine kostenlose Vorlage. Ich habe es auf meine Dropbox hochgeladen und ich werde einen Link mit Ihnen teilen, aber seine Version 5, Ich weiß nicht, ob dieser Designer haben mehr aktualisierte Vorlagen. Aber für diesen Kurs können Sie diesen verwenden oder Sie können auf diese Websites gehen, iosicontemplate.com. Sie können hier sehen, Ich habe Ihnen die Methode gezeigt, also keine Sorge, all diese App-Symbol Vorlagen, sie haben fast die ähnliche Struktur der Arbeit wie Sie hier sehen können, gibt es verschiedene Größen der gleichen App. Dann haben wir das, noch einen von everyinteraction.com. iOS 9 App Icon Template und es wurde am 12. Oktober 2015 zuletzt aktualisiert und dies ist die Datei. Sie können diese Datei herunterladen und dies sind alle Symbolgrößen, die sie erzeugen kann. Es hat auch ein Mock-up mit ihm. Ich denke, alle Anweisungen werden in diesen PSDs sein, also mach dir keine Sorgen. Der dritte, den ich dir zeigen möchte, ist dieser Bjango. Das sind, denke ich, sehr geeky Jungs aus UI-Designperspektive. Sie haben eine Menge Aktionen und verschiedene Ressourcen. Sie haben diese App-Symbol Vorlage in Illustrator, Sketch Affinity Designer und Photoshop. Android, iOS, macOS, Apple TV, Apple Watch, iMessage, viele verschiedene Vorlagen. Sie können diese hier herunterladen und versuchen, diese zu verwenden. Sie könnten die Aktionen damit haben, weil sie eine Menge Aktionen haben. Sie können sehen, diese unten sind die Bjango-Aktionen. Das ist das Update, das ich Ihnen vermitteln wollte. Ich werde diesen Link App-Symbol Vorlage Version 5 mit meiner Dropbox verknüpft hochladen diesen Link App-Symbol Vorlage Version 5 und ich werde diesen Link teilen. Behalten Sie jede Option im Hinterkopf. Sie können, wenn Sie bezahlen und diese großen aktualisierten erhalten möchten, können Sie auf diese Seite gehen, wenn Sie mit kostenlosen Quellen bleiben möchten, können Sie diese drei Websites und die alte Vorlage verwenden, die ich jetzt hochladen werde. Das ist das Update, das ich euch geben wollte, also weiter entwerfen. Zeig mir deine Arbeit. Laden Sie es auf diese URL, bit.ly/uistudents. Laden Sie Ihre Icons hier hoch, laden Sie sie auf dieser Seite hoch und ich werde Ihre App-Symbole überprüfen. Sie können hier sehen, das ist mein Bild, immer daran, Ihren Namen am Ende Ihrer Datei zu setzen, wie App-Symbol Unterstrich Studentennamen. Ihren Namen, durchsuchen und laden Sie Ihre Datei hoch. Das sind die Dinge, die du hier tun kannst. Ich freue mich auf Ihre kreativen und tollen Designs. Bleiben Sie dran und lassen Sie mich wissen, ob Sie etwas von mir benötigen oder Fragen, die Sie stellen möchten. Fahren wir mit der nächsten Lektion fort. 14. Entwerfen der 3D-erhöhten Basis von IOS App Icon: In dieser Lektion werden wir diese Basis dieses Symbols zuerst erstellen. Dies ist im Grunde diese rechteckige Form und ihre Höhe und Schatten und alles. Lassen Sie uns beginnen und erstellen Sie eine neue Datei von 1124 Pixeln von 1124 Pixeln. Lassen Sie den Rest der Einstellungen wie diese, Auflösung 72, nicht Farbe verwalten dieses Dokument. Denken Sie immer daran, dass, wenn Sie für mobile Apps oder Webdesign entwerfen, nie ein Farbprofil verwenden, verwenden Sie dies einfach. Farbe Dieses Dokument nicht verwalten. Ok? Drücken Sie auf „OK“. Dies ist unsere Hintergrundebene, machen wir es zu einer Hintergrundebene, Neue Ebene, Hintergrund von Ebene. Dieser Layer wird jetzt in den Hintergrund umgewandelt. Lassen Sie uns die Farbe ändern, indem Sie „Alt Del“ drücken. Dies wird zu dieser Vordergrundfarbe wechseln, die weiß ist, und dann werden wir ein abgerundetes Rechteck erstellen. Wählen Sie die „Abgerundetes Rechteck“ klicken Sie irgendwo, Einzelklick, und wählen Sie die Höhe und Breite bis 1024 x 1024 Pixel und die Rundheit, Sie werden diese 232 Pixel verwenden. Fast und 32, 32 und 32. Drücken Sie „OK“ und ändern Sie seine Farbe E, C, F0, F1. Ok. Dies ist ein bisschen gräuliche blaue Farbe. Wählen Sie „OK“ und dann werden wir beide auswählen und Mittellinie es. Dann werden wir schnell Führungen um unsere Form erstellen, so. Dies ist, Ich verwende ein Plug-in-Kurzanleitung. Jetzt haben wir unsere Form und unsere Führungen festgelegt. Lassen Sie uns diesem Layer einige Stile hinzufügen. Für Stil werden wir hinzufügen wird Abschrägung und Prägung sein. Lassen Sie mich Ihnen nun die Einstellungen zeigen, die ich benutze. Verwenden Sie den Stil als Innere Abschrägung, Techniken, glatte Tiefe, verschieben Sie die Tiefe auf 100 Prozent. Verwenden Sie eine Richtung nach oben. Die Größe sollte 16 mal 16 Pixel betragen. Verwenden Sie immer gerade Zahlen, weil wir unsere Symbole nach unten skalieren, so dass sogar Zahlen besser funktionieren. Verwenden Sie also immer gerade Zahlen in Ihren Stilen. Dann werden wir diesen Winkel zu 90 und diese Höhe zu 21 Prozent oder Grad verwenden. Okay, dieser Hervorhebungsmodus sollte auf Bildschirm eingestellt sein und die Farbe sollte weiß sein und den Schieberegler auf 55 Prozent verschieben. Okay, jetzt für die Schattenfarbe verwende ich diese Farbe B, D, C, 3C, 7. Stellen Sie diese Farbe als Schattenmodus für innere Abschrägung und Schatten Modus sollte normal sein, nicht multiplizieren und schieben Sie seine Deckkraft 200 Prozent. Okay, das war's. Lassen Sie uns nun einen inneren Schatten zu dieser Ebene hinzufügen. Wechseln Sie zu Layer. Schritt 2 ist „Innerer Schatten“. Innerer Schatten, innerer Schatten und innerer Schatten. Innerer Schatten, Farbe wird die gleiche wie diese Abschrägung und Prägung Schatten sein. Also verwende ich die gleiche Farbe B, D, C, drei, C, sieben. Drücken Sie auf „OK“. Die Deckkraft sollte 100 Prozent und der Winkel minus 90 betragen. Denken Sie immer daran, dass wir Schatten von diesem unten nach oben produzieren. Dieser Winkel ist also minus 90 Grad, er kommt von unten. Licht ist unten, also sollte Schatten hier sein Okay, dann sollte der Abstand 32 Pixel betragen, was auch eine gerade Zahl ist. Denken Sie immer daran, warum ich gerade Zahlen verwende, weil unsere Symbole in kleineren Größen produziert werden, so dass wir kein Problem in unseren Berechnungen wollen. Verwenden Sie also gerade Zahlen. Drücken Sie auf „OK“. Lassen Sie uns versuchen, dieser Ebene ein Verlaufsüberlagerung hinzuzufügen. Wechseln Sie zu Ebenenstil, Farbverlaufsüberlagerung. Sie können sehen, sobald ich dies auf Gradient Overlay aktiviert habe, haben wir hier einige Schatten, innere Schatten sind sehr subtil. Das ist der Grund, warum ich diesen Gradient Overlay Layer-Stil verwende. Lassen Sie mich Ihnen die Einstellungen dieses Ebenenstils zeigen. Der Mischmodus sollte normal sein, Deckkraft sollte 60 Prozent betragen, und dieser Farbverlauf ist im Grunde, lassen Sie mich Ihnen die Farbe zeigen, die ich für diesen Farbverlauf verwende. Die Farbe ist B, vier, B, D, C, sechs. Es ist auf der linken Spanne dieser Farbe ist fast 19 Prozent oder 18 Prozent. Wir verwenden diese weiße Farbe mehr und diese gräuliche blaue Farbe und weniger. Dies ist im Grunde weiße Farbe und es ist Deckkraft ist ein 100 Prozent. Klicken Sie auf „OK“ und stellen Sie sicher, dass Sie diese umgekehrte Taste gedrückt haben. Wir benutzen diesen Rückwärtsgang hier. Dann ist der Stil, den wir Radial-Stil verwenden, unser Winkel dieser radialen Verläufe ist 140 und die Skala wird auf 121 Prozent gesetzt. Dies sind die Einstellungen für diesen Layerstil des Farbverlaufs-Overlay-Layers und das war der letzte Schritt unserer Basis-Erstellungsübung. Hier geht es um die Basis für dieses App-Symbol. Gehen wir zur nächsten Vorlesung. 15. Gestalten der flachen Basis von IOS App: Wir werden auch einen weiteren Hintergrund für dieses Symbol erstellen, der einfachen Hintergrund sein wird. Also duplizieren Sie dieses klangte Rechteck und verstecken Sie dieses und wir werden Null Pixel für die Rundheit verwenden. Wir werden keine Rundheit verwenden. Verbergen Sie diesen Abschrägungseffekt und auch diesen inneren Schatten. Wir werden also nur diese Ebenenform für den Farbverlauf und das Aussehen des Symbols verwenden. Ich werde diese Technik in der Umgebung erklären, wenn wir alle Symbole exportieren , da iOS keine PNG verwenden oder anwenden. Wir brauchen im Grunde ein quadratisches Symbol. Also werden wir beide verwenden, um unsere Icons zu erstellen. Dies wird für den abgerundeten Effekt sein und wir werden auch erstellen, verwenden Sie dieses für ein einfaches Symbol. Hier geht es also darum, die Basis dieses Symbols zu schaffen. In dieser Vorlesung haben wir zwei Grundlagen geschaffen, diese und diese. Wir können diesen Winkel auch in diesem quadratischen Hintergrund verschieben. Vielleicht so. Wir können es vielleicht in den linearen Modus ändern und den Winkel auf 90 Prozent ändern und so normal machen. Okay, jetzt ist es besser. Also für die quadratische Form verwenden wir verschiedene Gradienten, die diese ist. Linearer Farbverlauf mit Beseitigung dieser umgekehrten, wird es von weiß bis dunkel sein. Also skalieren, wenn Sie die Skala ändern wollen, denke ich, 130 Prozent sind gut. Wir wollen nicht viel Farbe hier drüben, weil unsere Hauptform hier sein wird. Drücken Sie „Okay“, und das ist alles für diesen Vortrag. Gehen wir zur nächsten Vorlesung. 16. Envelop in Photoshop gestalten: In der letzten Vorlesung haben wir unsere Grundform geschaffen. Lassen Sie uns jetzt unsere Hauptsymbolform erstellen. Ich werde mit dem abgerundeten Rechteck beginnen. Gehen Sie auf „U“ drücken, um das Formwerkzeug und das abgerundete Rechteck auszuwählen. Jetzt werde ich den Radius auf 24 Pixel einstellen und einmal auf diese Leinwand klicken. Jetzt ist die Größe dafür 736 Pixel breit und die Höhe beträgt 444 Pixel. Also stellen Sie diese Größe ein und klicken Sie auf OK und seine Farbe ist diese. Der Wert ist 242d36 oder 242d36. Legen Sie die Farbe fest. Lassen Sie mich es ansprechen, damit Sie es sehen können. Ich werde es in der Mitte ausrichten. Ich verwende benutzerdefinierte Tastenkombinationen. Sie können diese von hier aus verwenden. Drücken Sie das Verschieben-Werkzeug, und Sie können diese Ausrichtung verwenden, um hier abzusenken. Ich habe es in der Mitte ausgerichtet und für den oberen Teil des Umschlags werde ich Photoshop nicht verwenden , weil es kein genaues Werkzeug ist, um eine solche Form des Dreiecks, abgerundetes Dreieck zu erstellen. Dafür werden wir Illustrator verwenden. Aber für den Rest der Formen und die unteren Formen werden wir Photoshop verwenden. Lassen Sie uns ein paar andere Formen wie 2 Balken hier ziehen, so. Ich werde diese Farbe verwenden, die 3498db für die blaue Farbe ist. Ich denke, der erste war dunkler und repliziert es, „Control J“. Ich werde das leichtere benutzen und wir werden sie 1020 Pixel trennen. Ich verschiebe es einfach 20 Pixel von der ersten. Jetzt werden wir beide auswählen und wir werden sie in Bars gruppieren. Dann werden wir es an der Unterseite dieser Form so ausrichten. Nun lassen Sie uns eine andere Form machen, die im Grunde die Stempelform war. Verwenden Sie Ihr benutzerdefiniertes Formwerkzeug von Photoshop Standard. Wenn Sie nicht alle Formen sehen, klicken Sie hier und klicken Sie auf „Alle“. Sie werden alle Formen hier sehen können. Für den Stempel, wenn Sie den runden Stempel wollen, können Sie hier den runden Stempel verwenden und ihn einfärben. Dieser, seine Farbe ist 34495e. Wenn Sie diesen verwenden möchten, können Sie diesen verwenden. Oder Sie können die andere wählen, die ein bisschen rechteckig war. Ich glaube, es ist hier drüben. - Ja. Das hier. Sie können diese auswählen und diese ausblenden. Wir sind fast fertig mit unseren Formen für unser Haupt-Icon, wir sind jetzt fast vollständig in Photoshop fertig. Für die nächste Form des Umschlags werden wir Illustrator dafür verwenden. Lassen Sie uns in der nächsten Vorlesung sehen, wie wir Illustrator verwenden , um den oberen Teil unseres Umschlags zu entwerfen. 17. Illustrator für die Envelop: Okay, bevor wir mit unserem Design in Illustrator beginnen, müssen wir einige Änderungen vornehmen. Gehen Sie zu „Einstellungen bearbeiten“ und gehen Sie dann zu Hilfslinien und Noten. Ich habe meine Rasterlinie nach jeweils 24 Pixeln und Unterteilung auf 12 gesetzt. Es ist im Grunde jede kleine Boxen zwei Pixel, und jede große Boxen 24 Pixel. Auch werden wir unsere Einheiten in Pixel, Strich, Allgemein und Typ einstellen . Typ sollte in Punkten sein und spielt keine Rolle, weil wir jetzt keine Schriftart oder Text verwenden werden. Dies sind zwei Einstellungseinheiten. Konvertieren Sie Ihre Einheiten in Pixel, weil wir in Pixel entwerfen, dann Ihr Raster dann Guides, Setup, einige Führer in geraden Zahlen. Klicken Sie auf OK. Ich werde eine neue Datei öffnen, neue und dann werden wir Pixel in den Einheiten 1024 von 1024 verwenden. Der Farbmodus ist RGB. Richten Sie neue Objekte auf Pixelraster aus, okay und das ist unsere Leinwand. Ich werde mein Raster jetzt einschalten, indem ich auf der Tastatur auf Steuerelement und Anführungszeichen klicke. Jetzt werden wir unsere Hauptform entwerfen und wir möchten hier drüben gestalten. Um sie perfekt zuerst passen, werden wir ein abgerundetes Rechteck zeichnen, nur um es besser auszurichten, also 736 war die Breite und Höhe 444 Pixel und die Rundheit war 24 Pixel. Unsere Form, Hauptform ist hier drüben gemacht. Entfernen Sie diese Gliederung von hier. Dies ist im Grunde der Strichumriss. Ich habe es entfernt und geben diesem eine Farbe, vielleicht weiß ist okay, denke ich. Nun, das ist unsere Hauptform und meine Laptop-Kunst dafür, wir werden Polygon-Tool verwenden. Klicken Sie auf das Polygonwerkzeug und klicken Sie hier. Geben Sie drei Seiten in das Polygon ein, und klicken Sie auf OK. Unser Dreieck ist hier, lasst es uns drehen. Drücken Sie die Umschalttaste, so dass sie in einigen bestimmten Winkeln gedreht wird. Lassen Sie uns die Anleitung jetzt verstecken, und lassen Sie es etwas anderes färben, damit wir es richtig sehen können und auch diesen. Jetzt werden wir dieses Dreieck transformieren, darauf klicken und zu diesem Transformationsfenster gehen. Wir werden 736 Pixel für die Breite und 224 Pixel für die Höhe verwenden. Stellen Sie es so ein und bewegen Sie es hier herum. Nun, was wir benutzen werden, sind im Grunde Live-Ecken. Um auf sie zuzugreifen, verwenden wir dieses Trek Selection Tool. Sie können jetzt sehen, dass diese Live-Ecken hier aktiv sind. Sie können kleine Kreise in diesem Dreieck sehen. Sie können auf einen beliebigen von ihnen doppelklicken und Ihren Pixelwert für Ihre Ecke um uns eingeben. Ich habe diese 24 Pixel eingegeben und drücken Sie OK. Sobald Sie OK drücken, wird dies im Grunde auf eine andere Größe reduziert. Der erste Schritt ist, dass wir eine Kante für diese Ecke machen werden. Um zu machen, dass wir gehen, um einen Ankerpunkt hier zu wählen, um dies zu aktivieren, klicken Sie dann und ziehen Sie diese in dieser Ecke. Sobald wir das Null-Pixel sehen, lassen Sie es los. Nun, um es zu dimensionieren, werden wir unser Werkzeug „Verschieben“ verwenden und dann transformieren. Wir werden 736 Pixel verwenden. Stellen Sie sicher, dass Sie die Rasterskalierung des Pixels ausrichten und alle diese deaktiviert sind. Drücken Sie nun die Eingabetaste und wir haben unsere Form. Lassen Sie es uns entsprechend unserer Hintergrundform ausrichten. Bewegen Sie es ein bisschen nach oben und es ist fast perfekt darauf eingestellt. Ich habe die Steuerung über gedrückt, um dies in diesem Umrissmodus zu kommen, also bedenken Sie, dass Sie die Kontrolle erneut drücken. Jetzt werde ich diese Form kopieren. Kopieren Sie und wir werden es in Foto-Shop einfügen. Wir werden Shape-Layer verwenden. Drücken Sie OK und wir haben unsere Shape-Ebene hier drüben, so. Sie können sehen, dass es perfekt passt. Lassen Sie uns hier ein paar Drop-Schuppen schaffen. Jetzt für den Schlagschatten werden wir einige Werte verwenden, die ein bisschen wie die Entfernung 42 sind, Größe ist vielleicht etwa 764. Der Winkel beträgt 90 und der Mischmodus ist Multiplizieren Opazität. Sie können die Deckkraft verwenden, was auch immer Sie wollen. Wenn Sie einen harten Schatten wollen, können Sie ihn auf 55 oder vielleicht mehr als das setzen. Dies ist die Unschärfe-Größe, wie viel es um diesen Schatten verwischen wird , und das ist im Grunde der Abstand von oben. Halten Sie sie etwas näher, damit Ihre Schatten nicht aus diesem Bereich austreten. Schatten sollten hier drüben sein. Drücken Sie OK und unsere Hauptsymbolform ist fertig. Wir haben Photoshop und Illustrator verwendet, um diese Form zu erstellen. Jetzt werden wir sie in einer Gruppe gruppieren, um sie einfach zu verwalten. Wir haben diese Form und dann haben wir das und hier sind die Bars. Wählen Sie alle aus, indem Sie die Strg-Taste drücken und G drücken, um sie zu gruppieren Ich werde es Mail-Symbol nennen und dann müssen wir es auch ein wenig in der Mitte ausrichten, steuern Sie beide klicken. Richten Sie sie in der Mitte aus. Es ist jetzt fast in der Mitte, so dass es nicht ausgerichtet oder verschoben wird , wenn ich meine Ausrichtungswerkzeuge gedrückt habe. Das ist perfekt. Wir haben unser Design für diese Ikone fertiggestellt. Gehen wir zu dem Abschnitt, in dem wir unsere Symbole in verschiedene Größen exportieren werden und welche Probleme die meisten Designer und neuen Designer beim Exportieren ihrer Symbole haben. 18. Endgültige Design-Akzente: Jetzt werden wir Icon Template App verwenden. Wir haben es in unseren letzten Vorträgen heruntergeladen, und wir werden es verwenden, um App-Symbol in verschiedene Größen für iPhone und iPad zu exportieren. Ich habe meine App-Symbolvorlage geöffnet, psd-Datei. Gehen Sie zu diesem „Bearbeiten Sie mich“ und speichern Sie. Klicken Sie auf „OK“, wenn das Farbprofil nicht übereinstimmt. Mach dir deswegen keine Sorgen. Jetzt werde ich zu diesem Fenster gehen alles vertikal anordnen und zusammenkacheln. Nun dazu, meine Symbolform, gehen Sie zu diesem. Ich werde alle von ihnen gruppieren, und ich werde sie hierher auf dieser Icon 1.psd Datei ziehen. Nun, ich werde diese schließen, und wir werden sie wieder auf Tabs kacheln. Nun, zunächst einmal werden wir diese Top-App-Symbol Template Glyphe löschen, und dann werden wir diese App Mail-Symbol zu Smart Object konvertieren, alt F5, oder Sie können mit der rechten Maustaste und konvertieren Smart Object so. Konvertieren Sie in Smart Object, und dann werden wir noch ein paar Änderungen vornehmen, diese Verläufe jetzt ausblenden und diesen Hintergrund aktivieren und alle in der Mitte ausrichten, so dass. Strg D, um die Auswahl aufzuheben. Lassen Sie mich Ihnen zeigen, wie wir das nutzen werden. Zunächst einmal lassen Sie es einfach speichern Strg S und sehen, was in unserem App-Symbol passiert, während unser App-Symbol ist hier. Hier können Sie sehen, wie unsere abgerundeten Ecken funktionieren. Aber nur um sie zu reparieren, lassen Sie mich Ihnen den Trick zeigen. Lassen Sie uns unseren Verlaufshintergrund ausblenden, einen vollwertigen Hintergrund, und gehen Sie zu dieser äußeren Maske. Die äußere Maske sieht perfekt aus. Schnappen Sie sich diese innere Maskenebene und verschieben Sie sie aus Ihrem abgerundeten Rechteck, dem Hintergrund, nach unten. Diese eine 3D erhöhte Basis. Bewegen Sie diese innere Maske darunter. Innere Maske ist im Grunde diese Form für dieses Symbol, also was wir tun werden, ist, dass wir unsere Form in diese innere Maske stecken. Klicken Sie auf diese. Nun, unsere Form zeigt sich oben auf der inneren Maskenkunst, und wir werden diese beiden so zuschneiden. Dies wird ein perfekt abgerundetes App-Symbol sein , weil wir es in der inneren Form abgeschnitten haben wie wir wissen, dass diese App-Symbol Form von iOS ist nicht im Grunde eine einfache abgerundete Form, so müssen wir es so schneiden. Ctrl S, und wir sind fast fertig damit. Nun, wenn Sie die andere Version Ihres App-Symbols möchten, können Sie diese beiden leicht ausblenden, und Sie haben diesen Hintergrund hier drüben. Sie können den Farbverlauf auch so von Radial in Linear ändern und diesen Umkehren entfernen und diesen Schieberegler auf einen etwas höheren Wert wie 145 verwenden. Wenn wir es jetzt so speichern, können Sie sehen, noch unsere App-Symbol ist in der abgerundeten Form, und es ist wirklich genial. Deshalb habe ich diesen einfachen Gradienten Hintergrund in erster Linie erstellt , weil ich denke, es ist mehr , man kann sehen, entlang der Linie dieses Unterschieds, und es ist moderner aussehender als der andere, der erhöhte. Dennoch sieht unser App-Symbol sehr genial aus. Gehen wir zur nächsten Vorlesung, wo wir Aktion verwenden um all diese Symbole in verschiedene Größen zu exportieren. 19. IOS App mit Symbole aller Größen exportieren: Lassen Sie uns unser Icon in verschiedene App-Icon-Größen exportieren. Um dies zu tun, werden wir unsere App-Symbol Vorlage Aktion Datei verwenden. Wenn Sie nicht sehen Aktionen hier, dieser Ort Stil Schaltfläche, können Sie gehen zu „Windows“ und klicken Sie auf diese „Aktionen“ und es wird hier angezeigt. Was wir also tun werden, ist: Ich habe meine Aktionen hier schon geladen. Wenn Sie sie hier nicht sehen, klicken Sie auf [unhörbar] und gehen Sie zu „Load Actions“ und wir werden zu diesen App-Symbol Vorlagen Aktionen zu durchsuchen und klicken Sie auf „Load“. So wie das. Sie können den zweiten hier drüben sehen. Was wir jetzt tun werden, ist, dass wir diese App-Symbol Vorlage verwenden, Aktionsdatei, und klicken Sie auf diese „Export Square“ Symbole, weil, wir gehen, um quadratische Symbole zu exportieren, weil iOS keine Transparenz unterstützen. Zuallererst werden wir die quadratischen Symbole exportieren, darauf klicken, spielen es so ab. Es zeigt Ihnen die Speichern-für-Web-Dialog. Warten Sie darauf und klicken Sie auf „Speichern“. Ich werde es jetzt auf dem Desktop speichern. Klicken Sie so auf „Speichern“. Es wird einen neuen Ordner erstellen, um all diese Größen zu speichern. Lassen Sie mich zu diesem Ordner gehen. Sie können sehen, dass alle unsere verschiedenen Größen-Icons generiert werden und unser Mail-App-Symbol sieht sogar in kleinen Größen gut aus. Sie können dieses Symbol sofort erkennen. Das ist also die Qualität eines guten App-Symbols. Unsere alle quadratischen Größen wurden generiert. Lassen Sie uns die abgerundeten generieren. Okay, klicken Sie auf diese „Abgerundet“ und spielen Sie diese Aktion. Warten Sie, bis das Dialogfeld die Aktion abgeschlossen hat. Okay, es dauert einige Zeit. Noch eine Sache, schalten Sie einfach diese Konvertierung in SRGB aus. Es ist besser, wenn Sie exportieren. Ich habe gerade diesen sehr guten Tipp bekommen. Andernfalls wird es ein Problem sein, wenn Sie versuchen, es auf anderen Geräten zu sehen. Sehen wir uns jetzt an, wie unsere abgerundeten Symbole aussehen. Okay, das sind unsere abgerundeten Symbole. Dies sind im Grunde Symbole, wenn wir Gradienten Overlay oder Gradienten Hintergrund verwenden. Dieser eine einfache Hintergrund. Wenn Sie sehen möchten, wie Ihre Symbole in diesem Hintergrund aussehen, 3D erhöhten Hintergrund, verstecken Sie diesen, oder wenn einer von Ihnen es zeigen möchte, zeigen Sie es so und „Speichern“ es. Jetzt werden wir unsere Icons in diesem 3D-Stil exportieren. Klicken Sie nun auf diese „Abgerundet“ und klicken Sie auf diesen „Exportieren“ -Button. Spielen Sie diese Aktion und wir werden es in unserem 3D erhöhten Look speichern. Wir werden die Transparenz nutzen, obwohl iOS sie nicht unterstützt. Aber wir wollen es unseren Kunden zeigen. So werden sie von unseren Entwürfen beeindruckt. Das ist also der Trick, nur um ihnen die erhöhten zu zeigen. Lassen Sie mich sehen, wie diese Erhöhten aussehen. Sie sehen fantastisch aus. Dies ist also der App-Icon-Generierungsprozess, den ich verwende. Wenn Sie dieses [unhörbare] oder erhöhte in Ihrem endgültigen Design wirklich verwenden möchten, stellen Sie sicher, dass Sie auch diesen anderen Hintergrund drehen und Ihre Symbole in diesem quadratischen Symbol generieren. Versuchen Sie nicht, Ihre Aktion auszuführen, wenn Sie in dieser PSP-Datei oder Symbol sind. Wechseln Sie zuerst zu dieser App-Symbolvorlage und versuchen Sie dann, sie zu drücken. Drücke es nicht drinnen. Ich werde dies deaktivieren; konvertieren Sie in SRGB. Jetzt verwende ich eine Maske, um diese abgerundeten Ecken zu zeigen, also denke ich, dass diese perfekt sein werden, mach dir keine Sorgen um sie. Klicken Sie auf „Speichern“, „Ersetzen“. Lassen Sie mich sehen, wie unsere Symbole aussehen werden. Unsere Symbole werden so aussehen, weil iOS die Rundung auf seiner eigenen Seite und auf seinem Betriebssystem anwenden wird . Also werden wir die quadratischen Symbole sehen. für die endgültige Ausgabe, wenn Sie diesen erhöhten Effekt möchten, Verwenden Siefür die endgültige Ausgabe, wenn Sie diesen erhöhten Effekt möchten, immer quadratische Ausgabe. Um Ihre Symbole hochzuladen, sollten Sie immer die quadrierte Extraktion verwenden. Verwenden Sie also Exportaktion, die Quadrat App-Symbole ist. Verwenden Sie keine abgerundeten. Hier dreht sich alles um meinen Kurs. Wenn Sie einen einfachen Hintergrund dahinter haben möchten, können Sie diesen ausblenden und Sie können einen beliebigen anderen Farbverlauf verwenden. Versuchen Sie auch, dieses Raster zu verstecken. Wir brauchen dieses Gitter nicht. iOS-Farben gehen zu „iOS-Farben“. Ich denke, wenn Sie diese erhöhte möchten, können Sie alle diese Farben ausblenden und einfach das Grau und klicken Sie darauf, um es in weiße Farbe zu verschieben, so und generieren, exportieren Sie Ihre Symbole. In dieser Lektion, was wir lernen, haben wir unsere Symbole mit Rundheit und in Quadraten exportiert. Am Ende werden wir nur die quadratischen exportierten Symbole verwenden. Diese Vorlesung schließt meinen Kurs für dieses App-Icon-Design ab. Ich hoffe, Sie haben diese Lektion und diesen Kurs genossen. Vergessen Sie nicht, diesen Kurs zu überprüfen. Oder wenn Sie etwas hinzufügen möchten, um zu versuchen, Diskussionen zu verwenden. Du kannst mir immer direkt eine Nachricht schicken. Ich bin hier, um Ihnen auf alle Arten zu helfen. Also pass auf und tschüss. 20. Einführung in die to: Willkommen im neuen Abschnitt dieses Kurses , der Android Launcher App Design sein wird, und wir werden viele verschiedene Design-Optionen für das gleiche App-Symbol erstellen, das im Grunde Hydration App ist, oder überprüfen Sie Ihre Körper-Wasserspiegel. Also lassen Sie mich Ihnen zeigen und Ihnen vorstellen, was ich in diesem ganzen Abschnitt behandeln werde. Also lass uns sehen, was drin ist. Hier können Sie die Haupt Google Nexus Bildschirm sehen und Sie können hier sehen, haben wir drei Symbole erstellt, diese Liquimeter, und die anderen beiden sind diese Hydration und Dropify. Dies sind das gleiche App-Symbol, verschiedene Ideen. Sie sehen alle cool aus. Ich liebe das Herz eins. Sie können auch dieses Liquimeter verwenden, das eine Glas-Ikone ist, und ich denke, sie passen alle gut. Lassen Sie mich Ihnen zeigen, was wir in diesem ganzen Abschnitt behandeln werden. Sie können hier sehen, wir werden diese Vorlage verwenden , die verschiedene Größen erzeugen wird, die im Grunde sechs Größen für alle Android-App und verschiedene Geräte Anforderungen sind, und wir werden drei verschiedene Themen erstellen . Eins ist dieses Glas, und dann haben wir dieses Herz, und dann haben wir dieses Tropfensymbol. Bei der Erstellung dieser drei Symbole habe ich viele Flop-Symbole erstellt, wie Sie sagen können, dass wir nicht sehr gut sind. Das ist also einer von ihnen. Dies ist einer der fehlgeschlagenen. Ich mochte es nicht. Es hatte einige Bars, um den Wasserstand zu messen, aber es sah aus wie, ich weiß nicht, vielleicht sah es nicht sehr gut aus. Also habe ich es fallen lassen. Lassen Sie mich Ihnen einige der frühesten Optionen zeigen, die ich ausprobiert habe. Dies sind ein paar weitere Optionen. Sie können hier drüben sehen, ich habe diese Glasform in Illustrator gezeichnet, aber am Ende waren die Kanten sehr ruckartig, als das Symbol sehr klein war, also ließ ich es los und ich habe es nicht benutzt. Das ist eine andere Idee, und ich habe sie gerade abgelehnt. So können Sie sehen, ob Sie vorhaben, ein sehr schönes App-Symbol oder etwas Cooles zu entwerfen, müssen Sie einen ganzen Prozess durchlaufen. Skizzieren, verbessern, neue Ideen generieren, versuchen zu sehen, welche besser wird oder die endgültige Wahl. Also werden wir all das in diesen sieben oder acht nächsten Lektionen abdecken, also lassen Sie mich Ihnen zeigen, wie wir diese drei coolen Icons für Hydration App erstellen werden. Also lasst uns anfangen und mit der nächsten Lektion fortfahren. 21. Spezifikationen und Größen der Android-App: Nun, in dieser Lektion werden wir App-Symbol-Spezifikationen diskutieren, wie die verschiedenen Größen dieser Launcher App-Symbole für Android-Plattform. Dann werden wir besprechen, welche Größe wir im App Store oder Google App Store einreichen müssen . Dann werden wir sehen, ob wir Transparenz und Alphakanäle in diesen Symbolen verwenden können . Wie können wir nur zwei oder drei Formen verwenden, oder wir können jede Transparenz oder transparenten Hintergrund in diesen Symbolen verwenden . Lasst uns anfangen. Grundsätzlich benötigt jede Android-App sechs verschiedene Symbolgrößen, 512 Pixel, das ist die größte, die Sie hier sehen können. Es ist im Grunde für Google App Store. Die anderen sind für andere Google Android-Auflösungen. Wenn Sie mehr über diese Dichten, Bildschirmauflösungen wissen möchten , müssen Sie meinen Typographischen Kurs nehmen. Es gibt einen vollständigen Abschnitt über all diese Android- und iOS-Sachen und sie sind verschiedene Bildschirmgrößen und wie man für sie entwirft. In diesem Kurs müssen Sie sich nicht viel um sie kümmern, wenn Sie sich nur auf das Entwerfen von Symbolen konzentrieren. Das sind sechs Größen. Lassen Sie mich Ihnen einige Online-Ressourcen wie diese zeigen. Ich werde diese Links mit Ihnen teilen. Dies sind die App-Icon-Größen, 48 x 48 Pixel und sie werden alle im PNG-Format, transparentes Format sein. Dies ist für hdpi 72 Pixel x 72 Pixel. Dies sind alle quadratischen Größen und 144 von 144, 192, 512 für Google Play Store. Ok? Dies sind alle Symbolgrößen. Eine Sache, die Sie sich erinnern müssen, ist, dass diese Launcher Icons genannt werden. Ok? Dies sind keine anderen Symbole wie Sie sehen können, was die Aktionsleiste Dialog und unsere Tab-Symbole. Diese werden Launcher-Icons oder App-Symbole genannt. Denken Sie daran, dass wir sechs verschiedene Größen für sie benötigen. Ich werde auch dieses Dokument zu teilen und es hat alle Größen für all die verschiedenen App-Symbole, iOS, Android, BlackBerry, sogar Web-OS, Windows Phone. Sie müssen dies in Ihren URLs behalten und dieses Dokument speichern. Nun, das Coolste an diesen Android-App-Symbolen ist, dass sie Ihnen volle Autorität geben , dass Sie Transparenz um das Symbol verwenden können. Sie können jede Form eines Symbols erstellen, wie Sie hier sehen können. Ich habe gerade diese Glas-Ikone kreiert und es gibt nichts um sie herum. Wir sind frei, Alphakanäle, PNG zu verwenden. Im Fall von iOS-Designs wissen Sie, dass wir solche Tricks da drüben nicht verwenden können. Sie können hier in der Herz-Symbol sehen, es sieht wirklich cool aus, weil es von den Seiten transparent ist und wir verwenden diese Form. Sie können hier in der linken Ecke dieses Telefon-Symbol sehen, Android-Telefon-Symbol ist es wirklich cool, weil es Transparenz um sie herum hat und wir können nur die Symbol-Einstellung auf diesem Hintergrund sehen. Dies sind einige Unterschiede zum iOS-App-Symbol. Das sind verschiedene Größen, wir können Transparenz nutzen und Sie können hier sehen , dass wir Transparenz um sie herum nutzen können. Dies ist die coolste Sache über diese Android-App-Symbole. Ich glaube, das war's. Wir sollten jetzt zur nächsten Lektion übergehen. 22. Do's of Android App Icons: Jetzt in dieser Lektion werde ich einige der Do und Don'ts von Android App Icon diskutieren. Sie sind fast die gleichen, wie wir in iOS-App-Symbolen diskutiert, aber einige von ihnen sind unterschiedlich. Google Material Design und ihre Designrichtlinien sind wirklich kreiert und das aufwendige alles im Detail. Mal sehen, was sind die Richtlinien und Do's und Don'ts dieser App-Symbole. Jetzt zuerst werden wir über diese Launcher-Icons zu lesen und es gibt einen API-Guide auf Google Developer Forum, Android.com. Es wird Ihnen einige der Best Practices zeigen. Jetzt können Sie auf der rechten Seite sehen Sie gehen, um die Schulen der Launcher Symbol, tun und Don'ts, Größe und Formate zu sehen . Größe und Format haben wir bereits besprochen, es ist PNG und es gibt sechs verschiedene Größen. Gehen wir zu den Schulen des Launcher-App-Symbols. Es ist dasselbe, dass Ihr App-Symbol die Geschichte Ihrer App erzählen wird. Stellen Sie sicher, dass Sie es so gestalten, dass es wie das Cover eines Buches ist. Wenn Sie abholen ein Buch Ende Cover ist sehr hübsch und wenn Sie öffnen, gibt es eine andere Geschichte, als Sie werden es nicht mögen. Dasselbe ist das Problem mit diesen Launcher-Icons. Stellen Sie sicher, dass Ihr Google Play-App-Symbol oder das Android-App-Symbol die Geschichte erzählen wird, worum es in der App geht. Meistens bringen wir auch das Farbschema näher an die App. Wenn das App-Symbol sehr seltsame Farben hat und wenn Sie die App öffnen und es ist sehr unterschiedlich, oder es ist 3D und das App-Symbol ist flach, oder die App ist flach und das App-Symbol ist 3D. Es ist ein bisschen Unübereinstimmung. Nur wenige Dinge, die Sie beachten müssen, ist, dass Sie Ihr App-Symbol mit Ihrer Marke ausrichten werden. Es sollte sehr näher an Ihre Markendesign-Richtlinien oder Markenfarben sein. Dann sollte es leicht von verschiedenen Nutzern auf Google Play entdeckt werden. Es ist das gleiche, was ich Ihnen in früheren Lektionen gezeigt habe, dass es unter verschiedenen Icons bemerkbar sein sollte. Die gleichen Dinge, die sie hier wiederholen, können Sie sehen, fördern die Markengeschichte, erstellen Sie eine Ikone, die einzigartig und unvergesslich ist. Es gilt für alle App-Symbole, es ist universelle Tatsache. Auch das Farbschema, das auf Ihre Marke ausgerichtet ist. Dann haben wir nicht versucht, zu viel mit dem Icon zu kommunizieren. Es bedeutet, dass es nicht zu viel komplex ist. Viele verschiedene Formen versuchen nicht, zu viele Formen zu verwenden. Einfaches Symbol wird wirkungsvoller und mehr Respekt und unvergesslicher sein. Denken Sie daran, deshalb verwende ich sehr einfache Formen, wie wir Tropfen und ein Herz und ein Glas verwendet haben. Das ist sehr einfach, Einfachheit wird am Ende gewinnen. Dann das gleiche, was sie hier wiederholt haben, versuchen Sie nicht, den Anwendungsnamen oder den Text in Ihrem Pycon zu verwenden, dies ist das gleiche, wie wir zuvor besprochen haben. Wenige weitere Dinge haben wir bereits diese Funktion gut in den Schlitz im Launcher diskutiert, versucht, dies zu lesen. Kommunizieren Sie nun [unhörbar] in kleinen Größen. Dies ist das Hauptproblem, meiste Zeit, die wir haben. Ich habe viele Symbole verworfen, als ich die Glass App-Symbole entwarf , weil sie auf kleinen Größen gezackt waren. Deshalb ging ich für ganze Formen wie gefülltes Glas oder Herz oder vielleicht einen Tröpfchen. Hier ist ein sehr guter Punkt, Arbeit auf einer Vielzahl von Hintergründen. Denken Sie daran, dass Ihre Benutzer eine Menge von verschiedenen Arten von Hintergründen erstellen und ihre mobilen Tapeten Papiere werden unterschiedlich sein. Denken Sie daran, dass Ihre Farben so lebendig sind und dass sie auf jedem Hintergrund verwendet werden können. Dies ist der Haupttipp. Hier ist noch eine Sache, reflektieren das implizierte Beleuchtungsmodell des Trägers. Es ist im Grunde, dass das Licht auf dem App-Symbol von oben sein wird, also sollte es Schatten am unteren Rand erzeugen. Diese Linie bedeutet, dass das Licht im 90-Grad-Winkel von oben kommt. Wenn das Symbol 3D ist, verwenden Sie Perspektive. Versuchen Sie nicht, zu viel prospektive zu verwenden, sonst wird es nicht erkennbar sein. Sie können hier sehen, dieses Telefon-Symbol ist ein bisschen in der Perspektive und dieses Film-App-Symbol. Normalerweise gehe ich mit den einfachen Icons. Ich bin nicht sehr gut in der Perspektive. Ich habe versucht, einfache Symbole zu entwerfen, ich denke, wenn Sie mit wie mir begrenzt sind, sollten Sie versuchen, so zu gestalten. Jetzt ist der letzte Punkt, dass, versucht, Ihr Symbol zu wiegen und den ganzen Raum zu verwenden. Nun werden wir in der nächsten Lektion, die über Material Design Richtlinien dieser Android App Icons zu behandeln . Wir werden ihr Raster diskutieren, so dass Sie auf der rechten Seite sehen können, das ist die große, wir werden es im Detail in der nächsten Lektion diskutieren. Das sind alle Do's und Don'ts. Sie können hier drüben sehen, dass sie Ihnen einige der Dinge gezeigt haben. Wenn Sie zu kleine Details erstellen, wie Sie hier auf kleinen Größen sehen können, werden sie nicht sichtbar sein. Sie können hier sehen, dass sie gerade drei erstellt haben, diese Balken und sie sind leicht sichtbar. Sie können auch sehen, versuchen Sie nicht, Ihre Hauptsymbolform auszublenden. Benutze das einfach und überlasse den Rest. Das brauchen wir nicht. Versuchen Sie nicht, Linien zu verdünnen. Sie können hier drüben sehen, sehr dünne Linie wird nicht sehr gut zeigen. Das ist das Problem, das ich mit dem Glassymbol hatte. Es ist mit Linien an den Seiten gezeichnet, ich musste die Linien sehr dick machen. Auch die Sache ist, dass, wenn Sie einen Papiereffekt oder gekrümmten Effekt mit Alphakanälen verwenden können, Sie hier sehen, versucht, den vollen Nutzen Ihrer Alphakanäle und Transparenz zu erhalten . Gehen wir zur nächsten Lektion über, in der wir das Materialdesign diskutieren werden. 23. Richtlinien zu Material: Lassen Sie uns nun sehen, was Google-Designer über ihre Designrichtlinien sagen und wie wir ihnen folgen können , um unseren App-Icon-Design-Prozess zu verbessern, lasst uns loslegen. Wenn wir nun zu diesem material.io/guidelines gehen, nennen sie es Produktsymbole. Nun, die Hauptsache ist, dass Sie auf der rechten Seite sehen können, gibt es ein vollständiges Raster, wie man dieses App-Symbol auslegt, also mal sehen, was sie haben. Nun, zuerst werde ich Ihnen sagen, was ihr Designansatz ist. Design Ansatz bedeutet, was ist das Denken oder Design Denken oder Richtlinie hinter ihrem Google Material Design. Das Materialdesign ist im Wesentlichen Papier auf einem anderen Papier. Ihr ganzes Design basiert auf gestapelten Papieren, ein Papier wirft Schatten auf das andere Papier, wie Sie hier in der Lichtstudie sehen können, dass dieses erhöhte Papier hier Schatten wirft. Außerdem gibt es Licht auf diesem Gebiet hier drüben. Sie können sehen, dass dieser Bereich etwas heller ist und durch das Licht beleuchtet wird. Außerdem haben sie zwei Lichtwinkel 90 Grad und 45 Grad, also bedenken Sie das auch. Sie können hier sehen, gibt es den Materialprototyp, dann haben sie Farben hinzugefügt. So funktioniert ihre entworfene Philosophie oder ihr Ansatz konkret. Für mich denke ich, dass ihr Designansatz der Origami-Kunst des Japanischen ähnelt. Sie schaffen viele verschiedene Formen aus Papier. Jetzt kommen wir ins Netz, wie wir dieses Gitter benutzen werden. Das Gitter ist im Grunde in Viere unterteilt. Ich denke, jetzt ist die Hauptsache, die Sie im Auge behalten müssen, diese Schlüssellinien. Sie können sehen, haben Sie keine Angst vor diesem ganzen Design oder vor diesem ganzen Gitter. Grundsätzlich, was es sagt, ist, dass, wenn Sie gehen, in einer dieser Formen zu bleiben. Wenn Sie nun ein abgerundetes App-Symbol entwerfen, müssen Sie in diesem Bereich bleiben. Wenn Sie ein Rechteck zu entwerfen, müssen Sie diesen Formen folgen, die Rechteck sind, dieses obere Rechteck, vielleicht können Sie eine Dokument-App oder Dokument-App-Symbol entwerfen , werden Sie dieses Rechteck verwenden. Außerdem gibt es ein quadratisches drinnen, also ist das keine allzu große Sorge. Diese Mitte ist im Grunde Brennpunkt, wenn Sie etwas verwenden, das Sie diesen Bereich hier nutzen können. Diese werden als Keylines bezeichnet, halten Sie Ihr Design entsprechend diesen Keylines. Sie können hier sehen, dass sie ihre Keylines Shapes separat anzeigen. Das ist quadratisch, das ist Kreis, das ist Rechteck, das ist eine andere Seite des Rechtecks. Dann zeigen sie, dass ihre DP-Einheitenklasse, sich keine Sorgen um die DPs, im Grunde ist es alles in geraden Zahlen multipliziert meist mit vier oder zwei, teilbar durch vier oder zwei. Dann ist hier ihre Geometriestudie, Sie können sehen, gibt es verschiedene Symbole, die zeigen, dass, wie dieses ist Chrome-Symbol, Es ist auf dieser Geometrie gebaut. Ähnlich sind diese Geometrien, sie verwenden rechteckige Formen. Lassen Sie uns nun einige Produkt-Ikonen-Anatomie diskutieren, Anatomie im Grunde gibt es verschiedene Teile, die sie gegeben haben, dass Sie sie auf diese Weise verwenden müssen und die eine Zahl ist im Grunde der Glanz, den Sie hier sehen können. Der Glanz der Oberfläche, die im Grunde ist Ihre App-Symbol Glanz oder vielleicht etwas Licht, oder vielleicht einige Schatten an der Spitze, oder vielleicht einige glänzende Oberfläche. Einige glänzen über Ihre Ikone, dann zwei und drei sind materielle Hintergrund und Vordergrund. Sie brauchen sich keine Sorgen um sie zu machen, das ist Hintergrund, das ist im Vordergrund. Vier ist im Grunde Ihr Brennbereich oder Ihre Hauptfarbe, die Sie für das Hauptobjekt verwenden, fünf ist im Grunde Ihr Schatten. Sie sich keine Sorgen über diese, Es ist sehr einfach, Sie zeigen alles, ihre Materialdesign-Richtlinie ist sehr aufwendig, sehr detailliert., Sie müssen es sorgfältig lesen. Aber ich denke, für das Icon-Design sind die einzigen Hauptanliegen, diese Schatten zu befehlen, und wie wir den gesamten Formbereich, dieses Gitter effektiv nutzen werden. Wenn Sie all dies lesen möchten, können Sie all diese Richtlinie lesen, ich denke, es ist besser, wenn Sie es gründlich lesen und sie haben viele verschiedene Materialdesign-Richtlinien. Eine weitere Sache, die ich Ihnen zeigen möchte, sind Schlagschatten-Metriken. Nun, die Drop-Schatten sind sehr berechnet, Sie können hier sehen, dass sie Deckkraft 20 Prozent zeigen. X-Offset ist grundsätzlich von der x-Achse, also wird es sich nicht nach rechts oder links bewegen. Es wird von oben nach unten sein, also wird es sich auf der y-Achse 4dp bewegen, und Unschärfe wird 4dp sein. Wenn Sie in 512 x 512 Pixel entwerfen , bedeutet dieser 4dp 16 Pixel oder acht Pixel. Lassen Sie mich Ihnen mit einem Beispiel im Fotoshop zeigen. Sie können hier drüben sehen, in diesem Beispiel verwende ich die gleiche Technik. Nun, wenn Sie diesen Kreis auswählen, können Sie sehen, dass ich hier einen neuen Schlagschatten anwenden werde, also lassen Sie uns diesen Effekt entfernen und einen neuen Schlagschatten anwenden. Jetzt können Sie sehen, dass ich nur 20 Prozent Deckkraft, acht Entfernung und acht Pixel Größe verwende , so dass Sie die Größe in Acht erhöhen können, 16, Sie können sehen, dass es einen sehr schönen subtilen Schatten kostet, wie ein Schlagschatten der Materialkonstruktion. Außerdem gibt es weitere Materialdesign-Studien, die Sie hier sehen können. Es gibt verschiedene Stile, ich werde die Links für diese Ressourcen teilen. Sie können diese einfach packen, Sie können hier sehen, es gibt verschiedene Schichten von Schatten. Wenn ein Element höher oder höher oben im Stapel ist, wird es mehr Schatten wie dieser kosten. Dies ist, wie diese Materialdesign im Grunde funktioniert, Es ist im Grunde Schatten und Lichter und Papiere übereinander gestapelt. Ich denke, das ist alles über dieses App-Symbol, Wenn Sie ein ganzes dieses Dokument lesen möchten, Sie können es gründlich lesen. Sie können auch sehen, dass sie einige Farben gegeben haben, wir können auch die Farben von hier auswählen, aber ich habe es von woanders ausgewählt, ich werde Ihnen das auch zeigen. Hier geht es um Materialdesign Richtlinien, ich werde mit Ihnen teilen diese Materialdesign Schatten, Studie und Sie können die PST von diesem Kerl herunterladen und verschiedene Schatten anwenden. Fahren wir mit der nächsten Lektion fort. 24. Erste Idee und Skizzen für das Symbol: Der erste Teil eines Designs, ob es sich um eine Illustration oder ein App-Symbol oder Webdesign handelt, ist das Skizzieren. Also machen Sie sich mit etwas Papier und Bleistift und probieren Sie einige Skizzen aus. Also zeige ich Ihnen meine Skizzen hier drüben. Also lasst uns sie sehen. Hier sind meine paar ersten Skizzen, Ich benutzte einige Dinge im Zusammenhang mit Hydratation, die Glas oder Wasser, Wassertropfen, ein Blatt mit Wasserwellen gefüllt und ein Becher mit einigen, können Sie hier sehen, Ich habe verwendet einige Marker oder Markierungen darauf, um den Wasserstand zu messen. Dies sind die wenigen anfänglichen Ideen, die ich in meinem Kopf hatte, ich habe sie gerade auf dem Papier. Also, wenn Sie keine Idee haben oder Ihr Geist leer ist, dann gibt es eine andere Technik, die Suche auf Google ist und Inspiration oder Ideen im Zusammenhang mit diesem Konzept erhalten. Also, was wir tun werden, ist, gehen wir zu Google und suchen nach verschiedenen Wasserwellen und Wasser-Apps, ähnliche Apps. Jetzt können Sie sehen, hier haben wir in Google, Ich habe nach Wasser-App gesucht und Sie können sehen, es gibt eine Menge von verschiedenen Wasser-Apps. Ihre Icons zeigen sich auch, wie sie aussehen und ihr Moodboard. Dafür können Sie ein Moodboard vorbereiten. Also haben wir Wassertropfen, paar Flaschen hier drüben, ein Glas, und wenn wir runter gehen, gibt es mehr Wassertröpfchen, und es gibt einen lustigen Wassertropfen hier drüben. Dies ist eine andere Idee, dass die Illustration eines Mannes oder einer Frau oder einer Person sich mit Wasser füllt. Aber ich denke für ein App-Symbol, das sehr kleines Bild ist, können Sie so etwas nicht verwenden. Ich hatte diese Idee, aber ich habe sie verworfen, weil wir sehr einfache und grundlegende Ideen brauchen, also sollte der Benutzer nur durch den Blick auf das Symbol erraten können, was es sein wird. Das sind nur wenige Ideen. Ich mag dieses Hydrat und ihren Wasserstand wirklich, also ist das eine neue gute Welle. Eine andere Sache jetzt über das Farbschema. Wenn Sie in nur einer oder zwei Farben entwerfen möchten, liegt das bei Ihnen. Aber ich mag gute Farben, gute lebendige Farben, um den Benutzer in Richtung des Symbols zu gewinnen, so dass Sie hier sehen können, haben sie nur eine Farbe hier drüben verwenden. Auch in diesem App-Symbol können Sie fast einen Farbverlauf sehen, und dann haben wir eine andere, die weiß und blau, nur eine Farbe im Grunde. Ich ging und suchte auf Google Play nach einigen Wasser-Apps nach Ideen, die Sie sehen können, wir sind hier Wassergetränk Erinnerung und dann haben wir auf der rechten Seite eine Menge anderer ähnlicher Apps, so dass die meisten von ihnen sind mit etwas Glas vielleicht Timer, Ich mag nicht die Idee der Timer, ich denke, es sollte auf die Gesundheit bezogen werden. Deshalb hatte meine ursprüngliche Idee dieses Herz darin, weil es mit der Gesundheit zusammenhängt. Wasser ist also gut für Ihre Gesundheit, deshalb verwende ich das Herzsymbol. Nun, wenn Sie zu diesem iTunes gehen, Es gibt eine Menge von Apps auf Apple und Sie können hier sehen, sie haben immer noch die Flasche, Ich denke, es ist das gleiche, dann haben wir Tropfen, Tropfen Flasche. Die wichtigsten Konzepte sind also rund um Wasserstände und Wassertropfen, Gläser und einige Flaschen. Also denke ich, die Flasche braucht viel Detail. Sie können hier ein paar Kurven eine andere Sache sehen und sie haben dies bereits und ich denke, es wird ihnen besser passen, weil ihre App zeigt auch eine Flasche. Also für Farben, müssen Sie nach Wasserwellen suchen. Wenn Sie nach Wasserwellen-Vektoren suchen, werden Sie viele tolle Farben sehen, wie Sie hier sehen können. Einige lila Schatten Wasser und wir haben eine Menge Spritzer dann haben wir andere Ideen wie Sie hier sehen können ein paar Farbverläufe von dunkel nach blau, so ein bisschen eine lila Farbe mit blau, sie sehen toll aus. Also habe ich versucht, Farben aus diesen Bildern auszuwählen. Ich wählte vielleicht eine, zwei oder drei Farben von hier, und eine Farbe aus vielleicht dieser lila Farbe, und benutze sie als meine vier Farben, okay, für das App-Symbol. Für Wellen, werden Sie einige Farben und Ideen von hier zu bekommen, wie Sie sehen können, ist dies auch eine sehr gute Welle, Ozeanwelle. Dieses sehr einzigartige, denke ich, ich glaube nicht, dass es sehr leicht erkennbar ist. Dann können Sie sehen, es gibt mehr Ideen über Wellen, Arten von Wellen, ein, zwei, drei und vier verschiedene Arten und dann haben wir auch diese Idee, Wellen oben auf [unhörbar]. Dies ist der, den ich in meinem App-Symbol verwendet habe, also für Ideationen und Skizzieren, müssen Sie die Ideen anderer Apps und anderer Designer sehen, so funktioniert die Welt, Sie schauen sich das Auto eines anderen an und entwerfen Ihr eigenes, oder vielleicht besser gestaltet als sie, so dass wir unser Farbschema und unsere Hauptsymbole erhalten werden. In der nächsten Lektion werden wir nun unsere Hauptsymbole in Illustrator entwerfen. Gehen wir also zur nächsten Lektion über. 25. So verwendest du die App-Symbole und Vorlagen: In dieser Lektion werde ich Sie teilen und Ihnen die Ressourcen zeigen, die wir in diesem Kurs und dieser Android-Produktsymbolvorlage verwenden werden, die wir verwenden werden. Es gibt nur wenige von ihnen. Ich fand Daten wirklich professionell und hilft Ihnen App-Symbole einfach zu generieren und spart Ihnen Zeit. Wenn Sie Zeit sparen möchten, müssen Sie diese Vorlagen verwenden. Sie können auch alle diese Größen erstellen, sogar aus Adobe Illustrator und sogar aus Photoshop. Erstellen Sie einfach eine davon und exportieren Sie sie in verschiedene Größen. Aber ich denke, es ist besser, dass Sie diese Art von Vorlagen verwenden. Sie können diese Symbole in kürzester Zeit erzeugen. Außerdem können sie Ihnen diese Vorschau zeigen, die sehr praktisch ist. Zwei von ihnen, Ich mag wirklich, Ich werde die URLs dieser App-Symbol Vorlagen zu teilen. Gehen wir zu unserem Browser. Beachten Sie die erste, die beste professionelle ist diese applypixels.com. Früher war es eine vergangene Vorlage, bevor es kostenlos war, jetzt wird es bezahlt. Sie müssen zahlen $9 pro Monat, um diese awesome App-Symbol Vorlagen zu erhalten. Ich bin ein Fan von kostenlosen Tools wie diese, also habe ich Version 2 für dieses Android-Produktsymbol. Im Moment ist die aktuelle Version drei und es gibt ein paar Änderungen. Wie eine weitere Größe bearbeiten, die 114 Pixel ist, was für Amazon ist, können Sie hier sehen. Sie können es auch im Änderungsprotokoll sehen, das eine neue Größe hinzugefügt hat. Dies ist einer von ihnen, wenn Sie mit diesen Vorlagen verdienen und Sie brauchen, um App-Symbole für das verdienen zu entwerfen und es ist Ihr Beruf, dann denke ich, Sie sollten die Lizenz dafür kaufen. Ich werde die kostenlose Version mit euch teilen, also vergiss nicht, sie herunterzuladen, es ist Version 2.0. Der zweite ist von diesem Kerl. Dies sind mehrere Besitzer es ist von Behance und dieses ist auch wirklich gute Vorlage, sehr einfach zu bedienen. Es hat einige Fehler, also werde ich das in einer Minute besprechen. Hier ist es, Sie können hier verschiedene Größen sehen. Viele tolle Vorschauen, sogar Google App Store. Dann ist es in diesen Apps und es ist auf dem Desktop oder wie auch immer Sie es mobilen Desktop-Bildschirm nennen. Die dritte, die ich Ihnen zeigen werde, ist von diesem Android developer.android.com. Wenn Sie in diesen Bereich gehen hier, auf der rechten Seite, können Sie hier in den Downloads „Android Icon Template Pack“ sehen. Wenn Sie hier klicken, wird es die Vorlage herunterladen. Es ist im Grunde von Bjango-Jungs, schätze ich. Ich mag es nicht sehr, aber wenn Sie es von Overhead herunterladen möchten, können Sie das verwenden. Alle diese Symbolvorlagen, sie haben ähnliche Persönlichkeiten. Ihre Techniken sind fast gleich. Sie entwerfen nur eine Größe und sie werden alle anderen extrahieren. Lassen Sie sich nicht verwirren, dass Sie, wenn Sie eine andere Vorlage herunterladen , nicht damit arbeiten. Jetzt werde ich zu meinem Photoshop wechseln und sehen, was wir in diesen Vorlagen haben. Sie können sehen, was hier, ist dies Android-Produkt-Icon-Vorlage von Pixelresort App-Symbol Vorlage. Die Website, die ich Ihnen gezeigt habe, ist es Version 2, die kostenlos ist, und Sie können hier sehen, gibt es verschiedene Größen, eine Vorschau, und sehr deutlich ist es hier gezeigt 512 Größe und „Bearbeiten Sie mich und speichern“. Grundsätzlich werden Sie darauf doppelklicken und alles hier bearbeiten. Es verfügt über Symbolraster, Kreissymbol und vertikales Rechteck, horizontales Rechteck. Es ist nur ein einfaches App-Symbol im Moment. Also, wenn Sie eine von ihnen verwenden möchten und Sie können das Gitter sehr schön einschalten und ausschalten. Ich glaube, dieser Typ hat es sehr professionell gemacht. Wir haben oben Schatten hier drüben, was, wenn hier geklickt wird, können Sie sehen, das ist „Edge Indigo 900", also ist es der Rand. Wenn Sie die Farbe der Kante ändern möchten, können Sie zu Grau oder so etwas gehen. Wann immer Sie eine dieser Optionen wie Quadrat oder Kreis verwenden, müssen Sie hier alles bearbeiten. Wenn Sie Ihr Design in ein kreis-basiertes App-Symbol bringen möchten, müssen Sie Ihre Designs hierher ziehen. Wenn Sie dies ausblenden möchten, können Sie dies ausblenden und anfangen, App-Symbol hier drüben zu machen, oder normalerweise schlage ich vor, dass Sie Ihre Haupt-App-Symbolform in Illustrator zeichnen und es dann hierher bringen. Dies ist im Grunde ein Atomy dieser App-Icon-Vorlagen. Es gibt verschiedene Typen und Sie können hier sehen, es gibt Schatten und Sie können auch Alpha-Version und Beta-Versionen einschalten, sind verschiedene Tags. Hier geht es nur um diese. Lass mich zum anderen gehen. Die andere, die ich mag, ist diese. Es hat diese Größe 1080, wenn Sie also doppelklicken, ist es im Grunde in 1080. Es hat auch, Sie können hier sehen, das ist Rastermaske, also ist dies im Grunde das Symbolraster. Dann haben wir dieses Symbol hier drüben. Ich habe gerade dieses App-Symbol gezogen, das ich in Illustrator hier gemacht habe, es ist im Grunde Illustrator-Formen. Das ist eine, die ich vorher ausprobiert habe, es ist hässlich, es war einer der abgelehnten. Moment benutze ich diesen Kreis, es gibt einen Fehler damit, der im Grunde ist, dass, wenn ich versuche, den „Schlagschatten“ hier zu drehen, also wenn ich ihn mit einem Schlagschatten speichere, Sie können in der sehen, lassen Wenn Sie mich vergrößern, können Sie für die sehr kleinen Größen wie diese sehen, 96 und 72 Pixel x 72 Pixel, gibt es eine gezackte Linie um mein Design. Es zeigt nicht richtig meinen Schlagschatten. Wenn Sie diese App-Symbol Vorlage verwenden möchten, schlage ich vor, dass Sie niemals Schlagschatten über diese Form hier verwenden. Wenn Sie Schlaganfall verwenden möchten, liegt das an Ihnen. Es wird wirklich sehr gut funktionieren. Sie können hier drüben sehen, noch hat es einige gezackte Kanten. Ich denke, Sie sollten einfach bei diesem bleiben und keine Form oder Schatten um diese größere Form verwenden. Wenn Ihr App-Symbol Form, und wenn ich es speichern, können Sie die Vorschau hier sehen. Lassen Sie mich Ihnen die Vorschau zeigen. Hier ist es. Lassen Sie mich auf 100 Prozent verkleinern. So wird Ihr App-Symbol aussehen. Es hat sehr schöne Vorschauen, aber die Extraktion, wenn Sie Ihre App-Symbole extrahieren, werden sie hässlich aussehen, wenn Sie hier etwas Schatten verwenden. Versuchen Sie nicht, Schatten hier drüben zu benutzen. Dies sind die beiden Vorlagen, die ich empfehle. Eines ist dieses Android-Produkt-Icon-Vorlage von der Website ich denke applypixel, das ist der Kerl Michael Flarup, ich denke. Das ist der Typ, der die erschaffen hat, und ich denke, die sind besser als jeder von ihnen. Sie können sehen, dass es wenige Fehler und Fehler in diesem wie Schlagschatten, die nicht sehr gut herauskommen, also das war's. Wenn Sie nur die kostenlose verwenden möchten, gehen Sie zu diesem Material Design Icon Vorlage und verwenden Sie diese. Wenn Sie die kostenpflichtige verwenden möchten, die aktualisierte Version 3.0 für diese, dann gehen Sie und bezahlen Sie dafür. Ich werde diese 2.0. und all diese Vorlagen mit Ihnen teilen, also mach dir keine Sorgen darüber. Ich werde nur diesen Kurs mit kostenlosen Ressourcen machen. In der nächsten Lektion werden wir die grundlegenden Formen unseres App-Symbols in Illustrator erstellen. Fahren wir mit der nächsten Lektion fort. 26. Glasform in Adobe Illustrator gestalten: Beginnen wir mit der Gestaltung unseres App-Symbols. Zuerst werden wir diese Tropfenform entwerfen. Diese Tröpfchenform ist bereits in Photoshop-Grundformen verfügbar . Sie können hier rüber klicken. Sie können im Shape-Bedienfeld sehen, ob Sie fortfahren und alle Shapes auswählen, die Sie sehen möchten. Da drüben ist ein Tröpfchen. Lassen Sie mich es Ihnen zeigen. Hier ist es. Außerdem haben wir dieses Herz hier drüben. Für diese beiden Formenwerden wir sie nicht in Illustrator zeichnen, werden wir sie nicht in Illustrator zeichnen weil ich glaube, dass, wenn Sie bereits einen Brief haben, Sie ihn nicht wieder bauen sollten. Dann haben wir diese Wellen. Wir sind mit diesen Wellen und diesem Glas oder Behältersymbol links. Diese Glasform und diese Wellenform, diese Wasserwellen, werden wir sie in Illustrator entwerfen. Gehen wir zum Illustrator, und ich werde Illustrator ein paar Einstellungen gemäß diesen Entwurfsrichtlinien und unserem Rastersystem einrichten . Dann werden wir es entwerfen. Wechseln wir zu Illustrator. Jetzt habe ich Illustrator geöffnet. Wenn Sie zu einem Bearbeiten und Einstellungen gehen, gehen Sie zu Allgemein. Was ich hier getan habe, ist in den Einstellungen, ich habe dieses Inkrement auf zwei Pixel und Eckradius auf 16 Pixel eingestellt. Alles ist in geraden Zahlen, oder Sie können sehen, dass dieses Raster auf 16 Pixel aufgebaut ist. Es ist wirklich gut, weil Ihr Hauptsymbol wird in viele kleinere Größen umgewandelt werden. 16 ist durch 2 oft teilbar. Das ist eine Sache. Gehen Sie dann zu Guides & Grid, und rasten Sie alle 32 Pixel und Unterteilungen vier. So habe ich meine Gitter und meine Tastatur-Pixelinkremente eingestellt. Dies sind die Einstellungen, die Sie für Ihren Illustrator vornehmen müssen. Ich drücke „Okay“. Jetzt werden wir eine neue Datei öffnen, „Neu“. Die Größe beträgt 512 Pixel, da es sich um die Hauptgröße handelt. Es ist die größte Größe, und verwenden Sie RGB-Modus. Wir werden für digitale RGB-Geräte entwerfen. Der Vorschaumodus sollte in Pixeln sein, Rastereffekte sollten ein Bildschirm sein. Neue Objekte am Pixelraster ausrichten ist besser, wenn Sie diese Option aktivieren, da Ihre Elemente oder Designelemente an den Rasterlinien haften bleiben. Das ist also besser für eine bessere Ausrichtung. Außerdem werden wir zu Pixels wechseln, weil wir alles in Pixeln entwerfen. Drücken Sie auf „OK“. Hier haben wir unsere Leinwand. Lassen Sie uns vergrößern und verkleinern. Wie Sie hier sehen können, haben wir unser Gitter angelegt, es ist einfacher, so zu gestalten. Jetzt werden wir unsere Glasform zeichnen. Wir holen uns unser Stift-Werkzeug. Zuerst werden wir nur eine einfache Form zeichnen, gerade Linien. Dann werden wir es hier erweitern. Geradlinige Linien, so. Klicken Sie hier, und klicken Sie hier, und klicken Sie dann dort. Wir haben nur ein Quadrat, oder wie Sie ein Rechteck sehen können. Wir werden die Taste „A“ auf Ihrer Tastatur drücken, um dieses Direktauswahl-Tool auszuwählen. Wir werden zuerst dieses auswählen. Ich werde es 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Also zehnmal hier drüben. Ich denke, es bewegt 20 Pixel, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. So wie das. Wenn Sie es mehr verschieben möchten, können Sie es mehr verschieben. 1, 2, 3, 4, 5, 6, 7 und 1, 2, 3, 4, 5, 6, 7. Wir haben fast eine sehr schöne Form dieses Glases hier drüben. Was wir tun werden, ist, dass wir diese beiden Ecken umrunden werden. Wenn Sie sie runden wollen, können Sie sie runden. Nur eine einfache, gerade Glasform, können Sie es so lassen. Was ich tun werde, ist, dass ich wieder „A“ drücken werde, und ich werde diese Ecke hier drüben auswählen. Sie können hier drüben sehen, es gibt ein kleines Symbol hier drüben, das ist dies. Immer wenn ich auf diesen Punkt schwebe, kann ich ihn so ziehen oder darauf klicken. Wenn Sie darauf doppelklicken, können Sie hier sehen, ist der Radius. Ich werde es auf 32 setzen. Auch dieses, ich werde doppelklicken und es auf 32. Alles ist in geraden Zahlen. Es gibt noch eine Sache. Wechseln Sie zum Strich und machen Sie es mindestens 32 Pixel. So, sehr dick. Oder wenn Sie möchten, können Sie auf die 24 Pixel gehen, aber nicht weniger als 20 Pixel. Behalten Sie dies auch in geraden Zahlen. Das ist unsere Hauptform. Wenn du willst, kannst du diese innere Farbe hier drüben entfernen und diesen Strich hier behalten. Wir haben diesen Schlaganfall. Wenn Sie den Strich nach innen oder außen verschieben möchten, können Sie ihn hier so verschieben. Es sieht gut aus. Wenn Sie so etwas tun möchten, richten Sie den Strich an der Außenseite, in Mitte oder in der gewünschten Position aus. Ich habe es hier drüben so reingezogen, also werde ich es so behalten. Unsere Hauptglasform ist fertig. Warum habe ich es in 512 und 512 Pixel-Canvas gemacht? Weil unser Hauptsymbol 512 mal 512 sein wird. Ich muss sehen, wie viel Platz es brauchen wird. Wenn ich brauche, kann ich es erweitern, indem Sie „Shift“ und „Alt“ oder „Wahltaste“ drücken und sehen, wo ich es wie viel größer machen kann. Außerdem kann ich den Schlaganfall entfernen, wenn ich will, so. Es ist zu sehen, wie viel Platz es einnehmen wird. Das ist wirklich gute Form. Eine Form ist fertig. Wir haben diese Form hier geschaffen. Ich werde es auf dem Desktop speichern. Ich habe es bereits gebaut, also mach dir keine Sorgen darum. Glasform Warum habe ich diese Formen in Illustrator erstellt? Denn der Illustrator ist im Grunde das eigentliche Werkzeug für all diese Vektorobjekte und schöne, gestochen scharfe und wirklich gute Ecken. Photoshop ist eine Raster-Software, so dass es einige Probleme zeigen wird. Wie gezackte Kanten oder so etwas. Außerdem können Sie hier sehen, dass der Schlaganfall ein bisschen nicht einmal ist , also werde ich es zu einer geraden Zahl machen, vielleicht 32. Sie daran, dass alles immer in geraden Zahlen gestaltet ist, so dass es perfekt passt. Fahren wir mit der nächsten Lektion fort. Wir werden unsere Wasserformen oder Wellen entwerfen. 27. Entwerfen von Water in Illustrator: In dieser Lektion werden wir diese wunderschönen Wasserwellen in Illustrator erstellen. Gehen wir also in den Illustrator und beginnen, diese Form zu bauen. Nun, wieder, werde ich eine neue Datei mit den gleichen Abmessungen erstellen, 512 Pixel x 512, RGB, 72 Pixel Bildschirm und Pixel Vorschaumodus und drücken Sie „OK“. Ich werde hier drüben mein Gitter einschalten. Es spielt keine Rolle, aber es hilft Ihnen, Biegewerkzeug in viel Leichtigkeit zu verwenden. Es ist sehr einfach, Biegewerkzeug wie folgt zu verwenden. Ich werde mein Farbschema hierher ziehen. Ich werde mich öffnen und du siehst was hier, Wasserwellen deformiert. Ich habe dieses Farbschema. Wenn du zu diesem „Swatches“ gehst, kannst du da drüben sehen, ich habe es hier drüben geladen. Wenn du es hier nicht hast, kannst du es hier rüber laden. Sie drücken „Andere Bibliothek“ und gehen zu „Desktop“ oder wo immer Sie diese Datei gespeichert haben, und Water Waves und „Open“ und es wird hier wie folgt geladen werden. Du kannst es hier rüber ziehen. Ich alle bereit haben es hier drüben, also werde ich diese vier Farben verwenden. Ich habe diese vier Farben in meine Farbfelder geladen. Wenn Sie nicht wissen, wie zu laden, ich habe Ihnen alle bereit gezeigt, dass Sie diese laden müssen. Sie können hier drüben Wasserwellen verformt sehen. Wenn ich hier drüben klicke, können Sie sehen, es wird meine Bibliothek laden. Ich werde diese Farbschema-Datei mit Ihnen teilen, also mach dir keine Sorgen darüber. Hier sind meine Farben angeordnet und das ist meine Datei oder Hauptfläche. Ich hole mir mein Stift-Werkzeug. Denken Sie nur daran, dass dies Ihr Haupt-App-Symbol ist. Ich werde anfangen, hier rüber zu zeichnen, vielleicht von diesem Punkt oder von diesem Punkt. Wenn Sie sehr genau sein wollen, können Sie von hier aus zeichnen und klicken Sie hier so. Ziehen Sie und stellen Sie sicher, dass Ihr Ziehen an die Enden dieser kleinen Kästchen. Sie können sehen, dass sie beide auf beiden Seiten gleich sind und gehen und dann werde ich einmal hier oder hier drüben klicken. Hier drüben macht Sinn. Es ist wirklich symmetrisch, also werde ich hier rüber klicken. Ich werde das immer wieder wiederholen. Entschuldigung. „Control Z“ oder „Befehl Z“, um zurück zu gehen. Also werde ich es wieder tun und hier klicken. Nun, wir werden so außerhalb dieser Leinwand klicken nur um sie zu füllen, weil wir diese Form in eine andere Form stecken, die unser Hauptsymbol ist, oder vielleicht Glas oder so etwas oder sogar Herz. Wir brauchen hier drüben keine Genauigkeit. Ich werde hier klicken. Wir werden den Schlaganfall entfernen. Wir brauchen hier keinen Schlaganfall, also stellen Sie sicher, dass Sie keinen Schlaganfall haben. Wählen Sie nun diese Ebene aus und wir gehen zu Farbfelder, und wir werden diese Farbe verwenden. Eigentlich wurde der Schlaganfall ausgewählt, also werde ich zu diesem wechseln. Es ist unsere Vordergrundfarbe und entfernen Sie den Strich wieder und wir werden diese Farbe hier verwenden. Ich werde meine „Option“ oder „Alt“ -Taste drücken, um es so zu duplizieren. Ziehen Sie es hier rüber, ziehen Sie es nach unten. Sie können auch „Umschalttaste“ drücken, um es in derselben Linie auszurichten. Hier haben wir den zweiten. Wechseln Sie zur zweiten Farbe und wiederholen Sie diese dann immer wieder. Wir werden die dritte Farbe auswählen, die diese scharfe Farbe ist. Wir werden eine weitere Kopie erstellen, die die letzte ist, und wir werden diese dunklere Farbe auswählen. Sie können sehen, dass wir unsere Wellen erschaffen haben. Sie sind ein bisschen spitz. Wenn Sie eine Änderung in sie oder ein Drama zu dieser Form hinzufügen wollen, werden Sie es verzerren. Für Verzerrungen gibt es viele Effekte. Wie Sie zu „Verzerren & Transformieren“ gehen können und Sie diesen Zickzack verwenden können. Aktivieren Sie die Vorschau und machen Sie es glatt und reduzieren Sie die Größe Grate pro Segment Null, weil wir alle bereit Grate haben. Sie können hier drüben sehen, das sind völlig unterschiedliche Wellen. Sie können mit der Größe spielen. Egal, welche Größe Sie mögen, Sie können damit fortfahren. Ich kann mit zwei oder vielleicht einem Punkt gehen. Es liegt an dir. Das sind völlig unterschiedliche Wellen. Es gibt einen weiteren Effekt, den ich verwendet habe, ist zu „Transform“ zu gehen und zu „Scheren“ zu gehen. Ich habe Schere benutzt, weil ich sie verformen werde. Ich werde zeigen, dass sich diese bewegen. Ich benutze diesen Winkel. Ich benutze diesen Winkel zusammen mit, ich denke, 60 für diese Achse. Sehen wir uns die Vorschau an. Meine Wellen haben sich geschoren oder bewegt, verformt. Dies ist der Hauptzweck, während Sie Ihre Symbolelemente erstellen, können Sie sie verformen oder verwenden. Schaffen Sie Interesse daran. Klicken Sie hier so rüber. Versuchen Sie, damit zu experimentieren, wenn Sie hier einen Winkel mögen, können Sie das verwenden. Auch können wir es an der Stelle so bewegen. Sehen Sie den Effekt, welcher Effekt im Grunde kommt. Es gibt noch wenige Dinge, wie wenn Sie abgerundete Ecken oder so etwas wollen, können Sie zu diesem „Stylize“ gehen, und Sie können die Ecken runden. Vorschau. Also zehn Punkte oder vielleicht 20 Punkte oder was auch immer Sie hier sehen können. Jetzt sind die Ecken abgerundet und sie sehen sehr glatt und sehr schön aus. Es gibt viele Möglichkeiten, diese Wasserwellen zu verwenden und zu versuchen, sie zu runden oder zu versuchen, Variation zu erzeugen sie sie verformen oder einige andere Effekte wie diese verwenden. Ich habe dir diesen Zickzack gezeigt. Sie können auch diese anderen Effekte wie diese „Welle“ verwenden. Wenn ich zu dieser Welle gehe, entschuldige, ich habe keine Ebene oder kein Objekt ausgewählt. Ich werde zu dieser „Wave“ gehen. Mal sehen, was es uns zeigen wird. Jetzt können Sie sehen, dass mehr Drama darin steckt. Nur wenige Wellen sind hoch und wenige sind sehr niedrig. Du kannst sie so benutzen. Sie können auch einzelne Layer auswählen. Wenn Sie etwas Variation in diesem oder diesem erhalten möchten, können Sie dies auswählen und zu diesem Welleneffekt gehen und versuchen, es hier zu biegen. Vielleicht kannst du so etwas benutzen. Jetzt können Sie hier sehen, wir haben einen viel mehr Unterschied wie diesen. Sie können auch diese auswählen und verwenden Sie die gleiche anwenden. Wir haben hier einige verschiedene Einflüsse angewendet. Sie können das Formular dieser Welle speichern und wir können es in unserem finalen App-Symbol verwenden. Wir werden diese vier Wellen in unsere Herzform und Tröpfchen oder sogar unser Glas stecken. Damit endet unsere Hauptformen, unser Haupt-Illustrator Teil dieser Übung. Ich werde es retten und wir gehen zur nächsten Lektion über. Mal sehen, was wir in Photoshop endlich tun können, um diese zu konvertieren und Clip diese in schöne App-Symbole. Bleiben Sie dran und wenn Sie Fragen haben, zögern Sie nicht, mich zu fragen. Ich bin immer hier. Ich werde dir bei allem helfen. Wenn Sie nicht viel über Illustrator wissen, kann ich Ihnen helfen, wo Tutorials oder vielleicht gute Kurse zu den Grundlagen des Illustrators zu bekommen . Fahren wir mit der nächsten Lektion fort. 28. Designing gestalten: Jetzt werden wir in Aktion kommen und wir werden diese Wellen greifen und wir werden sie in Photoshop bringen. Wir werden zuerst das Herzsymbol und dann das Tröpfchensymbol erstellen. Sie sind beide im Grunde gleich. Ich werde das Herz ein erstellen, dann werde ich Ihnen das Tröpfchen ein, Drop Symbol, App-Symbol für die Übung geben. Was wir tun werden, ist, dass wir alles auswählen werden. Steuerung A und wir werden es kopieren und dann werden wir zu Photoshop wechseln. Hier haben wir diese Android-Produkt-Icon-Vorlage. Ich benutze dieses 2.0, das frei von applizierten Pixeln ist. Zuvor war es appicontemplate.com. auf der rechten Seite können Sie hier sehen wir haben 512 und bearbeiten Sie mich und speichern. Doppelklicken Sie darauf. Es ist clevere Schicht. Wenn Sie nicht wissen, was ein Smart-Objekt oder Smart-Layer ist, dann müssen Sie meinen anderen Kurs sehen. Zuerst gehen wir zu diesem Platz. Schalten Sie das Gitter ein und wir werden alles diese Glyphie verstecken und auch ich werde diesen Hintergrund verstecken, und mit diesen Rändern und diesem auch. Was ich tun werde, ist, dass ich dieses Werkzeug, dieses benutzerdefinierte Werkzeug auswählen werde, und ich werde mein Herz hier drüben auswählen. Es ist nicht mein Herz, aber es ist von einem Photoshop-Kerl. Er hat es hier drüben gelassen. Wir werden, wenn Sie dieses Herz hier nicht sehen, können Sie alle auswählen und sie werden alle Formen zeigen. Dies sind die Standardformen in Photoshop. Ich klicke auf dieses Herz und wir werden es hier benutzen. Drücken Sie „Umschalttaste“, während Sie es hierher ziehen. Wenn Sie etwas mehr wollen, denke ich, ich kann es auch lassen, wenn ich es erweitern oder aus dem Verhältnis machen will. So wie das. Das sieht gut aus. Jetzt werde ich dieses Gitter benutzen. Ich werde es dimensionieren, Control t oder Befehl t, und ich werde es zu den Ecken dieser Kreise passen. Es sieht wirklich gut aus, gute Proportionen. Diese Gitter werden uns im Grunde helfen, ein proportionales Symbol zu bauen. Es sieht sehr gut ausbalanciert und schön aus. Ich werde es zentrieren. Dies ist unser Haupt-Herz-Symbol oder -Form. Dann werden wir es auf Weiß verschieben, Farbe Weiß. Jetzt ist der nächste Schritt, dass wir gehen, um es zu deaktivieren und wir werden unsere Ebene einfügen wir unser Objekt kopiert, wir kopiert aus Illustrator. Wenn wir „Einfügen“ oder „Control v“ oder „Befehl v“ drücken, werden wir dieses Smart-Objekt verwenden. So, und wir werden es hier drüben ausrichten, so. Jetzt können Sie auf der rechten Seite sehen, das Herz-Symbol ist hier drüben, und Smart Object, unser Vektor-Smart-Objekt transportiert von Illustrator ist hier drüben. Einfacher Trick ist, dass wir „Option“ oder „Alt-Taste“ drücken und zwischen diesen beiden Ebenen und klicken Sie einmal, und es wird in diesem Clip. Nun, so werden wir dieses Gitter ausblenden. Sie können sehen, unsere Herz-Symbol ist jetzt fast fertig. Noch ein paar Dinge, die wir tun können. Jetzt ist es abgeschnitten. Wir können es bewegen, wie vielleicht müssen wir, Entschuldigung, Kontrolle t und wir können es so drehen. Vielleicht so. Wir können es auch so neu dimensionieren. Es sieht wirklich gut aus, vielleicht so etwas. Diese Wellen sehen wirklich cool aus. Der Spaß daran ist, dass alles hier drüben lassen. Wenn ich nun ein Problem sehe, z. B. wenn ich möchte, mehr Abstand zwischen diesen Ebenen erhalten, doppelklicken Sie darauf, und es wird sich in Illustrator öffnen. Ich kann es einfach so reparieren. Ich werde es so verschieben, verschieben Sie dieses ein bisschen nach unten wie dieses und Control s, schließen und es wird sofort in Photoshop aktualisiert werden. Das ist wirklich cool, dass Sie sowohl mit Illustrator als auch mit Photoshop gleichzeitig arbeiten können . Ich werde erneut doppelklicken und ich werde diese Distanz besser bekommen. Es sieht mir etwas seltsam aus. Gehen wir zu Photoshop. Es ist wirklich cool. Wenn Sie es mehr nach unten verschieben möchten, können Sie so etwas verwenden. Außerdem können Sie die Größe und Größe der Wellen so reduzieren. Jetzt denke ich, dass unser Hauptsymbol fast vollständig ist. Schließen Sie es und klicken Sie zum Speichern auf „Ja“. Wenn Sie zurück zu diesem Illustrator, Entschuldigung, Android-Produktsymbol Vorlage, können Sie Ihr App-Symbol hier sehen. Es sieht wirklich toll aus in allen Größen. Sehr knackig, sehr schön. Sie können hier etwas in diesem Ding sehen, wir werden es entfernen. Ich denke, es ist eine fertige Schicht. Dies sind fertige Schichten und glänzt. Wenn Sie sie verwenden möchten, müssen Sie Ihr Design ziehen. Ich werde es gruppieren. Das ist mein Entwurf, und ich werde es schnappen und es hier runternehmen, wo wir das hatten. Ich werde darauf klicken und so. Vielleicht darüber oder darunter, so. Ich werde es entfernen, weiß nicht, dass es in diese Glyphie kommt. Ich werde es hier rüber bringen. Ich weiß nicht, warum es hier eine Art Quadrat benutzt. Vielleicht muss ich es außerhalb dieser Obhut verschieben. Wir verwenden diese Sorgfalt nicht, aber wir verwenden im Grunde den Kreis hier drüben. Wenn Sie möchten, können Sie es so in den Kreisbereich hier oben verschieben. Ich werde den Kreis anstelle dieses Quadrats benutzen. Ich bin von Design hierher gezogen, und ich brauche mein Design, um hierher zu bewegen, und ich werde die Basis verstecken. Es ist perfekt, und ich werde das Gitter verstecken. Das sieht toll aus. Ich weiß nicht, warum es im Hintergrund etwas gezeigt hat. Es gab einige Schichten, viele Schichten. Stellen Sie sicher, dass alles perfekt ist. Wenn du das Alpha und die Beta hier drüben haben willst, kannst du es benutzen. Wenn Sie diesen Ordner öffnen, können Sie bei Bedarf Beta- oder Alpha-Versionen verwenden. Dann wird Ihr App-Symbol so aussehen. Ich bevorzuge es ohne irgendetwas. Dies ist unser Hauptsymbol. Wir haben unser Haupt-Icon entworfen. Jetzt, um all diese Symbole zu extrahieren, werde ich Ihnen alles in der letzten Lektion zeigen. Bleiben Sie dran. In der nächsten Lektion werden wir das App-Symbol dieses Glases mit dem Wasser erstellen, und wir werden eine andere Vorlage verwenden. Fahren wir mit der nächsten Lektion fort. 29. Fertigstellung von Glass in Photoshop-Vorlage: Jetzt in dieser Lektion werden wir unser Glasform-Icon verwenden, das wir in Illustrator erstellt haben, und wir werden es in Photoshop bringen und wir werden eine andere App-Symbol Vorlage verwenden, die Material Design Icon Template ist und es ist völlig kostenlos. Es gibt sehr wenige Probleme damit, aber ich denke immer noch, dass es eines der besten ist und es ist kostenlos. Also werden wir mit diesem leeren Symbol beginnen und jetzt, wenn Sie die rechte Seite Ebenen Panel öffnen und zu diesen Symbolen am unteren Rand gehen, werden Sie diese 1080 sehen und es sagt, bearbeiten. Wir werden alles in diesem Bereich tun doppelklicken Sie auf diese „Bearbeiten“ und im Grunde ist es ein intelligentes Objekt. Jetzt werden wir dieses schaffen. Wir gehen zu Illustrator und wir werden diese Ebene greifen, wir entwerfen diese Glasform und kopieren sie. Wir werden es hier in Photoshop als intelligentes Objekt einfügen „Control A“ und auch wir können dieses Raster mit Präzision wie folgt verwenden. Also liebe ich dieses Gitter wirklich. Sie können alle hier sehen ich diese inneren Linien verwenden, um dieses App-Symbol und dieses Glas auszurichten. Ich werde dieses Gitter verstecken. Wenn ich Recht habe, werde ich meine kleine Eclipse verwenden, tut mir leid. Ich werde meine große Eclipse verwenden und wenn es Farbe etwas anderes ist, doppelklicken Sie darauf und verwenden Sie die weiße Farbe. Entfernen Sie alle Auswirkungen darauf. Wenn es also Strich oder Farbüberlagerung oder Schlagschatten hat, entfernen Sie sie einfach. Wenn Sie hier sehen, dass die Farben nicht funktionieren, stellen Sie sicher, dass sowohl diese Deckkraft als auch die Füllung auf 100 Prozent eingestellt sind. Das ist es also und wir haben diesen bereits benutzt. Jetzt gehen wir wieder zu diesem Illustrator, und wir werden unsere Wasserwellen öffnen und diese kopieren. Wir werden sie auch in Photoshop importieren, sie hier einfügen und wir haben sie bereits alle hier so eingefügt. Was wir tun werden, ist, dass sie hinter diese Vektorform kommen, so. Wählen Sie nun dieses Vektor-Smart-Objekt aus und drücken Sie „W“, um die magische Schriftart Photoshop auszuwählen und diesen inneren Abschnitt dieses Vektor-Smartobjekts auszuwählen. Wählen Sie die Auswahl aus, ändern Sie sie und erweitern Sie sie um ein Pixel. Ich werde hier eine andere Ebene erstellen, wie diese Ebene eins. Drücken Sie „G“ und wir werden hier etwas Farbe bekommen, die weiß sein wird. Also so, wir haben weiße Farbe darin und was im Grunde, ich versuche zu tun, ist, dass ich das in dieser inneren Schicht klemmen werde. Also werde ich dies mit der Alt-Optionstaste clippen und so wurde es abgeschnitten. Sieht wirklich toll aus. Also, wenn Sie einige Wasserwellen verwenden möchten, können Sie es zusammenziehen und erweitern Sie es, was Sie wollen. Du kannst hier drüben sehen, jetzt benutze ich so etwas. Auch, wenn Sie in meinem ursprünglichen Icon-Design sehen, habe ich die vierte Farbe hier entfernt. Also, was ich getan habe, ist, dass ich doppelt darauf geklickt habe und diese vierte Ebene und „Control S“ oder „Command S“ entfernt habe und ich gehe zurück. Sie können sehen, dass wir nur drei Farben haben. Wenn Sie sie mehr verschieben möchten, können Sie sie so bewegen. Machen Sie die Distanz ein bisschen größer, so. Weil es ein Glas ist, wird es wirklich cool aussehen, wenn wir mehr Distanz haben. Außerdem können Sie es drehen, um eine Attraktion oder so etwas zu schaffen. Also vielleicht etwas näher dran, bewegen Sie es so oder so etwas hier. Diese Feinstimmungen werden also mehr Zeit in Anspruch nehmen. Für mich dauert das wenigstens mehr Male, bis ich nicht zufrieden bin. Also bewege ich diese einfach weiter. So wird unser App-Symbol sein. Jetzt können Sie auch Transparenz für diese große Eclipse verwenden. Also werde ich diese Deckkraft auf 50 Prozent setzen, so. Also noch eine Sache, die ich denke, es ist ein bisschen oben, also werde ich es etwas nach unten bewegen. Da sind meine drei Schichten. Also werde ich versuchen, sie zu gruppieren. Es ist besser, dass sich Ihr Design in einer Gruppe befindet und Sie können es so nach unten verschieben und „Control S“ versuchen, das Raster zu verwenden, sehen Sie, wo es sich im Raster befindet. Vielleicht können wir es noch etwas erweitern. Verwenden Sie mehr Bereich um sie herum. Lassen Sie uns dieses Ding „Control S“ verstecken und sehen, wie es aussieht. Also lassen Sie uns hineinzoomen und es sieht wirklich toll aus auf allen Größen. Sie können hier sehen, dies ist unser App-Symbol. Wir haben dies zu dieser Ansicht. Dann haben wir wie dieses in unserem MyApp Store im Google App Store und es sieht wirklich cool auf unserem Hauptbildschirm aus und ich denke, das war's. Nun, für euch, werde ich euch die Herausforderung geben, das Drop-Icon mit der gleichen Technik zu erstellen. Sie können diese Designs über die URL hochladen, die ich mit Ihnen teilen werde. Laden Sie also Ihre Arbeit hier hoch. Ich werde Ihre Arbeit bewerten und sehen, wie Sie durchführen werden. Also lasst die Herausforderung beginnen. 30. Die Symbole auf alle Symbole für Android-Geräte extrahieren: Okay, jetzt in dieser letzten Lektion werde ich Ihnen zeigen, wie Sie all diese Symbole aus beiden Vorlagen extrahieren können. Also habe ich diese Material Design Icon Vorlage und Android App Icon Vorlage 2.0 verwendet. Sie können auch die 3.0. Version herunterladen, aber die Methode wird die gleiche sein, für diesen Kerl, Michael Flarup, hat er Action-Datei entworfen. Wenn Sie zu diesen Aktionen gehen hier keine Aktionen angezeigt werden, können Sie zu Fenster gehen und diese Aktionen aktivieren. In den Aktionen habe ich diese Aktionen hier drüben kopiert. Wenn diese Aktionen nicht angezeigt werden, können Sie darauf klicken, und Sie können Aktionen laden. Gehen Sie zu diesen Ladeaktionen und durchsuchen Sie diese Datei. Ich habe dieses Android-Produkt-Icon-Vorlage 2.0. ATN-Datei. Aktionsdateien haben diese Erweiterung ATN. Sie müssen es laden und es wird so sein. Sobald Sie diese geladen haben, stellen Sie sicher, dass Sie Ihr Symbol haben. Es gibt nichts um ihn herum oder nichts extra um ihn herum wie diese erstellen Sie es ausschalten oder irgendwelche Schatten oder Probleme. Stellen Sie sicher, dass es in Ordnung ist. Dann werden wir es für diese Datei verwenden. Also gehen Sie zu dieser Datei und klicken Sie einfach darauf und gehen Sie zu diesem. Der erste ist der Export aller Größen, das ist die grundlegende Aktion. Dies ist der Aktionsordner Wenn Sie hier klicken, können Sie sehen, dass der Ordner geschlossen und geöffnet wird. Klicken Sie nun darauf und drücken Sie Play und wir werden diesen Dialog sehen und wir werden ihn so speichern. Ich werde es auf dem Desktop speichern. Mal sehen, ich habe eine Menge Ordner geöffnet. Dies sind die Größen, die es erzeugt hat 512, 192, 144, 96, 72, 48. Jetzt fehlt eine Größe, die 114 ist. Wenn Sie es generieren möchten. Mach dir keine Sorgen darüber. Ich werde diesen 512 verwenden und ich werde es hier so importieren und ich werde die Größe exportieren, die 114 sein wird, so und speichern. So erstellen Sie die 114 Größe, die in dieser Vorlage fehlt. Jetzt werde ich es hineinziehen und ich habe ein komplettes Set, 114, 512, 192, 144, 96. Also, das ist 114. So werden Sie hier die fehlende Größe erstellen. Es ist nur ein bisschen Kopfschmerzen, aber ich denke, es lohnt sich, wenn Sie keine 10$ pro Monat ausgeben müssen. Jetzt kommt zu dieser Material Design Icon-Vorlage, es basiert auf der gleichen Technologie. Also, was wir tun werden, ist, dass wir einfach Datei-Export verwenden, Speichern für Web und es wird auf die gleiche Weise geladen werden, wie wir es so speichern, speichern und das sind alle Dateien. Ich werde sie ersetzen und lassen Sie uns die Bilder sehen. Also haben wir dieses 512 Symbol, ich denke, ich habe gerade das Quadrat ausgewählt. - Ich weiß es nicht. Lassen Sie mich zu diesem Thema gehen. Also, was es sagt, ist, dass diesen Hintergrund verstecken. Versuchen Sie also, diesen Hintergrund zu verstecken, bevor Sie exportieren, so. Das ist wirklich gut, wenn Sie wissen, wie es geht. Speichern und speichern und ersetzen. So, jetzt können Sie sehen, ich habe diese Symbole und sie sind transparent von den Seiten. Wenn ich es also in Photoshop ziehe, wird es von allen Seiten transparent sein. Ich liebe diesen transparenten Bereich rund um diesen weißen Bereich wirklich. Es sieht wirklich cool aus, auch im Screenshot hier drüben. Ich denke, wenn ich es für einen meiner Kunden getan habe, könnte ich ihm mindestens $200 für diese App-Symbole oder vielleicht mehr berechnet haben. Jetzt ist dies die letzte Lektion für diesen Kurs. Ihre Herausforderung besteht darin, ein ähnliches App-Symbol mit einem Tropfen mit der Tröpfchenform zu erstellen. Wenn Sie irgendwelche Probleme haben, lassen Sie es mich wissen. Dies ist eine wirklich solide Skala. Ich denke, normalerweise, Mindestbetrag für ein App-Symbol sollten Sie mindestens ein $100 für die Erstellung eines App-Symbol berechnen, weil wir wie fünf oder sechs Größen für alle verschiedenen Plattformen oder Auflösungen für Android oder sogar für iOS, werden Sie für drei oder vier Größen erstellen. Also werde ich versuchen, euch zu aktualisieren, oder wenn ich etwas Neues habe, werde ich es zu diesem Kurs hinzufügen. Das ist die letzte Lektion. Ich freue mich auf Ihre Entwürfe und ich werde warten. Lassen Sie uns zu einigen neuen tollen Fähigkeiten übergehen. Schauen Sie sich meine anderen Kurse an und auf Wiedersehen, achten Sie auf und haben Sie einen schönen Tag.