[Photoshop] [009] Faire une interface graphique pour un site

    Partagez
    avatar
    Saray
    Taulière
    Taulière

    Messages : 1098
    Date d'inscription : 06/10/2011
    Age : 27

    [Photoshop] [009] Faire une interface graphique pour un site

    Message par Saray le Lun 31 Oct - 9:34

    Ce tutoriel est proposé et évalué par le Who's Graph.


    Réalisé par : Miettes
    Source : School of Pub

    Label décerné par le Who's Graph :
    Commentaires :
    Miettes : la suite de ce tuto est là : http://www.school-of-pub.net/t1372-tuto-html-css-faire-l-interface-graphique-de-son-site








    Bonjour les p’tits lous ^^

    Ce tuto est la première partie pour vous aider à réaliser rapidement une interface graphique de site. Ici, nous allons d’abord voir comment créer notre design avec photoshop. Vous êtes prêts ? Alors allons y ^^




    Créer une nouvelle image de dimension 1024* 768

    A] Ajout de grilles de repères

    Ceux-ci vont nous permettre d’avoir une base pour travailler.
    1/ Placer des grilles verticales à 75 et 950 px
    2/ Placer des grilles horizontales à 20, 160, 190, 718 et 748px

    Vous devriez avoir quelque chose qui ressemble à ça : (pour plus de facilité, j’ai numéroté les zones pour la suite du tutoriel)
    Spoiler:

    B] Le fond

    1/ Remplir votre calque « arrière plan » avec une couleur unie de votre choix
    Votre fond est fait.

    C]Le cadre intérieur

    1/ Sélectionner tout le bloc du centre.
    2/ Le remplir avec un dégradé de votre choix.
    3/ Ajouter un contour blanc de 1px.

    Spoiler:

    D] La bannière

    1/ Sélectionner la partie représentant la bannière.
    2/ Créer un nouveau calque appelé « bannière »
    3/ Réaliser la bannière de votre choix.

    Spoiler:

    E] Le menu de navigation

    1/ Sélectionner la partie représentant la navigation
    2/ Prendre l’outil « texte », ajouter du texte en taille 18, centré.

    Spoiler:

    F] Le contenu

    1/ Sélectionner la partie “contenu”
    2/ Prendre l’outil “texte” ajouter du texte en taille 18. Ceci sera le titre de la page
    3/ Ajouter ensuite le texte de votre page en taille 14, justifié.
    4/ Le texte est collé à la bordure du cadre. Ce n’est pas terrible. Nous allons ajouter un espace de 20 px de chaque coté de celui-ci. Pour cela, créer 2 nouveaux repères de chaque coté du texte (vertical à 104 px et 920px)

    Spoiler:

    G] Le copyright

    1/ Sélectionner la partie représentant le copyright.
    2/ Prendre l’outil « texte », ajouter du texte en taille 12, centré.

    Exemple de copyright : Contact : schoolofpub[at]yahoo.fr | Mentions légales | © School Of Pub

    Spoiler:


    Et voilà, l’interface de votre site est prête. Il ne reste plus qu’à découper chaque partie ^^.

    H] Le decoupage

    1/ Sélectionner chacune des parties et les enregistrer séparément dans un dossier appelé « images » (cela va nous servir pour le tuto de mise en page sur le net).

    Vous devez avoir 4 images :

    Spoiler:









    Il ne nous reste plus qu’à mettre ça en code pour créer nos pages.

    Crédits : Miettes de SoP

      La date/heure actuelle est Dim 19 Nov - 5:03