PUBLIC MARKS from decembre with tags tutoriel & image

Github also has a thing called ‘Gists’. Gists are designed for sharing small code samples of whatever you like. If you create a free Github account, you can add new gists to your account whenever you like. They’re 100% free. The interesting thing about gists is we don’t even have to be logged in to create one. If you open this page, paste in some text in, give it a filename and hit ‘Add file‘, you’ll have a publicly-accessible URL to an anonymous file. Of course, it’s probably easier to keep track of your files if you just create a free GitHub account from the start, but you don’t have to to try it out. How to Host your SVG in a GitHub Gist

One popular method to deal with this is to “Lazy Load” the images; that is, to only load the images just before the user will need to see them. If this technique is applied to the “above the fold” content – i.e., the first average viewport-sized section of the page – then the user can get a significantly faster first view experience. So everyone should always do this, right? Given the potential limitations, let’s work on a solution that can handle all my concerns: a. works without JavaScript (i.e., lazy loading is an enhancement) b. vanilla js – no dependencies on jquery or angularjs c. works with broken JavaScript (i.e., the browser supports JavaScript, but there’s a js error somewhere which causes your script to break; might not even be your fault!)

This is an article dedicated to the Gmic filter 'colorize', a new and next generation computer-assisted tool for colorization image filter. This filter was created by David Tschumperlé , project manager and main developer of Gmic. The filter improved a lot on this September 2014 ( and was started around spring 2013 ). I kept an eye on the filter development since the very beginning as a tester, but I got totally enthusiast about it recently ; especially when filter became interactive and more user friendly. I ) Overview 1) What kind of problems it solves : A bit of context here, the first steps of colorizing a line-art, usually with flat zone is a super long, annoying and robotic work.

Le but est ici de faire en sorte que l'image de fond que l'on aura placée en CSS conserve son ratio de 16/9 et prenne toute la taille du navigateur, quelle que soit la taille de ce dernier (aka fullscreen). Pratique quand on fait du responsive. Voici le code utilisé : .ratio { background: url("monimage.jpg") no-repeat; background-size: cover; width: 100vw; height: 56.25vw; } Concrètement ce que l'on fait : on donne à l'image la largeur du navigateur grâce à l'unite vw (viewport-width) on lui donne la hauteur à laquelle on a appliqué un ratio 16:9 calculé en faisant 100 * 9 / 16 de la largeur du navigateur

You can make MPIV work with more sites by adding your own host rules. You don't need to edit the source code for this. Instead, you paste the rule into MPIV's settings dialog which is accessible from your script manager's toolbar icon menu, e g. "User Script Commands" → "Set up Mouseover Popup Image Viewer" for Greasemonkey users.

/* For image replacement */ .ir { border:0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; } Edit du 09/04/2012 — N’hésitez pas à jeter un oeil sur l’article : My thoughts about the latest Image Replacement techniques qui pointe les défauts de ces nouvelles méthodes de remplacement de texte par une image.

What is this all about? The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions. Ideally, this approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes, and without UA sniffing.

Avec ces 3 (ou 4) étapes, en particulier en jouant sur la résolution (étape 2) et la compression (étape 3), vous devriez trouver le réglage optimal. À vous de faire des essais pour trouver le bon équilibre entre résolution, qualité d'image et taille du fichier. Voici une vidéo de démonstration des étapes 2 et 3 avec le logiciel The Gimp: sebsauvage.net/temp/wink/gimp_jpeg_compress.html (Vidéo Flash, 5 Mo) Lire aussi : Réduire la taille de photos avec Image Resizer

Responsive or not, there’s no reason why we shouldn’t all be designing and building sites on flexible foundations.

nous allons vous montrer comment créer les légendes des images avec diverses transitions simplement en utilisant CSS3. Simple transition effect with only CSS3.How to create image captions with various transitions simply using CSS3, dependent on transform and transition properties.

Tutorial : How to create different interesting hover effects on circles with CSS transitions and 3D rotations.Border radius property, we can create circular shapes. Seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, we are going to create some special hover effects for it!

Comment faites-vous pour que la couleur d'arrière-plan de la colonne de droite s'étende jusqu'en bas de la page ?. Le secret, embarrassant de simplicité, est d'utiliser une image d'arrière-plan qui se répète verticalement pour créer l'illusion de colonnes en couleur

The following is a guest post by Parker Bennett. Parker has written for CSS-Tricks before, in his article Crop Top dealing with the positioning of fluid images. This is a great follow up to that, presenting another option in the never-ending responsive images saga. It's also an interesting contrast to yesterday's post on responsive images - so you can see how very different the approaches to this problem can be.

Dans ce tutoriel vidéo nous verrons comment utiliser l'outil animation de photoshop pour réaliser un gif animé. Il vous faudra Photoshop CS3 extended ou Photoshop CS4 pour avoir accès à l'outil animation. Si vous possédez d'autres versions vous devrez utiliser Image ready.

In this article tripwire magazine provides a Photoshop Mega Toolbox with all you can wish for in Tutorials, Textures, Patterns, Brushes, Actions, Cheat Sheets etc. The article has been spit up in 8 sections to make sure you immediately find what you’re looking for.

Tout ce que vous avez besoin est une idée, le freeware posterazor et une imprimante couleur. Posterazor est open source et un téléchargement très petit à 484KB. extrême portabilité, l'interface très simple, et Windows, Mac OSX et Linux. Grand nombre de formats.. Consultez le "HowTo MakeUseOf : Gratuit & énormes affiches personnalisées pour votre mur , article qui montre comment imprimer des sections d'une grande image sur du papier de format standard, et assembler le tout comme une immense affiche. L'assistant est simples : juste 5 étapes à partir de l'image de départ à l'affiche fini. Des zones de chevauchement de marge sont nécessaires pour le collage des pièces ensemble. Dans la dernière étape, l'affiche est enregistrée dans un fichier PDF multi-pages. Tout ce qui reste maintenant, c'est le travail d'impression des feuilles et de les assembler sur avec de la colle sur les bords chevauchants.

Marche à suivre: 1. Téléchargez Rasterbator: ou utilisation Online web (met des restrictions sur la taille et la résolution de sortie) 2. Exécuter et sélectionnez l'image source 3. Sélectionnez la taille du papier et l'alignement: L'image rasterbated sera automatiquement divisé sur plusieurs pages, si vous avez besoin de spécifier le format de chaque unité de papier (A4, A3, etc) et son alignement (horizontal ou vertical). 4. Définir la taille de sortie: la taille de sortie est définie par la quantité de documents à utiliser pour la largeur de l'image ou la hauteur. Par exemple, vous pouvez dire Rasterbator pour produire une affiche avec une largeur équivalente à 12 horizontalement alignés A4 documents . 5. Options "rasterbation Set" : Spécifiez les paramètres de couleurs et de résolution 6. Sélectionnez le répertoire de sortie et appuyez sur "Rasterbate presse!" " 7. C'est Fait: Imprimez-le et mettez le sur votre mur !

PosteRazor coupe un fichier image en plusieurs morceaux pouvant être imprimés et ensuite joints pour en faire une affiche (poster) PosteRazor version 1.2 parle francais. (Voir Sourceforge) - Tous les formats d'image. - Dimension Unités : m, mm, cm, pouces, pieds, pt(72e pouces) - Taille et l'orientation de l'imprimante où l'affiche sera imprimée peut être réglée manuellement ou formats prédéfinis suivants:DIN A4, DIN A3, Legal, Letter, Tabloid . La limite de taille d'une page est de 5 mètres (16,4 pieds), (maximum PDF.). - Format de l'affiche peut être fixé : Taille de l'image absolue (Taille spécifique de votre affiche.), Taille par nombre de pages (Combien de page), Taille de l'image en pour/cent La taille finale de l'affiche est théoriquement illimitée......

Here is a quick overview of ftp settings. If you are not sure what an ftp client is, search google specifically for an "ftp client". There are free options available and many to pick from. For PC you can try filezilla, for mac you can try cyberduck. Below are the setting you must use for ftp to connect to morguefile.com : * - Host: upload.morguefile.com * - User name: [your user name] * - Password: [your password] * - Protocol: FTP * - Port: 21 * - Important you must enable Passive Mode.

Automatiquement par filtre : Le plugin "Resynthesize" disponible pour Gimp permet de supprimer de manière automatique des éléments d'une image. Bien sûr cela ne marche pas toujours aussi bien, en fonction de la structure de l'image, mais ça donne généralement rapidement de très bons résultats. Le système n'est pas parfait et il nécessite parfois des retouches manuelles supplémentaires. Il suffit de détourer avec le lasso l'élément à supprimer: puis faire: menu Filtres > Carte > Resynthesize > ok. En dehors du filtre Resynthesize lui-même, aucune retouche supplémentaire n'a été effectuée sur ces images. Le plugin Resynthesize est disponible sur cette page: http://www.logarithmic.net/pfh/resynthesizer (Sous Ubuntu, il suffit d'installer le paquet gimp-resynthesizer)

en anglais , liste de liens et procédures pour chercher images libres de droit (CC :Creative Commons)

Barre à outils - Préférences - Outils - Stylet - Brush Control - Couleurs et Calques - Visuel - Brush Creator - Plugins - Exemple - Touch Strip config - Painter X - Painter 11..... Pour les non connaisseurs, Painter est un logiciel qui imite les outils traditionnels de dessin. La première sensation est de vouloir comparer la capacité de mimétisme du logiciel avec le réel, sa façon de retranscrire numériquement une peinture à l’huile, une aquarelle ou un crayon. La seconde sensation est plus tactile et concerne l’utilisation du stylet car il y a également une volonté chez Painter de coller à la réalité du geste, dans le sens que la pression et l’inclinaison du stylet (car elle fonctionne beaucoup avec Painter pour les possesseur d’Intuos) exercées par notre main reproduisent le même cheminement et le même résultat qu’avec l’outil traditionnel.

Script Summary: Add pop-up preview to any site.(Script homepage).....Rules for popup action must be written in "SITEINFO" in proper format. Properties of SITEINFO url (required)(RegExp) : URL to which the rule is applied. targetElement (required)(XPath) : XPath which select "A" elements. When "mouseover" action occurs on them, linked pages (values of "href" attributes) will be fetched. popupElement (required) (XPath) : XPath which select elements in fetched pages. These elements will be appear in tooltips. disabled (optional) : If you want to disable a rule temporally, set "false". style (optional) : CSS attributes of tooltips. Please be careful to write in CamelCase! (border-width -> borderWidth) stripe (optional) : If you set "true", small icons will be appended to elements on which the action will occur.

The Digital Photography School blog has an instructive tutorial on using layers

un blog de formation en vidéo pour tout ce qui touche à l'image numérique. Vous trouverez sur ce blog tout une série de vidéos de formation à Photoshop et d'autres logiciels de graphisme (et même une vidéo sur le concept de réalité augmentée).