Tutoriel : En mettant l'accent sur quelque chose avec feux d'artifice

  • joebert
  • Sledgehammer
  • Genius
  • No Avatar
  • Inscription: Fév 10, 2004
  • Messages: 13455
  • Loc: Florida
  • Status: Offline

Message Mai 4th, 2009, 7:12 am

Introduction


Je n'ai aucune idée de ce que cet effet est appelé, mais ça a l'air plutôt cool.
En gros, il utilise une couche qui se compose d'une copie floue d'une image, un calque avec une copie normale de l'image, et un masque qui a été dessinée avec l'outil Path Vector appliquée à la couche supérieure.

Attachments:
center-of-attention.jpg


Flou de copie


Avec l'image que vous voulez utiliser dans Fireworks ouvert, appuyez sur CTRL + C pour copier l'image, puis CTRL + V pour coller à droite sur le haut de l'image existante. Assurez-vous que les images sont dans la même position. Ne vont pas à appliquer un flou encore.

Le suivi pour un Masque


C'est la partie difficile, le dépistage de la part de l'image que vous voulez avoir affiché sans le flou.
Sélectionnez le Path Vector outil et de 1 pixel Soft Rounded mouvement.

Attachments:
vector-path-tool.jpg


Puis, trace autour de la zone de l'image que vous voulez rester concentré.

A peu de choses à garder à l'esprit, sont de mieux que son être légèrement l'intérieur de l'objet que de l'extérieur de l'objet, et que vous n'avez pas de trace dans l'ensemble de l'objet à la fois. Vous pouvez retrouver autour de petites sections et ensuite de combiner ces sections en sélectionnant à l'aide de tous SHIFT / CTRL, puis en utilisant Modifier -> Combinez Paths -> Union plus tard.

Une fois fermé youve votre chemin et compte tenu de remplir un blanc, vous devriez avoir quelque chose de similaire à cela. N'hésitez pas à expérimenter avec des largeurs de ligne, de précisions, et d'autres réglages jusqu'à obtenir un niveau de qualité que vous êtes à l'aise avec.

Notez également que par l'utilisation d'un vecteur de forme comme un masque, vous pouvez sélectionner le masque de la boîte de couches et de modifier ce vecteur de chemin à faire les ajustements après avoir tout fait. Ce faisant, theres va être une option sur les propriétés des masques labeld "path plan" ou "niveaux de gris apparence», le niveau de gris option vous permettra d'ajuster votre masque en prenant en considération les bords et à plumes teintes couleur de remplissage alors que le chemin esquisse option utilise toujours un disque plan de la forme, sans considérations de masque d'opacité remplir couleurs.

Attachments:
mask.jpg


Maintenant, avec des cas comme la jeune fille sur la droite où il ya un espace entre ses bras qui doit être floue, un peu comme un beignet, voici ce que vous faites.

Créez d'abord le contour chemin, alors que l'intérieur de la zone de trace. Utilisez CTRL / SHIFT pour sélectionner les deux voies, puis sélectionnez Modifier -> Combinez Chemins -> S'inscrire avant de donner les chemins de remplissage. Cela va provoquer le chemin d'accès à l'intérieur de travail, comme le bord intérieur d'un beignet.

Réglage de The Mask


Une fois que vous êtes satisfait de votre masque de forme de son temps à l'appliquer comme un masque.
Avec la forme de masque sélectionné, appuyez sur CTRL + X pour couper le masque de l'image.
Suivant un clic droit sur l'image et sélectionnez l'avant-plan Edition -> Coller en tant que masque .
Il ne faut pas chercher autre encore, car au moment de l'image de fond exactement la même que l'avant-plan.

Maintenant, un flou sur le fond


Avec le masque appliqué à l'avant-plan, vous devriez maintenant être en mesure de cliquer n'importe où sur la toile, d'autres que la zone masquée pour sélectionner l'image de fond.

Avec l'image d'arrière-plan sélectionné cliquez sur le bouton [+] par vos filtres et sélectionnez Blue -> Gaussian Blur .
Vous devez immédiatement voir une différence et une fenêtre de dialogue vous pouvez utiliser pour affiner le flou.

Attachments:
gblur.gif


Conclusion


Si vous voulez vraiment régler la question des intérêts en dehors du reste, vous pouvez appliquer une échelle de gris à l'image de fond avec ou à la place du flou. Im sûr que vous pouvez chose d'autres moyens que de fausser l'image de fond aussi.

Une utilisation possible de ce rapport serait de mettre en évidence les salariés d'une photo lorsque vous survolez leur nom dans une liste. Something thats possible avec Javascript, mais devrait être fait à l'aide de Flash, si vous utilisez une image ou plus d'une demi-douzaine de personnes, parce que flash peut réaliser l'effet en utilisant une seule copie de l'image et une programmation VS besoin de plusieurs images ou un [acronyme = feuilles de style en cascade: 206zxxpf] CSS [/acronym] sprite image de Javascript.

Attachments:
example.zip

(93.63 Kio) Téléchargé 164 fois

Javascript and CSS sprite example of a use for the blur masking effect that focuses on a different person in the photo depending on which list item you hover over with your mouse


Attachments:
hooters-strip-layered.png.zip

(685.11 Kio) Téléchargé 207 fois

The strip from the example in PNG format with all layers and groups intact.

Strong with this one, the sudo is.
  • Anonymous
  • Bot
  • No Avatar
  • Inscription: 25 Feb 2008
  • Messages: ?
  • Loc: Ozzuland
  • Status: Online

Message Mai 4th, 2009, 7:12 am

  • SB
  • Moderator
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Nov 16, 2004
  • Messages: 8677
  • Loc: Aberdeen, Scotland
  • Status: Offline

Message Mai 4th, 2009, 7:37 am

Couldnt ont choisi un objet pour mieux se concentrer sur :lol:
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • Avatar de l’utilisateur
  • Inscription: Déc 20, 2002
  • Messages: 8926
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Message Mai 4th, 2009, 9:23 am

Presque ressemble à une lentille effet de flou lorsque vous essayez d'imiter ce qui se passe lorsque vous jouez avec l'ouverture d'une caméra.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • Avatar de l’utilisateur
  • Inscription: Mai 28, 2003
  • Messages: 23404
  • Loc: Woodbridge VA
  • Status: Offline

Message Mai 4th, 2009, 9:33 am

Voilà vraiment un très bon effet. I like that.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • Avatar de l’utilisateur
  • Inscription: Déc 29, 2003
  • Messages: 5169
  • Loc: SC-USA
  • Status: Offline

Message Mai 6th, 2009, 5:42 am

Great tutorial joe!
- dM

Afficher de l'information

  • Total des messages de ce sujet: 5 messages
  • Modérateur: Tutorial Writers
  • Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 5 invités
  • Vous ne pouvez pas poster de nouveaux sujets
  • Vous ne pouvez pas répondre aux sujets
  • Vous ne pouvez pas éditer vos messages
  • Vous ne pouvez pas supprimer vos messages
  • Vous ne pouvez pas joindre des fichiers
 
 

© 2011 Unmelted, LLC. Ozzu® est une marque déposée de Unmelted, LLC