God Templates  : Outils pour webmasters Découvrez nos promos packs à partir de 3,6 euros
Accueil | Tutoriels | Annuaire | Astuces Google | Outils pour webmasters | Topsite | Définitions Web | Kit web à 5€
Ressources - webmasters
  Kits par catégories
  osCommerce
  Css template
  Kit graphique Flash
  Kit graphique design
  Kit de Jeux-vidéo
  Site Flash dynamique
  Site avec entête Flash
  Logo kit graphique
  Logo set
  Identité d'entreprise
  Thèmes Php-Nuke
  Intro en Flash
  Entête + intro Flash
  Promo Packs
  360 kits à 5 €
  128 kits à 4 €
  60 kits à 1.80 €
  Kit bas budget
  Zero-download
  Autres devises
Ressources pour webmaster
 Référencement et trucs et astuces pour Google Outils Astuces Google
 Webmaster en vidéo Vidéos Webmasters
 Comment créer un site Internet attractif ! Comment créer un site
  Affiliation 20%
  Les 10 stratégies...
  Outils webmaster
  Définitions (dico)
 Les tutoriels Les tutoriels Tutoriels PhotoshopTutoriels GimpTutoriels tutoriaux tuto sodipodi
  Annuaire Généraliste
  Ressource webmaster
  Création bannières Actualité outils de recherche & référencement
  Où se référencer ?
  Clipart gratuit
  Générateur MétaTags
  Webmasters news
  Kit graphique gratuit
 Charte graphique gratuit Charte graphique
 Cartes virtuelles en Flash Carte virtuelle Flash

Partenaires, échange de liens automatique

  Echantillons gratuits
 template templates Kit graphique pro
  Ressources gratuites
  Internet Services
  Freegaia

  Active Art Animations
  Création de site
  Topsite
  Partenaires 2 3 4 5 6
Kit graphique du jour
 FAQ F-A-Q
  Rechercher
  Faire un lien
 
  Dans vos favoris
  Plan du site
  Sitemap XML
 Formulaire de contact - contactez-nous Contact
Des dizaines de kits graphiques de qualité pour votre site, classés par catégories.

Un effet de loupe sur une image

éditorial L'objectif de ce tutoriel est de créer une loupe qui permet de voir une partie de l'image en 100% alors que le reste est en 50%, en arrière-plan. Il faut pour se faire, une image de base qui servira à etre "loopée" et un fichier image vierge .

Voici exactement ce à quoi nous voulons arriver :....

Résultat final


Première étape

à la une Commençons par créer une nouvelle image : menu fichier > nouveau (CTRL+N). Le panneau suivant apparait. Donnez les memes spécifications que sur l'exemple.

Par défaut, l'image est en 256*256 et en 72dpi. Vous pouvez bien évidemment modifier ces paramètres si vous le souhaitez

Créer une nouvelle image

à la une L'image crée se présente avec un calque d'arrière-plan par défaut, en

mode normal et sans-titre. Créez un nouveau calque en cliquant avec le bouton droit dans la palette calque. Par défaut, celui-ci va se nommer "nouveau calque". Renommez le en cliquant deux fois dessus.

Renommez-le en "fond blanc" en cliquant deux fois sur le calque dans la palette

Nota : si le panneau calques n'apparaissait pas par défaut, faites un clic droit dans l'image > calques > calques, canaux & chemins

Edition des attributs de calque

à la une Créez ainsi 3 autres calques et attribuez leur les noms suivants (cela permettra de mieux nous repérer ...),

Création de 3 autres calques

Deuxième étape

à la une Sélectionnez le calque "ombre noire". Puis, à l'aide de l'outil sélection arrondie, tracez un rond en maintenant la touche SHIFT enfoncée de manière à ce qu'il ne soit pas déformée. A l'aide de l'outil pot de peinture (remplissage), remplissez la sélection de noir.

remplir la sélection de noir

à la une Tout en ne déselectionnant pas, passez sur le calque "fond blanc" et remplissez la sélection de blanc. Toujours avec la sélection active, passez sur le calque "contour loupe". Remplissez la sélection de noir. Faites un clic droit dans la sélection et rechercher le menu "réduire" (la sélection)

Réduire la sélection

à la une Entrez les paramètres suivants dans la boite de dialogue qui s'affiche puis validez. A l'ecran, la sélection est diminuée vers le centre de la boule noire.

réduire la sélection

à la une Nous allons supprimer la partie interne de manière à avoir un contour pour la loupe. Cherchez le menu édition > Effacer ou bien CTRL+K

édition et effacement

Troisième étape

à la une Donnons un léger effet de lumière blanche au contour. Pour cela, toujours en étant sur le calque "contour loupe", activez l'outil dégradé et cliquez deux fois dessus. Vérifiez bien les paramètres de couleurs (le blanc doit etre votre couleur de premier plan) ainsi que l'option mélange ( PP vers transparent = dégradé couleurs premier plan vers transparent) comme ceci :

Option de l'outil dégradé

Tracez votre dégradé comme suit :

Tracé du dégradé

Quatrième étape

à la une Allez sur le calque "ombre noire fond". Nous allons lui appliquer un flou de manière à simuler une ombre. Cliquez droit dans l'image puis chercher le menu Filtres > Flou > Flou. Appliquez lui les paramètres suivants :

Appliquer un effet de blur

Décalez légèrement ce calque vers la droite et le bas puis diminuez son opacité pour avoir le rendu suivant.

Appliquer une distorsion

à la une Ouvrez l'image dont vous souhaitez vous servir pour le zoom. Il s'agit là d'une image qui représente un appareil photographique, en grande résolution. Je souhaite juste montrer le bout de la focale. Mais comment faire pour une image d'une telle taille ?

Simple. Faites un clic droit sur cette image > edition > copier Allez sur l'image où se trouvent les calques de la loupe et faites > clic droit > coller. L'appareil photo est importé. Toutefois, vous remarquerez qu'il n'est pas en calque mais en sélection flottante. Cliquez deux fois sur le claque "sélection flottante" pour le transformer en calque..

Ouverture de l'image de fond

à la une Faites glisser ce calque dans la palette des calques jusqu'à ce qu'il se trouve à l'endroit désiré (pour faire glisser un calque vous avez soit les flèches en bas de la palette des calques, soit un clic droit et menu calques soit avec la souris par glisser/déposer) Disposez le au dessus du calque "fond blanc" comme ci-dessous

Faire glisser le calque

à la une Si besoin, activer l'outil déplacement dans la palette des calques et positionnez correctement l'image de l'appareil photo dans le rond représentant la loupe (suivant la partie que vous désirez "zoomer")..

L'outil déplacement

Cinquième étape

à la une Il s'agit maintenant de découper ce qui dépasse du rond. Pour cela, allez sur le calque "fond blanc" et faites CTRL+A La forme est sélectionnée, revenez sur le calque contenant la photo et faites clic droit > sélection > inverser. Un petit CTRL+K (effacer) s'impose désormais ;)

Découpe du surplus de l'image

à la une Vous allez me dire : oui, mais ça fait pas loupe ça ! Certes. Un simple petit reflet va tout changer.... Allez sur le calque "reflet blanc" et tracer un cercle plus petit que le cercle délimitant la loupe ... Activez l'outil dégradé et cliquez deux fois dessus. Vérifiez bien les paramètres de couleurs (le blanc doit etre votre couleur de premier plan) ainsi que l'option mélange ( PP vers transparent = dégradé couleurs premier plan vers transparent) comme ceci :

Option de l'outil dégradé

à la une Choisissez la couleurs noire comme couleur de premier plan, puis, en utilisant l'outil "pot de peinture", remplissez la forme visible à l'écran de noir.

Créer le rond noir

appliquer un dégradé

appliquer un dégradé

à la une Tant que nous y sommes, appliquons lui un léger flou (blur) de manière à rendre l'illusion d'optique encore plus vraie. Pour cela, clic droit sur l'image > Filtres > Flou > Flou Appliquez lui un flou de 50 puis validez.

Créer le rond noir

Sixième étape

à la une Dernière étape : mettre l'image originale de l'appareil photo en fond, mais en taille réduite afin que l'effet de loupe soit complet. Pour cela, allez sur votre image de départ de l'appareil puis sélectionnez l'outil "redimmensionnement". Diminuez la taille de votre image d'à peu près 50%.

Diminution de la taille de l'image de fond

à la une Importez ensuite cette image où se trouve votre loupe. Pour cela, faites un clic droit sur cette image > edition > copier. Allez sur l'image où se trouvent les calques de la loupe et faites > clic droit > coller. L'appareil photo est importé. Toutefois, vous remarquerez qu'il n'est pas en calque mais en "sélection flottante" Cliquez deux fois sur le claque "sélection flottante" pour le transformer en calque.

Septième étape

à la une Voilà. Il ne reste plus qu'à positionner l'image de fond de manière à rendre l'image finale attrayante ... Vous devriez donc vous trouvez avec quelque chose qui ressemble à peu près à ça .

Résultat final

Source : Kloobik

 

© GodTemplates 2003-2007. Tous droits réservés.