32
Créer une interface graphique pour iPhone App
Grâce à ce tutorial Photoshop vous allez apprendre à créer une interface graphique pour créer un site Internet pour promotionner une application iPhone ou iPad.
Grâce à ce nouveau tutorial Photoshop vous allez apprendre à créer un site Internet pour faire la promotion d’une application iPhone / iPad. Vous apprendrez notamment à créer un Layout alliant parfaitement le design actuel de l’internet avec un aspect illustratif (presque cartoon). Parfaitement adapté pour les applications web et iPhone, ce template pourra parfaitement s’adapter à d’autres thématiques : portfolio, site écologique etc.
Pour télécharger le fichier source Photoshop de ce template, merci de vous connecter ou de vous créer un compte premium.
Dans ce tutoriel, j’ai utilisé le pack Vector Landscape publié sur Grafpedia.com. J’ai également utilisé certaines icônes trouvées sur cette page, ou encore quelques illustrations provenant du site. Ces images ne seront donc pas disponibles dans le fichier psd.
Avant de commencer, voici le résultat final de ce tutoriel Photoshop.
Et maintenant il est grand temps de commencer. Je remercie par avance tous ceux qui nous aideront en publiant le lien de cette page sur Twitter, Facebook ou encore StumbleUppon 
ETAPE 1 Créer un document Ouvrez Photoshop puis allez dans le menu Fichier> Nouveau et entrez les valeurs : Largeur 1000 et hauteur 1200px.
Appuyez sur le bouton OK. Votre nouvelle image apparaît à l’écran. Vérifiez que la fenêtre des calques soit bien ouverte (pour l’ouvrir, allez dans le menu Fenêtre> Calques).
Créez un nouveau calque et nommez-le bg_header. Puis modifiez la couleur d’avant plan par ce bleu #3288c3. Enfin utilisez l’outil Rectangle de sélection (M) pour créer une sélection de 1000x450px, et utilisez l’outil Pot de peinture (G) pour la remplir.
Ajoutez sur ce bloc bleu un dégradé, pour se faire allez dans le menu Calque> Style de calque> Incrustation de dégradé.
ETAPE 2 Créer le premier menu Sur le haut du Template sera positionné un premier menu composé d’un logo et d’une suite de liens. En dessous du menu se trouvera une ombre. Pour créer celle-ci, commencez par créer un nouveau calque que vous nommez le shadow. Ensuite, modifiez la couleur d’avant plan par le noir, et sélectionnez l’outil Dégradé (G) (et dans le sélectionneur choisissez le dégradé Premier plan -> Transparent). Enfin sur votre image, créez un dégradé noir du haut vers le bas (voir l’image ci-dessous).
Pour terminer, ajoutez sur ce calque un masque de fusion afin de cacher les parties gauche et droite. Allez dans le menu Calque> Masque de fusion> Tout faire apparaître. Puis créez un dégradé sur la droite et la gauche.
Créez un nouveau calque et nommez-le bg puis utilisez l’outil Rectangle de sélection (M) pour créer une sélection de 1000 x 40px et remplissez cette sélection de blanc. Pour terminer, diminuez l’opacité à 40%.
Ajoutez un masque de fusion sur ce calque, et cachez le haut du menu.
Pour le logo, écrivez le nom de votre site Internet (j’ai utilisé la font Androgyne). Ajoutez sur ce texte trois styles de calques : Ombre portée, Ombre interne, Incrustation de dégradé.
Pour terminer le menu, ajoutez sur la droite des liens (font utilisée Helvetica). Pour le lien actif j’ai simplement créé un rectangle arrondi avec le bleu #3d85c1.
Et voici le résultat avec le menu terminé.
Cet article a été déplacé sur notre site cousin : Grafpedia, pour lire la suite de ce tutorial Photoshop rendez-vous sur cette page.
Article publié par Wonka
Vous aimez cet article? Partagez le !
Je suis très humblement le webmaster et le créateur de ce site, vous êtes en ce moment sur ma fiche membre, vous avez la possibilité de m’’envoyer des messages, pour toutes questions n’hésitez pas une seule seconde !
La galerie des membres
Voici les images déjà publiées par les membres de ce site, merci à vous pour votre créativité !
Questions et commentaires, Il y a 1 message de forum.
Vous avez besoin d’eclaircicemment sur un points évoqués dans cette leçon, dans ce cas laissez votre question en utilisant le formulaire ci dessous, notre équipe vous apportera rapidement un complètement d’information. Merci d’être le plus précis possible lors de la rédaction de votre demande.
-
13 février 2012 11:02, par web agency studio
Exactement ce que je recherchais.
Je découvre votre site et hop en favori !
Je vais voir pour adapter ce tut sous gimp...
Répondre
