Outils

CSS Drive: Image to Colors Palette Generator Notes: - Max file size: 1 MB. - Supported image types:.png, .gif, .jpg and .jpeg images. - Photoshop swatches and CSS styles also generated. Light Color Palette #909b86 #a0a68f #adb39b #bdb682 #b8bca2 #c2c6b3 #dad295 Medium Color Palette #21360d #404d1f #5a6636 #7b6c05 #858d66 #b4a42b Dark Color Palette #0d1505 #191e0c #312b02 #2d301b Complete Color Palette #3b4e17 #39461b #3b4b1c #3e5521 #43582f #475a22 #555f2a #52602b #636b38 #707d48 #d1d7b1 #fade11 #555a24 #57642c #bfbe9f #c5c9a8 #3d4e18 #81713d #edc70a #605f27 #c2a91b #374a12 #483f04 #394c14 #5e7433 #35420c #8b6d0d #43541d #b5b994 #d0b712 #4b5e27 #2c4213 #495d20 #3a4719 Save as CSS stylesheet (.css file) Save as Photoshop swatches (.aco file) Notes: - Max file size: 1 MB. - Supported image types:.png, .gif, .jpg and .jpeg images. - Photoshop swatches and CSS styles also generated. Light Color Palette #909b86 #a0a68f #adb39b #bdb682 #b8bca2 #c2c6b3 #dad295 Medium Color Palette #21360d #404d1f #5a6636 #7b6c05 #858d66 #b4a42b Dark Color Palette #0d1505 #191e0c #312b02 #2d301b Complete Color Palette #3b4e17 #39461b

CSS3 Create 40 Tiny Web-Based Apps & Tools for Web Designers In this post we have collected a varied assortment of tiny web-based apps and tools that have been built with the purpose of solving a specific solution and act as precious time-savers for web designers. They are those tools that may not be very well known, are not the most powerful of apps, but are really useful and do serve their purpose extremely well. You will find apps that will help you to create icon-fonts, calculators for working out an elements width in % from PXs, apps that will allow you to create beautiful typography, tools for validating and sorting your CSS, super-simple editors, resources for quick reference, sprite generators, PSD validators, Base64 converters… and much, much more. Get ready to start bookmarking… Daturi – An app for converting images to Base64. px-em – A PX to EM calculator. PSD Validator – Tool to find out how well your PSD files are structured. Create CSS3 – A super-simple CSS3 generator. SassMe – An app for visualizing SASS color functions. SVGeneration.

Les grilles dans le webdesign "Il y a quelque chose de différent entre ce site et le mien… Il a l'air de faire plus pro et je ne sais pas pourquoi !" N'avez-vous jamais eu ce genre de remarque ? Pourtant vous utilisez Photoshop (ou autres programmes équivalents) depuis un certain temps, vous connaissez les règles typographiques et celles du web, la palette de couleur a été choisie avec soin... Bref, rien n'y fait : votre site semble déstructuré / désharmonisé. Pas d'inquiétude, vous n'avez sans doute pas utilisé de grille dans votre design ! Une grille, comme dans le film* ? Utilisée en imprimerie, il est tout à fait possible de transposer le système de grille dans le domaine du web. * Un film très bleu avec des motos, des combats de disques et un certain monsieur Flynn. Grilles : les bases Il existe beaucoup de grilles différentes avec autant de cas concrets d'utilisations. Anatomie d'une grille Elle sert d'armature pour organiser la page et son contenu. On obtient alors une page plus lisible et plus homogène.

WordPress-Gear The Font Identifier: 12 Top Picks That Will Speed Up Your Workflow Designers have a need for relevant fonts in all creative mediums. Both print and digital design follow a similar track when choosing and composing typography. But there’s always the nuance of actually choosing which font to use. Thankfully in our modern high-tech era there are plenty of font identifier tools which can help. The following resources are meant for designers and developers who often need to identify a particular font. Using a Font Identifier The two distinct methods of font identification are image-based and text-based recognition. When using a font identifier make sure that you have a high-quality sample of the font. Another handy trick is to single out just a few letters. Overall just have some patience and be willing to try out a few different tools if necessary. Checking Fonts from an Image First let’s take a look at different resources for image typography analysis. In order to obtain the best results try to make the image very clear and legible. WhatTheFont WhatFontIs