background preloader

TypoGraphie Web et Papier

TypoGraphie Web et Papier
j’avais déjà publié un billet assez complet sur les grilles de mise en pages papier ici. Mais juste de vous indiquer ce site de calcul …de colonnages et d’espaces verticales et horizontales directement en ligne. (via le blog de C’est Josef Müller Brockmann qui a jeté les bases d’une explication détaillée sur le sujet. L’histoire des grilles de mise en page se confond aisément avec celle de la mise en scène typographique depuis l’invention de l’alphabet moderne par les phéniciens quelques 700 ans avant JC. Johannes, le grand Gutenberg, inventeur de la lettre mobile et «inter-active» en plomb et antimoine, utilisait déjà deux colonnes dans sa bible en 42 lignes au XVe siècle. Le développement des formats de la presse, bien plus gigantesques que ceux du livre ont posé rapidement le problème de l’organisation des pages. © peter gabor | directeur e-artsup Signaler ce contenu comme inapproprié Biographie peter gabor Graphic Designer Teaching and Research Related:  APPS ET OUTILS UTILESpratique (graphisme)

Tracés régulateurs, grilles et gabarits, la conquête de la liberté & de l’harmonie. Il (le typographe) doit inlassablement parfaire son sens des proportions, afin de pouvoir juger sans défaillance de la portée et de la limite d’un rapport de proportions. Il sentira alors à quel moment la tension établie entre deux éléments devient si forte que l’harmonie se trouve menacée. Il apprendra à éviter les rapports sans tension aucune qui engendrent l’uniformité et l’ennui. Voilà qui est bien dit et clairement exprimé… Pas de dogmes ou de principes rigides mais une culture de la sensibilité, la nécessité de la tension “maximale possible” pour une composition à la fois dynamique et équilibrée ou le blanc est aussi important que le noir, et non son seul support. Une fois conçue, la grille modulaire installe une harmonie de proportions entre tous les éléments qui forment la page, éléments imprimés aussi bien que non-imprimés. Exemple de grilles multi-colonnes : à gauche une grille à 9 colonnes qui englobe les marges, à droite une grille à 5 colonnes qui n’inclue pas les marges.

Grille de mise en page : principe et utilisation - nůn - design et arts graphiques La grille de mise en page a été théorisée par le graphiste suisse Joseph Muller Brockmann dans les années 1960, notamment dans son ouvrage Grid Systems in Graphic Design. Elle permet de découper le format dans sa largeur (et plus tard dans sa hauteur) en plusieurs parties égales, séparées par des espaces verticaux. L’usage des colonnes ainsi créées permet de travailler avec des « zones », proportionnelles entre elles, ce que l’œil du lecteur perçoit immédiatement. Pour consulter l’ouvrage, c’est ici : Grid Systems in Graphic Design Au départ, il y a le format. Déjà au XVe siècle, Gutenberg utilisait une grille puisqu’il scindait en deux colonnes sa fameuse B42, la bible à 42 lignes. Primordialement, il faut considérer la lisibilité du texte. Les colonnes contribuent donc, en premier lieu à la lisibilité et au confort de lecture. La grille permet, par ses gouttières (espace entre chaque colonne), de faire circuler les blancs dans la page. Colonnes Les colonnes structurent la page.

CSS Hat: A Magic Button That Turns Photoshop Styles Into CSS Taking a design from Photoshop to the web in a click is not even a remotely new idea. For as long as there have been “web designers” there has been the dream of such a workflow. Today we’re going to look at yet another tool that makes this promise: CSS Hat. CSS Hat is different than other apps that you’ve seen though. It’s not a full blown WYSIWYG aimed at allowing you to build an entire site without writing code, rather it’s a way to bust out a few quick CSS3 styles on a single element using the process that you’ve used for the past decade or more, right in Photoshop. Meet CSS Hat Let’s talk about what CSS Hat is and isn’t. What this means for you is that the learning curve is remarkably low. The trick performed by CSS Hat is that it has the ability to look at a layer in Photoshop, analyze its various characteristics and then attempt to duplicate those characteristics with pure CSS. Layer Styles: This is where the benefit really lies. But I Hate WYSIWYGs! So why bother? Let’s Try It!

Une jolie signature pour vos emails Aujourd’hui un petit tutoriel pour vous expliquer comment ajouter une à vos à partir de l’application . Comme vous le savez sûrement, il est déjà possible d’ajouter une automatiquement à votre , mais celle-ci se limite à un format texte assez austère et simpliste ! Mais on peut faire beaucoup mieux ! Le vous propose aujourd’hui de faire quelque chose de plus poussé graphiquement et surtout plus pro, en ajoutant une image et en travaillant un petit peu la typographie. Je tiens tout de même à vous prévenir que quelques connaissances informatique sont tout de même nécessaires pour réaliser ce petit tutoriel ! La mise en page proposée est bien sûr donnée à titre d’exemple, vous pouvez, si vous en avez les capacités, modifier celle-ci à volonté ! Commençons d’abord par créer un fichier html qui servira de base à notre . Pour cela vous devez possédez un éditeur web pour créer le code approprié. Après avoir installé votre , téléchargez le code en cliquant sur l’icône ci-dessous :

Design & Typo, le site Les formats. Pour faire le portrait d’un livre, tenter de définir son identité, il est bon de commencer par nommer son format, afin d’esquisser son allure générale. Le choix du format crée un rapport d’échelle, une relation entre le corps et l’objet. Avant l’imprimerie, la lecture se fait souvent en « face à face » : le livre, souvent de grand format, est posé debout sur un lutrin, dans une position légèrement inclinée. Avec l’imprimerie, le livre s’adapte à la main et la nature de la relation devient plus intime. Aujourd’hui, ces deux types de lecture perdurent avec les ouvrages de type roman ou essai et les ouvrages de type album, qui nécessitent souvent d’être posés sur une table et imposent une lecture plus distancée. Avant cette normalisation, les forme et dimension d’un livre étaient souvent désignées par les termes : in-folio, in-quarto, in-octavo, etc., faisant référence au nombre de plis dans la feuille.

josef chladek – on photobooks and books Office Timeline, créer des plannings visuels avec PowerPoint Une image vaut mieux que des explications. Pour une communication efficace, une belle présentation n’a pas son pareil. Les aficionados de PowerPoint le savent bien et réalisent des présentations toujours plus sophistiqués. Mais s’il y a bien une discipline dans laquelle PowerPoint pêche, c’est dans la possibilité de créer des éléments visuels de gestion de projets, et notamment les plannings. Pourtant, c’est probablement l’une des seules manières de présenter le déroulement d’un projet à un parterre qui n’est pas prêt à plonger dans MS Project. Office Timeline est un plugin pour Microsoft PowerPoint qui permet de créer des plannings visuels très élaborés et magnifiques. Doté d’une interface très agréable basée sur le fameux ruban Office, Office Timeline permet de créer très rapidement ses lignes de temps. Les possibilités sont assez grandes avec ce plugin très bien réalisé. Voici une pettie vidéo qui montre le logiciel en action : J’aime beaucoup ce que permet ce plugin.

Gorilla - Logo design: 5 questions all good logo designs should ask. Logo design is all about understanding the brand and the business the logo will promote. Ultimately the entire ethos of the brand will be conveyed through one symbol; so it has to be aligned with the brand’s core values, look good and be functional. Even the very best designers will be struggle to come up with the perfect logo design for a company if they know nothing about. Logo Design Question 1: What does the company do? Pretty obvious but the purpose of the company is the reason for its existence, so this is a fundamental question. Logo Design Question 2: Why was the name chosen? In a previous post we wrote about how important it is to choose a solid name for your brand. Logo Design Question 3: What’s your business story? A great logo design should be able to accommodate both the present and future activities of the company. Logo Design Question 4: What makes your company different? Logo Design Question 5: What’s the brand’s personality? Every brand should have a personality.

L’Outil - Méthodes d’empagement Le rapport du bloc d’empagement avec le format du papier, et le rapport du gris typographique et du blanc des marges, donnent son esthétique à un livre ou à une page. NB. Une vilaine mode se répand, qui oublie (ou plus probablement ignore) 2 000 ans de pratique du livre : selon certains, le petit fond (le blanc à l'intérieur des pages, contre la reliure) devrait être plus large et donc plus grand que le grand fond (le blanc à l’extérieur des pages). La raison généralement invoquée pour justifier cette pratique, aussi laide que dépourvue de sens, serait qu’il faudrait compenser la perte apparente de papier due à la courbure qu’on peut observer dans les premières et dernières pages de chaque cahier… Perte qui est pourtant déjà compensée par l’imprimeur lorsqu’il fait l’imposition des pages ! Le résultat est hideux et pire : il gêne la lecture. Les exemples sont ici basés sur un format A4, mais les calculs sont identiques pour tous les formats de papier. Terminologie Le Canon des ateliers

JollyStone : Classification Vox-Atypi Les humanes : Originaires de Venise, les humanes reçoivent parfois le nom de véniciennes. Elles s’inspirent des textes du Moyen-Âge que les humanistes avaient transmis en écritures caroline et y joingnent des capitales inspirées d’inscriptions lapidaires romaines. Ces caractères dits romains ont servi à émanciper l’imprimerie du manuscrit qu’elle avait copié au début par l’utilisation des caractères gothiques. La caractéristique la plus remarquable, mais pas absolument indispensable, est la barre oblique du e bas de casse. Les garaldes : Issues de la Renaissance italo-française, les garaldes s’écartent de l’influence manuscrite. Le nom des garaldes est constitué à partir des noms de deux de leurs principaux promoteurs : Garamond et Alde Manuce. Les réales : Caractères de la première moitié du xviiie siècles, ils sont marqués par l’époque des monarchies de droit divin et par l’esprit rationnel des encyclopédistes. Les didones : Les mécanes : Les linéales : Les incises : Les scriptes :

iWeb2Print - Free Online Web Page to Printer Friendly PDF Convert Web Page to Elegant Printer Friendly PDFSave, Read, and Print Directly from your BrowserControl Page Size (Letter, Legal, A0-A9, B0-B10, +more)Control Orientation (Landscape, Portrait)Control PDF Mode (Color, Gray)Exclude Web Page Images or Background to Optimize PrintingNo Registration, No Email, Unlimited UsageChrome Extension - Firefox Add-On Printing TipsCheck gray scale for non color printer | Check no images to print text only | Check no background when converting dark background page to save printer toner Bookmarklet Convert web pages to PDF directly from your browser. Drag this button to your browser Bookmarks toolbar Browser Extension / Add-On iWeb2x is a plugin for both Google Chrome and Firefox browsers. iWeb2x combines both iWeb2Print and iWeb2Shot. ➘ More Productivity Tools i2Clipart Royalty Free Public Domain Clipart suitable for academic presentations and project logos i2Symbol Personalize social messages, e-mails, and tweets with rich graphical symbols i2OCR iPdf2Split

Que contient une charte graphique, quels sont ses objectifs ? Une charte graphique est un terme venant du mot latin charta qui signifie « papier ou lettre », en français charta a pris le sens de « loi, règle fondamentale ». En y associant le mot graphique, le résultat est un document de référence appelé charte graphique, il contient les règles fondamentales d’utilisation des signes graphiques constituant l’identité visuelle d’une entreprise, d’une marque, d’une organisation ou d’un projet. Première charte graphique de l’agence AntheDesign Le contenu d’une charte graphique Une charte graphique regroupe et traduit graphiquement tout l’univers et toutes les valeurs de l’entreprise (dynamisme, innovation, élégance, …) , c’est le support fondamental de toute sa communication (interne et externe). Le logotype doit refléter l’image de l’entreprise et ses activités, il doit également renforcer son image et rassurer ses clients. Une charte graphique complète regroupe et codifie également : Les objectifs et les intérêts d’une charte graphique

Related: