• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

Première étape, dans notre saga, le Webdesign sur iPad, la création de la maquette avec iDraw et Photoshop Touch.

Nous allons, dans cette première partie, réaliser la home page d'un site sur le cinéma.
Le but de cette première maquette est de nous permettre d'aborder les principales fonctionnalités de iDraw (http://www.indeeo.com/idraw/) et de Photoshop Touch (http://www.adobe.com/fr/products/photoshop-touch.html) ce qui vous permettra d'acquérir de bonnes bases.

 

1- Création du Document

A la création d'un nouveau document, vous pouvez choisir le "type" de document que vous voulez utiliser, nous choisirons "Grid".

Première étape modifier les préférences du document (icône en forme d'engrenage) afin de travailler dans les meilleurs conditions, nous allons afficher la Grille, "coller" les éléments à la grille, modifier l'unité de mesure et enfin changer les dimensions de la grille :
Preferences > Show Grid
Preferences > Snap to Grid
Preferences > Units & Rulers > pixels (px)
Preferences > Grid Settings > Spacing > X=10px y=10px

iDraw - Nouveau document

iDraw settings

2- Le Header

Après avoir renommé le premier calque (Layer 1) en "Header", nous allons dessiner avec l'outil rectangle la zone du header et le remplir avec un dégradé (Geometry > Appearance > Gradient Fill) et régler son angle à 90 afin d'obtenir un dégradé vertical.

Note : vous pouvez ajuster les coordonnées, rotation et la taille de tous vos éléments graphiques avec l'icône "Geometry" (rectangle avec les 2 abscisses).

Note : vous pouvez ajuster les couleurs, style de remplissage... de deux manières, soit par l'icône Apparence / Syles (cercle avec un i à l'interrieur) soit avec l'outil Fill (rectangle de couleur dans la barre à outils).

Note : Pour garder en mémoire votre couleur/dégradé, il suffit de cliquer dans le grand rectangle à gauche de la palette et de glisser votre couleur/dégradé vers la droite dans les petits carrés.

header

Note : Vous pouvez aussi utiliser un code RGBA pour chaque couleur, pour y accéder, il suffit d'appuyer sur le cercle à gauche de la pipette pour basculer d'affichage.

gradient

Nous allons lui ajouter un logo en le créant avec l'outil texte et en choisissant une police parmi la liste de polices disponibles (Appearance > Text). Puis on va vectoriser ce texte (Modify > Convert Text to Path), car la police choisie n'est pas une police disponible sur tous les OS et enfin on lui rajoute une base-line.

Note : Il n'existe pas pour le moment de moyen de rajouter de nouvelles polices sur l'iPad, néanmoins quelques applications le permettent mais la police ne sera utilisable que sur cette même application. iDraw le permet, par le biais de Dropbox, à partir de l'écran d'accueil avec l'icône Preferences > Manage Fonts, mais les polices ne seront donc utilisables que sur cette application.

Note : Le fait de vectoriser une police vous permet de pouvoir transformer votre texte avec les outils vectoriels habituels (plume, composition de formes...).

logo

Sur la partie droite du header nous allons y rajouter un moteur de recherche. Comme précédemment nous allons utiliser l'outil rectangle, l'outil texte et nous allons aborder la manière de gérer la transparence sur le texte (Appearance > Opacity).

search

3- Le Menu 

Après avoir créé un nouveau calque (Layers > icône +) et l'avoir renommé "navigation" nous allons utiliser l'outil rectangle et lui appliquer un dégradé et une ombre portée (Appearance > Shadow), puis saisir les différentes entrées du menu avec l'outil texte. Toujours avec l'outil rectangle nous allons tracer 3 rectangles de 1px de large et de même hauteur que la barre de menu, les 2 rectanlges les plus à l'extérieur seront blanc avec une transparence et celui du centre restera noir en 100%, puis avec l'outil Path Selection tool (outil en forme de flêche) nous allons sélectionner ces trois éléments pour créer un groupe (Arrange > Grouping > Group) formant le séparateur et le transformer en symbole réutilisable (Shape Libraries > My Shapes) et enfin nous alignerons (Arrange > Alignment), en respectant le même espace, chaque éléments (textes et séparateurs). 

menu

4 - Le Slideshow 

Après avoir créé un nouveau calque (Layers > icône +) nommé "slideshow", nous allons le faire glisser (icône avec 3 lignes horizontales) sous le calque Navigation afin de bénéficier de l'ombre portée.

layers

Nous allons utiliser Photoshop Touch pour réduire la taille de l'image (icône en forme de & > Image Size) et recadrer (icône en forme de & > Crop), avec des outils que nous connaissons bien puisque ce sont ceux de Photoshop, une image du film The Lorax à la taille exacte de notre slide show, 570 x 300px. Cette image a été téléchargée depuis internet et enregistrée en local sur l'iPad.

photoshop touch

Il ne reste plus qu'à nommer et enregistrer notre image.

Note : Nous pouvons enregistrer l'image soit en PNG soir en JPG mais nous ne pouvons pas régler le taux de compression.

enregistrer

Maintenant que notre première image est prête nous retournons sur iDraw pour l'intégrer  dans notre slideshow. Première étape dessiner un rectangle de la taille de notre image, puis nous y insérons l'image (Appearance > Image).

Note : Comme notre image est à la taille exacte il n'y a pas de différence entre la fonction Stretch to Fit et Scale to Fit.

Note : Vous pouvez aussi intégrer l'image dans notre création directement avec l'outil Photo Library.

Note : Nous aurions aussi pu ne pas utiliser Photoshop Touch si la réduction homothétique (Geometry > Aspect Ratios locked) de l'image respecté les tailles du slideshow, mais dans notre cas nous avons aussi besoin de la couper (fonction non disponible sur iDraw pour le moment).

inset image

Nous allons maintenant générer les 3 vignettes qui sont à la droite de l'image principale de notre slideshow, en utilisant à nouveau les mêmes outils de Photoshop Touch.

Puis avec iDraw nous allons dessiner un premier rectangle sur le coté droit de notre image principale et un carré et nous allons transformer ce carré en triangle (il indiquera quel vignette est affichée comme image principale) avec l'outil plume (Pen tool > P-) et le coller au rectangle avec la palette de combinaison des formes (Modify > Combine).

pathfinder

Nous pouvons maintenant dessiner les autres cellules, et leurs ajouter les vignettes (avec bordure) et les textes afin de complèter notre slideshow.

slideshow

5- Le Contenu

Après avoir créé 3 nouveaux calques nommés "Column 1, Column 2 et Column 3", nous allons créer sur chacun de ces 3 calques un header et une cellule. Sur la colonne de gauche nous aurons un header avec un dégradé différent des deux autres. Nous y ajouterons aussi les trois titres : Now playing, Categories et News.

contenu

Column 3

Dans la colonne la plus à gauche, calque "Column 3", après avoir dessiné un rectangle blanc, un autre pour la vignette et enfin, après avoir rajouté les textes, nous allons créer un rectangle à bords arrondis avec des angles de 5x (outil Rounded Rectangles > Corner Radius). Puis nous y ajouterons, avec l'outil étoile, 5 étoiles (outil Stars)que nous remplirons d'un dégradé et d'une bordure jaune.
Sélectionnez les deux dernières étoiles et changez leur opacité pour leur donner une position "off" (Appearance > Opacity).

stars

Nous allons, avec Photoshop Touch, générer ce nouveau format de vignettes et l'intégrer dans son emplacement.

Maintenant nous pouvons copier > coller en place (Editon > Copy, Edition > Paste in Place) notre bloc, après avoir sélectionné tous les éléments (Editon > Select All), puis le décaler vers le bas.

Note : Le menu Edition n'agit que sur les éléments du calque (Layer) sélectionné.

nouveau bloc

Column 2

Sélectionnez le calque nommé "Column 2", colonne qui sera une liste de liens à la iOS. Nous allons utiliser la Bibliothèque de symboles (Shape Libraries > iPhone Mockups) qui comporte tout un lot de symboles iPhone.

ios

De la même façon que nous avons "groupé" (Arrange > Grouping > Group) les éléments pour créer les symboles "séparateurs" pour la barre de navigation, nous devons "dégrouper" (Arrange > Grouping > Ungroup) celui-ci pour pouvoir l'éditer et le personnaliser à notre façon.

Note : La mise à l'échelle en 9 tranches n'est pas disponible pour le moment sur les symboles, nous devons donc le dégrouper pour pouvoir l'éditer et ajuster la taille sans le déformer.

L'édition terminée, nous pouvons à nouveau créer un symbole pour pouvoir créer facilement notre liste.

grouper degrouperColumn 1

Après avoir sélectionné le calque "column 1" nous allons créer à nouveau une liste avec images, images du même format que celui utilisé pour les miniatures du slideshow.
Cette liste sera scrollable verticalement , nous créerons donc deux flèches au bas de la liste.

column 1

6 - Le Footer

Après avoir créé un calque nommé "footer", vous dessinez un rectangle de couleur noir et nous y ajouterons le copyright à gauche et deux listes de liens sur la partie droite. Aucune difficulté pour faire cela, vous connaissez déjà tous les outils pour le réaliser. 

footer

7 - Le Background et la Toolbar

Notre maquette est presque fini, nous devons encore gérer le background de la page et rajouter un toolbar que nous avons oublié.

Nous allons donc agrandir la zone de travail à 1200px de large et 1300px de haut (Preferences > Dimensions). Sélectionnez un premier calque, par exemple le header, et sélectionner tous les éléments de celui-ci par la fonction"select all" (Edition > Select All) nous allons déplacer la selection de 50px vers la droite et de 30px vers le bas (Geometry > Properties). 30px sera la hauteur de notre toolbar. 
 

Note : Vous devez faire la même chose pour chaque calque car le menu Edition n'agit que sur les éléments du calque (Layer) sélectionné.

L'opération terminée, vous devez créer un nouveau calque que vous glisserez tout en bas de la liste des calques. Sur ce nouveau calque nous dessinons un rectangle qui prendra toute la largeur de la page et qui sera légèrement plus haut que le slideshow. 

background

Il nous reste à créer un dernier calque qui hébergera la toolbar. La réalisation de celle-ci est là encore simple, il suffit de créer un rectangle qui prend toute la largeur de la page et de 30px de haut. Vous y ajouterez, à gauche un lien vers le site et à droite un lien pour s'identifier. 

maquette

Conclusion

Notre première maquette est à présent terminée. Cette première approche nous a permis d'utiliser les principaux outils de iDraw et de Photoshop Touch, évidemment ces applications ne se limitent pas à ces fonctions qui sont bien plus nombreuses et plus puissantes.

Vous pouvez, aussi parmi les nombreux formats d'export, exporter cette création au format PDF ou SVG et l'envoyer par email ou par Dropbox vers votre PC pour pouvoir les éditer (tous les calques sont conservés et éditables) avec Illustrator et donc "peaufiner" le travail.

Ces applications ne sont pas aussi parfaites et puissantes que ceux d'une célèbre Suite CS que vous pouvez avoir sur votre ordianteur, il y a encore un esprit bidouille, on est souvant obliger d'utiliser plusieurs applications pour arriver au résultat final (nous le verrons encore plus dans la prochaine étape avec l'intégration de cette maquette), mais il ne faut pas perdre de vue que nous sommes sur des applications qui coûtent 9 euros et que nous sommes au tout début de l'utilisation de la tablette !

Le but de cet atelier n'est pas de vous démontrer que vous pouvez vous passer de votre ordinateur favoris et de ces logiciels, mais que vous pouvez, lors de vos déplacements, de vos week-end, de vos vacances.... ou tout simplement pour le plaisir, avec une simple tablette, continuer à travailler de manière efficace sur vos projets.
Perso j'aime bien l'approche "Touch/Handmade" qui donne vraiment l'impression de dessiner son interface et le fait d'utiliser ma tablette me donne une approche différente de mon travail.

Prochaine étape l'intégration sur iPad.

Retrouvez ma sélection d'applications pour le "Webdesign sur iPad"

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Thierry voir son blog

UI Designer et Directeur Artistique Senior depuis 1995...

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

8Commentaires

  • Avatar_thumb
    Webdesigner Bordeaux

    le 03/05/2012 | #1

    C'est super utile, c'est cool qu'il y ai des frameworks pour aider dans ce type de design.

  • Avatar_thumb
    Kevin Py

    le 03/05/2012 | #2

    Je suis en train de réaliser le même genre d'article pour démontrer qu'on peut créer un site de A à Z avec un iPad.

  • Avatar_thumb
    Vincent Ginet

    le 04/05/2012 | #3

    Très bel article, complet et efficace dans la présentation.
    L'intégration sur Ipad risque d'être très intéressant.
    Merci de partager votre expérience sur le Blog.

  • Avatar_thumb
    Thomas

    le 04/05/2012 | #4

    Pas mal du tout ! Qu'en est il de la précision aux doigts ? J'ai un peu peur sur ce point là... La souris permet d'être vraiment précis. Sinon, j'aurais bien aimé une partie "croquis" pour montrer les possibilités d'adobe Proto...

  • Avatar_thumb
    Fabien Grenet

    le 04/05/2012 | #5

    Merci pour cette belle démonstration ! Contrairement à ce que beaucoup de personnes pensent, l'iPad est un excellent outil de création et de productivité pour peu que l'on sache choisir les Apps adéquates. A titre d'exemple j'utilise au quotidien dans mes missions l'iPad comme outil de maquettage de site web ou d'Apps, épaulé par des Apps comme iMockups ou AppCooker (http://haikusages.fr/2012/04/19/prototypage-ipad-iphone-ayez-le-reflexe-appcooker/). Content de voir que des graphistes s'y mettent aussi car je trouve que le fait de travailler directement sur un interface tactile, avec ses petites mains, pour dessiner l'interface est un plus car (bien que je n'ai pas d'étude sous la main pour le démontrer) je suis persuadé que cognitivement nous sommes plus en contact avec la maquette qu'en la manipulant via une souris (un peu ce que tu semblais sous entendre Thierry) D'ailleurs, je n'utilise aucun outil PC/Mac pour le maquettage web & mobile, uniquement l'iPad, mais il est vrai que les graphistes qui travaillent à partir de mes Mockups le font eux sur Photoshop / inDesign. Après il est vrai qu'en terme de temps, il est parfois plus rapide de travailler sur PC/Mac, mais dans mon cas de figure le gain de temps ne serait pas faramineux.

  • Avatar_thumb
    Thierry TEYSSIER

    le 04/05/2012 | #6

    Merci pour vos comms.

    @Thomas : comme nous sommes sur des outils qui fonctionnent sur du vectoriel, il est très facile de zoomer tout en gardant une qualité optimale et donc d'ajuster facilement la position des éléments, même si pour un graphiste web on a l'habitude d'utiliser plus volontiers le panel des Properties.
    Si en plus vous utilisez un stylet c'est d'autant plus simple et précis.

    @Fabien : oui le travail au doigt donne une autre dimension au webdesign, dimension qui n’existait pas pour le moment avec la souris, on retrouve des réflexes de dessin et je pense que du coup le résultat peut être différent...

  • Avatar_thumb
    Bruno Aeronyde

    le 23/10/2012 | #7

    Vraiment bien cet article.

    A quand l’intégration complète sur Ipad ? :)

    • Avatar_thumb
      Yorick

      le 09/05/2013 | #8

      l'iPad est effectivement un outil à redécouvrir sans cesse. Son usage "fun" me fait souvent supposer à tort que c'est un outil pauvre pour la création. Sur le sujet de la création de sites sur un iPad, et probablement pour les plus feignants d'entre nous, ou peut-être pour que nos clients puissent mettre à jour leur site eux-même, vous devriez jeter un œil sur SimpleDifferent. Un CMS "pour les nuls" qui produit des sites simples et très clairs, bien adaptés disons à la création rapide d'un site de présentation d'une SME. Il y a une version gratuite déjà utilisable. https://itunes.apple.com/fr/app/id560089880? J'ai aussi essayé le logiciel de HTML Egg, toujours sur l'iPad, qui lui est payant. Un logiciel plus complexe qui se veut beaucoup plus proche de l'expérience du web designer ... Je l'ai trouvé finalement particulièrement contre productif. Un bel effort de la part de ses créateurs ... Une App intéressante que l'on ne devrait peut-être pas avoir à payer pour finalement ne l'avoir que testée. http://itunes.apple.com/us/app/html-egg-web-page-creator/id446992850?ls=1&mt=8 http://itunes.apple.com/us/app/id446992850? Yo

    Ecrire un commentaire

    captcha

    Ouvrir