Skyrock.com
  • ACCUEIL
  • BLOGS
  • PROFILS
  • CHAT
  • Apps
  • Musique
  • Sources
  • Vidéos
  • Cadeaux
  • Connecte-toi
  • Crée ton blog

  • Blog

Design Is Fun

Photo de Graphee

Graphee

Description :

79 tutoriels pour Photofiltre (principalement) pour vous aider dans vos créations d'images !

Bonne visite !


MERCI DE ME CRÉDITER
SI TU UTILISES L'UN DE
MES TUTORIELS SUR
TON BLOG :)

Blog optimisé pour Google Chrome.

  • Envoyer un message
  • Offrir un cadeau
  • Suivre
  • Bloquer

Design by Graphee

Signaler un abus

Infos

  • Création : 04/01/2012 à 10:39
  • Mise à jour : 08/03/2022 à 14:49
  • 86 861 visites
  • 45 visites ce mois
  • 86 articles
  • 5 661 commentaires
  • 1 848 amis
  • 9 629 kiffs

Ses fans (1 920)

  • ShinzoIcons
  • kwestsource
  • R0SALIA
  • ColoriagesDisney
  • JJjtm34
  • OuterBanks
  • leschevaliersvesperaux2
  • SpecialWinx
  • Potterwatch

» Suite

Abonne-toi à mon blog ! (55 abonnés)

RSS

Retour au blog de Graphee

Réaliser des vignettes carrées pour y placer des avatars

Réaliser des vignettes carrées pour y placer des avatars
 
 
► Réaliser des vignettes carrées pour y placer des avatars ◄
 
Catégorie : Webdesign             Logiciel : Photofiltre            Difficulté : Moyen            Temps : 10 minutes
 
 
De la même manière que les les cadres autour des avatars de ma Newsletter, ce tutoriel te permettra de créer des contours simples pour y placer des avatars ou des photos.
 
Le tutoriel est un peu long car adaptable à toutes les tailles et nombres de vignettes, j'espère qu'il est assez précis et compréhensible, n'hésite pas à me demander de l'aide si tu rencontre un problème :)
 
 
  1 - Ouvre Photofiltre 6 puis va dans Fichier / Nouveau pour ouvrir une nouvelle page. Celle-ci te permettra de construire 1 seul emplacement pour 1 seul avatar, que l'on dupliquera ensuite pour arriver au nombre de ton choix (ici : 4 avatars par ligne).
 
     • Pour la Largeur, prends la largeur de ta page (ici : 600 pixels) et divise-la par le nombre d'avatars que tu voudras placer dans une ligne (ici : 600÷4=150). Si le résultat de ta division est un nombre à virgule, arrondis le un chiffre supérieur ou inférieur, peu importe, ce décalage sera réglé dans la dernière étape.
     • Pour la Hauteur, mets la même valeur que pour la Hauteur.
     • Si ce n'est pas déjà fait, choisis la couleur blanche pour le fond et clique sur Ok.
 
  2 - Dans la colonne tout à droite du logiciel, clique sur l'Outil Sélection puis sur l'icône Rectangle, un peu en dessous. Dessine une forme carrée sur ta petite page en maintenant la touche Shift (ou maj) enfoncée. Celle-ci représentera le tour extérieur du cadre pour les vignettes. Choisis une taille harmonieuse, selon tes goûts. (Par exemple, si les dimensions affichées sont L:79 et H:80, on peut choisir de mettre L:60 et H:60)
  3 - Va dans Sélection / Paramétrage manuel... Il se peut que ta sélection ne soit pas tout à fait carrées (un défaut de Photofiltre) : rétablie la situation en mettant la même dimension à la Hauteur et la Largeur. Dans la section "Position", en haut de la boîte "Paramétrage manuel", coche la case Automatique puis la case centrale. Clique sur Ok.
 
Voilà ce que ça donne pour moi (tes dimensions sont sûrement différentes) :
 
Réaliser des vignettes carrées pour y placer des avatars
 
  4 - Va dans Filtre / Couleur / Filtre coloré puis mets la couleur Noire à 100% et clique sur Ok.
  5 - Fais le raccourci clavier Ctrl+D pour masquer la sélection puis appuie 2 fois sur le bouton Flou Réaliser des vignettes carrées pour y placer des avatars et 13 fois sur le bouton Contraste (+) Réaliser des vignettes carrées pour y placer des avatars.
 
---------------------------------------------------------------------------------------------------------------
 
  6 - Fais le raccourci clavier Ctrl+U pour dupliquer ton image.
  7 - Va sur l'une des deux copies puis fais le raccourci Ctrl+C et mets la couleur blanche à l'avant sélecteur de couleurs.
  8 - Appuie 3 fois sur le bouton Flou Réaliser des vignettes carrées pour y placer des avatars puis va dans Filtre / Couleur / Filtre coloré, choisis la couleur Blanche à 70% et clique sur Ok.
  9 - Va dans Edition / Collage spécial / Masque. Valide le collage en appuyant que la touche Entrée.
 
Voilà les images que tu dois posséder à la fin de cette étape (tailles changeantes) :
 
Réaliser des vignettes carrées pour y placer des avatars
 
10 - Retourne sur le carré noir (image de droite ci-dessus), fais le raccourci clavier Ctrl+U pour le dupliquer et appuie 3 fois sur le bouton Flou Réaliser des vignettes carrées pour y placer des avatars, 13 fois sur le bouton Correction Gamma (+) Réaliser des vignettes carrées pour y placer des avatars et 10 fois sur le bouton Contraste (+) Réaliser des vignettes carrées pour y placer des avatars.
11 - Fais le raccourci Ctrl+C pour copier cette image puis mets la couleur Noire à l'avant du sélecteur de couleurs. Va sur l'ombre (image de gauche ci-dessus) et va dans Edition / Collage spécial / Masque. Valide le collage en appuyant que la touche Entrée.
 
Voilà les images que tu dois posséder à la fin de cette étape (tailles changeantes) :
 
Réaliser des vignettes carrées pour y placer des avatars
 
12 - Tu possède maintenant trois images : tu peux fermer les deux images de droite sans les sauvegarder.
 
13 - Fais le raccourci Ctrl+C pour copier l'image que tu as gardée (celle de droite ci-dessus). Souviens-toi du nombre d'avatars que tu avais prévus à l'étape 1 du tutoriel et répète l'étape 14 au tant de fois que nécessaire pour arriver à ce nombre (ici : 4) :

     14 - Va dans Edition / Collage spécial / Assembler le collage, coche la case Droite et clique sur Ok.
 
15 - Appuie sur la touche L de ton clavier pour prendre l'Outil Baguette magique et mets la Tolérance à 0. Clique dans le fond blanc de tes vignettes, fais Ctrl+I pour inverser la sélection.
16 - Fais un clic-droit sur la sélection puis dans "Forme", remplace "Bitmap" par "Rectangle" et clique sur Ok. Fais encore un clic-droit sur la sélection et choisis Recadrer.
17 - Va dans Image / Taille de la zone de travail puis souviens-toi de la Largeur de la page sur laquelle tu veux mettre tes vignettes (ici : 600 pixels) et mets cette valeur dans la case "Largeur" puis clique sur Ok.
 
---------------------------------------------------------------------------------------------------------------
 
18 - Tu as maintenant à ta disposition une ligne avec le nombre de cadres que tu souhaitais. Pour ajouter des images dans ces cadres, suis les étapes suivantes :
 
19 - Appuie sur la touche L de ton clavier pour reprendre l'Outil Baguette magique et mets la Tolérance à 0. La case Couleur ne doit pas être cochée. Clique dans une zone noire de l'une des vignettes, une sélection apparaît : regarde et retiens la valeur de la Largeur de cette sélection, affichée dans la barre en bas de ton écran :
 
Réaliser des vignettes carrées pour y placer des avatars
 
20 - Appuie sur la touche I de ton clavier.
21 - Ouvre ensuite la première image que tu veux mettre dans l'un des cadres (Fichier / Ouvrir) ou bien copie ton image (Clic-droit / Copier) et va dans Photofiltre et dans Edition / Coller en tant qu'image.
22 - Fais un Clic-droit dessus / Taille de l'image... et regarde quelle valeur est la plus petite entre la Largeur et la Hauteur. Remplace cette plus petite valeur par la valeur que tu as retenue à l'étape 19, l'autre doit se modifier automatiquement pour ne pas déformer ton image. Si ton image est carrée, remplace l'une des valeurs (Hauteur ou Largeur), l'autre suivra. Clique sur Ok.
23 - Fais Ctrl+C pour copier ton image.
24 - Retourne sur ta ligne de vignettes, appuie sur la touche L de ton clavier pour reprendre l'Outil Baguette magique et clique sur la zone noire de l'une des vignettes, une sélection apparaît. Fais un Clic-droit sur cette sélection / Coller dedans et valide en appuyant sur la touche Entrée.
 
25 - Recommence les étapes 20 à 24 autant de fois que nécessaire avec d'autres images pour remplir les cases noires.
 
 
Voilà ! C'est fini !
Tu peux maintenant enregistrer ton image en allant dans Fichier / Enregistrer sous.
Choisis le format .png si tu ne veux pas que tes images perdent de leur qualité.
 
N'hésite pas à me poser des questions si tu ne comprends pas une partie de ce tutoriel.
Signale moi si il y a une erreur dans le tutoriel.
 
 

Crédits images :
https://www.flickr.com/photos/nicokaiser/
http://pixabay.com/fr/bruant-oiseau-brown-ciel-mouche-73312/
https://www.flickr.com/photos/phalinn/
https://www.flickr.com/photos/afrotonomy/
© Je me réserve tous les droits sur cette astuce, le plagiat n'est bien évidemment pas toléré.
Vous pouvez tout de même utiliser cette astuce pour une image de votre site/blog.
 
​ 69 | 28
Commenter

#Posté le samedi 26 avril 2014 11:50

Modifié le dimanche 07 juin 2015 06:12

  • Commentaires
  • Kiffs

Plus d'informationsN'oublie pas que les propos injurieux, racistes, etc. sont interdits par les conditions générales d'utilisation de Skyrock et que tu peux être identifié par ton adresse internet (3.238.180.255) si quelqu'un porte plainte.

Connecte-toi

HappyiCream, Posté le dimanche 13 novembre 2016 13:56

le seul blog qui tient la route sur le graphisme, sincèrement, merci.


HoranCleaner, Posté le samedi 06 juin 2015 16:18

Comment ça se fait que le bouton "Collage Spécial" dans Edition de l'étape 9 ne marche pas ? Je peux pas appuyer dessus :/


Graphee, Posté le vendredi 03 avril 2015 13:13

Visiteur a écrit : ""© Je me réserve tous les droits sur cette astuce, le plagiat n'est bien évidemment pas toléré."

Sérieusement ? Le truc qui date ! --'
Graphique-astuce et design-touch ont déjà fait ce tuto !
Arrête de croire que t'as inventé l'eau chaude sérieux !
"

Encore une fois, mon tutoriel contrairement à ceux de Graphique-astuce et design-touch est beaucoup plus détaillé et permet de créer ces vignettes de A à Z, pas à l'aide d'un simple cadre dans lequel on met ses images... (Et il faut arrêter avec cette expression sur l'eau chaude, je me doute bien que je n'ai pas inventé le principe des vignettes...)


Visiteur, Posté le jeudi 02 avril 2015 20:10

"© Je me réserve tous les droits sur cette astuce, le plagiat n'est bien évidemment pas toléré."

Sérieusement ? Le truc qui date ! --'
Graphique-astuce et design-touch ont déjà fait ce tuto !
Arrête de croire que t'as inventé l'eau chaude sérieux !


sweetyZAYN, Posté le vendredi 31 octobre 2014 17:20

je voudrais en mettre 5


sweetyZAYN, Posté le vendredi 31 octobre 2014 17:08

je suis nul mdr et je ne trouve pas comment on fait pour diviser la largeur par le nombre :c


Usuall, Posté le dimanche 24 août 2014 12:18

D'accord, parce que je voudrais m'en servir d'Avatar, mais avec un fond transparent. Et j'y arrive pas. :(


Usuall, Posté le dimanche 24 août 2014 05:29

Est ce qu'on peut le faire avec Photofiltre 7 ?


EthylicComa, Posté le jeudi 03 juillet 2014 07:41

Merci pour ton tuto, c'est super beau! :)


LeRendez-VousDesFilles, Posté le mardi 01 juillet 2014 17:39

Je sais faire ça avec Photoscape aussi :)


LB-Nailart, Posté le dimanche 08 juin 2014 13:52

Yes !! J'ai aussi réussi mais je l'ai fait la forme ronde !
http://www.skyrock.com/m/blog/preview.php?id=3105979201 :D
Grâce à toi que mon blog devient jolie parce que ça fait un moment que j'en voulais et je n'ai jamais réussi à cause le contour pourri .. lol


ACENARU, Posté le samedi 31 mai 2014 04:23

Je savais déjà le faire, mais ton article l'explique bien aussi. c:


Vernis-NailArt, Posté le jeudi 22 mai 2014 15:37

Je voudrais faire plutot pour les magazine (mode...) que des faire part etc


Vernis-NailArt, Posté le jeudi 22 mai 2014 15:36

Bac S :)
> Moi bac pro industire graphique (photoshop, impression...)


Vernis-NailArt, Posté le jeudi 22 mai 2014 15:33

Sinon tu veux faire quoi comme bac ?


Vernis-NailArt, Posté le jeudi 22 mai 2014 15:32

Je n'ai pas encore essayer je n'ai pas trop le temps en ce moment, j'essayerai le prochain week end (pas celui qui arrive l'autre).


Onglams, Posté le samedi 17 mai 2014 09:46

Ok merci !^^
Je pense que si j'avais réfléchis j'aurais trouver! (Est ce que cette phrase est française ;)??) Mercii


Onglams, Posté le samedi 17 mai 2014 06:33

Salut!
Petite question : comment on fais pour faire un texte en dégradé de couleur ?


Magic-Maria430, Posté le samedi 17 mai 2014 04:31

Super ! Un peu compliqué mais j'y suis arrivée :)


Vernis-NailArt, Posté le vendredi 16 mai 2014 13:12

Tu as enlever l'article du concours.


  • 1
  • 2
  • Suivant

RSS

Article précédent

Article suivant

Skyrock.com
Découvrir
  • Skyrock

    • Publicité
    • Jobs
    • Contact
    • Sources
    • Poster sur mon blog
    • Développeurs
    • Signaler un abus
  • Infos

    • Ici T Libre
    • Sécurité
    • Conditions
    • Politique de confidentialité
    • Gestion de la publicité
    • Aide
    • En chiffres
  • Apps

    • Skyrock.com
    • Skyrock FM
    • Smax
  • Autres sites

    • Skyrock.fm
    • Tasanté
    • Zipalo
  • Blogs

    • L'équipe Skyrock
    • Music
    • Ciné
    • Sport
  • Versions

    • International (english)
    • France
    • Site mobile