Vous en voulez certainement un, ou vous en avez déjà. C’est un dispositif impressionnant, mais l’interface iPhone est aussi quelque chose qui donne beaucoup de plaisir à l’utilisation. Aussi, nous allons vous montrer comment faire l’interface sur Fireworks.

ETAPE 1
Pour commencer, téléchargez ces 2 images qui nous serviront de base.

Iphone Photo

Colored background-image

Créez un nouveau document de 800 x 800px avec un fond noir, et importez ces 2 images.

ETAPE 2
Maintenant, mettez le calque avec l’image des poissons derrière l’iPhone et réduisez l’image, essayez de l’ajuster pour qu’il ressemble à l’illustration ci-dessous. Astuce: nous allons utiliser l’image du téléphone avec la partie centrale découpée, comme une couche au-dessus de toutes les autres, de cette façon nous disposons de plus de liberté pour travailler avec les formes placées derrière.

ETAPE 3
Créez un rectangle de 255 x 380px, il va masquer l’image de fond. Maintenant, sélectionnez l’image, copiez et collez dans le rectangle (CTRL + MAJ + V). Maintenant, placez-le afin qu’il reste à l’intérieur des limites d’affichage et derrière elles.

ETAPE 4
Afin de créer l’interface, nous allons utiliser plusieurs rectangles et appliquer certains dégradés et opacités. Le processus est tout à fait simple, et il devrait y avoir de nombreuses façons de créer ces effets. Commençons par créer un rectangle de 255 x 20px sur le dessus, faire # 000 et une opacité de 55%. Copiez ce rectangle, déacez- le de 20px plus bas et insérez une hauteur de 76px. Ensuite, créez une ligne d’1px en bas, faites-la à # 000 et une opacité de 50%.

ETAPE 5
Maintenant, nous allons créer un petit effet 3D. Créer un rectangle de 255 x 38px blanc et positionnez-le dans le haut du rectangle, le dernier créé, comme indiqué. Maintenant, appliquez un dégradé linéaire qui va de la FFF à la FFF # # et utilisez les transparences dans le dégradé lui-même comme nous le montrons dans les détails (Remarquez que nous avons créer un point supplémentaire d’opacité pour rendre l’effet de plumes seulement à la partie inférieure) .

ETAPE 6
Nous avons déjà le haut, copiez maintenant les deux rectangles de la partie inférieure que nous venons de créer. Créez un autre ligne à # 000 avec une opacité de 50% que vous placerez au-dessus, de la même manière qu’auparavant.

ETAPE 7
Nous allons la case de dévérouillage, alias le bouton « slide to unlock ». Créer un bouton de 215 x 39px sans remplissage et de 1px # CCC frontière, faites ses arrondis à 50. Dupliquez le rectangle et coupez la partie inférieure du dégradé blanc. Sélectionnez le rectangle et le dégradé, allez à la Modifier (Modify)> Combiner les chemins (Combine Paths)> Frapper (Punch).

ETAPE 8
Après cela, dupliquez une fois de plus le rectangle et déplacez-le d’1px au-dessus, applique un dégradé linéaire qui va de # 000 à # 000, avec une opacité de 24 à la partie inférieure (du dégradé). Faire une opacité de 80% pour l’ensemble du rectangle.

ETAPE 9
Pour le bouton, créer un bouton de 53 x 35px et de faire ses arrondis à 43. Appliquez un dégradé linéaire, comme indiqué. Maintenant, mettez une flèche à l’intérieur, en utilisant l’outil flèche (Arrow Tool), essayez d’appliquer la même forme qu’à l’exemple. Appliquez-lui un # 979797 dans une Ombre interne (Inner Shadow) avec les valeurs 0, 30% et 2.

ETAPE 10
Maintenant, nous allons commencer l’insertion des textes. Ici nous utilisons Helvetica, mais si vous ne l’avez pas, vous pouvez utiliser les polices Arial sans problèmes. Le texte Hour est réglé sur # FFF et d’une taille de 50. Dupliquez le calque de texte et pour celui du dessous, appliquez # 000 et déplacez-le 1px vers le haut. Cet effet rend mieux que l’ombre interne, car il maintient l’apparence naturelle de la police. Pour le texte de date, nous allons utiliser # CCC et la taille 13. Pour le débloqué « Slide to unlock » nous allons utiliser # FFF et l’opacité de 25%, taille 20.

RÉSULTAT FINAL
Pour terminer, appliquez les icônes et le nom de votre fournisseur en haut, au-dessus du rectangle de 20px du haut. Toutes les icônes que nous créerons aussi en utilisant des rectangles et seulement une ligne, se font de la même maniére! Le fichier PNG possède tout ce qui a été fait.

A propos de l’auteur
Je me prénomme Fabiano j’habite au Brésil, co-fondateur de Zee avec Fabio. Aujourd’hui, j’aime à jouer avec Fireworks, Photoshop et améliorer mes compétences en CSS. N’hésitez pas à me suivre sur Twitter.