Jump to content

Search the Community

Showing results for tags 'Photoshop : Etape par étape'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Accueil
    • Annonces de Webmaster Hub
    • Webmaster Hub se présente
    • Les nouveaux membres se présentent
    • Revues de presse
    • Le salon de Webmaster Hub
    • La tribune de Webmaster Hub
  • Publications et Redirections
    • Référencement et Publicité
    • Droit, Finances et Administration
    • Les techniques de l'Internet
    • Noms de domaines et hébergement
    • La tribune du Hub
  • Création et exploitation de Sites Internet
    • Les langages du Net
    • Les fondations d'un site
    • Accessibilité et Ergonomie Web
    • E-commerce
    • Administration & Droit
    • Systèmes de publication
  • Promotion de Sites Internet
    • Techniques de Référencement
    • Techniques de Promotion
  • Informatique & Internet
    • PC-Gyver
    • Les Navigateurs
  • Les services de Webmaster Hub
    • Infogérance serveurs dédiés
    • Partenariat et échanges de liens
    • Offres et demandes de prestations de service

Blogs

  • Dan's Blog
  • Blog de Webadev
  • Toulouzheing
  • Phoblog
  • boutiques
  • KaRaK
  • Nicolas Blog
  • Americas - Info
  • Spidetra Blog
  • Rat de bibliothèque
  • Une bonne blog... de Bourinho
  • Blog e-Business et Emarketing
  • La piscine
  • Vincent
  • Blog de Georges
  • Dessiner le web
  • Web shopping
  • Toulouse
  • Webmarketing, what else ?
  • SpeedAirMan's blog
  • Le Blog de Dadou
  • illustration et delires graphiques d'un infographiste...
  • paolo
  • CQJD News
  • magie

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Skype


Localisation


Société

Found 3 results

  1. Prochainement : Créer un bandeau hightech sous Photoshop CS2 Un bandeau qui sera util pour les communautés online, les concepteurs de logiciels, les sites de musiques electroniques, et d'autres
  2. Créer un menu style Apple sous Photoshop CS2 Niveau de difficulté 2 Pour ce premier Etape par étape, je vais créer un menu à onglets comme celui qui se trouve sur le site de Apple. Pourquoi celui là ? Parce que Apple joue un grand rôle dans le design informatique depuis 20 ans et il a aussi beaucoup influencé le graphisme des sites internet actuels. Un menu sert à naviguer sur un site web, il doit donc être très bien travaillé graphiquement, il ne faut surtout pas que l'internaute se fâche avec le premier médium qui va le relier au site internet. Le menu est un élément qui va vous accompagner tout au long de votre visite sur le site, si il est raté c'est un peu comme si vous étiez accueilli dans un avion par une hôtesse qui ressemblerait à Tatie Danielle, ça ne donne pas trop envie de prendre ce vol, non ? Pour commencer, ouvrez Photoshop CS2, ouvrez un nouveau document Ctrl + N. Dans la fenêtre Nouveau, remplissez dans l'ordre : Nom : Menu style Apple Résolution : 72 pixels/pouce Largeur : 700 pixels Hauteur : 100 pixels Mode colorimétrique : RVB 8bits Contenu de l'arrière plan : Transparent Cliquez sur le bouton OK, votre nouveau document s'ouvre. Quittez toutes les fenêtres sauf la fenêtre Calques et la Barre d'outils. Renommez le Calque 1 par Bg et remplissez le de gris clair avec l'outil Pot de peinture activé G puis Maj + G. 1/ Je dessine le fond du premier bouton Je crée un nouveau calque (au passage, j'apprends à ne pas perdre de temps pour créer un nouveau calque et le nommer), je le nomme tout de suite Btn. Je clique dessus dans la palette des calques pour le sélectionner et travailler uniquement sur ce calque. J'active l'outil Rectangle U et je sélectionne le Rectangle arrondi : Rayon : 4px Mode : Normal Opacité : 100% Lissage : cochée Je choisis comme couleur le blanc (hexa : FFFFFF) et je fais un cliquer-glisser sur ma zone de travail pour créer le fond de mon bouton comme sur la première image du screenshot. Ensuite, je vais enlever les coin arrondi en bas de mon bouton. Pour cela je vais activer l'outil Sélection rectangulaire M : Contour progressif : 0 px Style : Normal Et je vais sélectionner la partie inférieure de mon bouton et appuyer sur la touche Suppr pour la supprimer. Pour ajouter un contour gris foncé, en bas de la fenêtre des calques, je clique sur l'icône Ajouter un style de claque avec un petit F et un cercle noir comme fond et enfin je clique sur Contour. Dans la fenêtre des styles de calque qui est apparue remplissez : Taille : 1px Position : Extérieure Mode de fusion : Normal Opacité : 100% Type de remplissage : Couleur Couleur : 717171 Je clique sur le bouton OK pour valider le style de calque contour. Voici ce que ça donne du côté de la palette des calques : J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. 2/ J'ajoute les effets au fond de mon bouton J'ai un onglet blanc avec un contour gris foncé. Je peux m'arrêter là pour rester très simple, mais je souhaite rendre ce menu un peu agréable visuellement, je vais lui ajouter quelques effets sans en abuser pour lui donner un peu de relief et une matière "glossy". Je crée un nouveau calque Ctrl + Maj + N que je nomme Dégradé. Je vais l'attribuer au calque Btn (Comment attribuer un calque à un autre). Le calque Dégradé est sélectionné pour travailler uniquement sur ce calque. J'active l'outil Dégradé G Couleur : noir/blanc OU noir/transparent Dégradé : Linéaire Mode : Normal Opacité : 100% Inverser : non cochée Simuler : cochée Transparence : cochée Je trace mon dégradé en faisant un cliquer-glisser de haut en bas en maintenant la touche Maj appuyée pour que mon dégradé soit parfaitement vertical. J'essaie que ça ressemble au screenshots (le dégradé est plus foncé chez vous, c'est normal on modifiera son opacité tout à l'heure). Maintenant, je me la joue subtile ! En effet, je vais sélectionner à l'aide de l'outil Sélection rectangulaire M la première bande de 1 pixel de hauteur supérieur de mon dégradé. Pour m'aider j'utilise l'outil Zoom Ctrl + +. Une fois sélectionnée, j'appuie sur Suppr pour supprimer cette petite bande de pixels rebelles Pour revenir en taille réelle : Ctrl + Alt + 0 ! J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. Je vais à cette étape ajouter la touche "glossy" à mon onglet. Pour cela rien de plus simple. Je crée un nouveau calque Ctrl + Maj + N que je nomme Glossy. Je vais l'attribuer au calque Btn (Comment attribuer un calque à un autre). Le calque Glossy est sélectionné pour travailler uniquement sur ce calque. J'active l'outil Rectangle U et je sélectionne le Rectangle arrondi : Rayon : 3px Mode : Normal Opacité : 100% Lissage : cochée Je choisis comme couleur le blanc (hexa : FFFFFF) et je fais un cliquer-glisser sur ma zone de travail pour créer la touche "glossy" de mon bouton comme sur la deuxième image du screenshot. La largeur est volontairement un peu plus petite que le fond de mon bouton pour laisser apparaître 1 pixel de fond dégradé à la droite et à la gauche de mon effet "glossy", ça donne un effet de profondeur au bouton plus réaliste. Voici ce qui se passe au niveau de la palette des calques. J'ai modifié l'opacité du calque Dégradé à 35% et celle du calque Glossy à 90%. J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. La plus grosse partie du travail est faite 3/ Je nomme mon bouton, je le groupe et je le duplique Le calque Glossy est sélectionné. J'active l'outil Texte T et je clique sur ma zone de travail, je tape le texte de mon bouton. A titre d'exemple pour les paramètres du texte : Police de caractère : Myriad Style : Roman ou Regular Taille : 15 pt Anti aliasing : Précis Alignement : fer à gauche Couleur : noir (hexa : 000000) J'appuie sur la touche Entrée au centre de mon clavier et non celle de droite pour valider mon texte. Un calque de texte s'est créé dans la palette des calques. Je peux bien replacer mon texte avec l'outil Déplacement V. Je vais mettre une opacité de 60% à mon calque de texte et je valide avec la touche Entrée. Maintenant, je vais mettre tous les calques qui constituent mon bouton dans un groupe. Pour cela, ça se passe comme dans un dossier windows pour la sélection des calques dans la palette des calques. Je clique sur le calque Btn j'appuie sur la touche Maj et tout en la maintenant enfoncée, je clique sur le calque de texte. Mes calques sont sélectionné j'appuie sur Ctrl + G pour les grouper et je nomme ce groupe Bouton 1. Pour ajouter des boutons à mon menu, il me suffit de dupliquer ce groupe bouton1 autant de fois que je le désire. Pour le faire, je clique sur le groupe bouton1 dans la palette des calques en maintenant la touche Alt enfoncée et je glisse le groupe entre le groupe bouton1 d'origine et le calque Bg, je relâche le clique de ma souris, le groupe est dupliqué, il se nomme automatiquement bouton1 copie. Vous pouvez très bien le renommer bouton2 ou bouton contact, c'est suivant votre choix de méthode d'organisation (S'organiser et gagner en efficacité). J'enregistre Ctrl + S régulièrement pour ne pas tout perdre si photoshop plante. 3/ Je vous laisse finir En effet, vous disposez maintenant de tous les éléments pour finir ce menu seul, je vous mets quelques screenshots d'indication pour vous guider un peu. Si vous souhaitez mettre un texte plus grand qui ne rentre pas dans votre onglet, je vous conseille la lecture de ce billet sur la duplication. Si vous avez un souci ou une idée à propos de cet Etape par étape, postez un commentaire avec si possible votre image que vous pouvez héberger gratuitement sur hiboox comme je le fais dans mon hublog N'hésitez surtout pas à poster aussi vos réalisations !
  3. Prochainement : Créer un menu style Apple sous Photoshop CS2 Etape par étape : Créer un menu style Apple est disponible
×
×
  • Create New...