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.

Créer un site pour une application iPhone ou iPad

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éer un site pour une application iPhone ou iPad

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.

Créer un site pour une application iPhone ou iPad

Ajoutez sur ce bloc bleu un dégradé, pour se faire allez dans le menu Calque> Style de calque> Incrustation de dégradé.

Créer un site pour une application iPhone ou iPad Créer un site pour une application iPhone ou iPad

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).

Créer un site pour une application iPhone ou iPad

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éer un site pour une application iPhone ou iPad

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%.

Créer un site pour une application iPhone ou iPad

Ajoutez un masque de fusion sur ce calque, et cachez le haut du menu.

Créer un site pour une application iPhone ou iPad

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é.

Créer un site pour une application iPhone ou iPad Créer un site pour une application iPhone ou iPad Créer un site pour une application iPhone ou iPad Créer un site pour une application iPhone ou iPad

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.

Créer un site pour une application iPhone ou iPad

Et voici le résultat avec le menu terminé.

Créer un site pour une application iPhone ou iPad

Cet article a été déplacé sur notre site cousin : Grafpedia, pour lire la suite de ce tutorial Photoshop rendez-vous sur cette page.

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

Il y a aucune image pour le moment, soyez le premier à ajouter une image à ce tuto Photoshop.

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 1 commentaire publié sur cet article
  • 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
Ajouter un nouveau commentaire

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 60

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 72

Fatal error: Call to undefined function: spip_unlink() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 96