tag:blogger.com,1999:blog-77951591769521437822009-02-20T23:44:46.850-08:00JBlogA blog for graphic and web design lovers and haters.jberradesignhttp://www.blogger.com/profile/07060156737452461896noreply@blogger.comBlogger6125tag:blogger.com,1999:blog-7795159176952143782.post-4709519454840135152008-02-12T16:29:00.000-08:002008-02-12T16:33:43.641-08:00Fun stuff on the webSo, I was searching the web to help me with some color issues. I was trying to match a pantone color with its complimentary and triad colors. Well, little to my knowledge there is a lot out there in terms of color.<br /><br />Color is an amazing thing. Just wanted to share.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7795159176952143782-470951945484013515?l=jberradesign.blogspot.com'/></div>jberradesignhttp://www.blogger.com/profile/07060156737452461896noreply@blogger.com0tag:blogger.com,1999:blog-7795159176952143782.post-25318199702803187962008-01-28T19:33:00.000-08:002008-01-28T19:34:21.565-08:00<h2 style="font-family: arial;"><span style="font-size:85%;">10 Ways To Increase Pages Indexed </span></h2> <span style="font-size:85%;"><a style="font-family: arial;" href="http://www.webpronews.com/user/jason-lee-miller"><img src="http://www.webpronews.com/files/pictures/picture-2409.gif" class="picture" /></a></span> <div style="font-family: arial;" class="submitted"><span style="font-size:85%;">By <a href="http://www.webpronews.com/user/jason-lee-miller" title="View user profile.">Jason Lee Miller</a> - Tue, 01/22/2008 - 12:15pm.</span></div> <span style="font-size:85%;"><br /><b style="font-family: arial;">Or how to make Google pay more attention</b><br /><br /></span><p style="font-family: arial;"><span style="font-size:85%;">For a while now webmasters have fretted over why all of the pages of their website are not indexed. As usual there doesn't seem to be any definite answer. But some things are definite, if not automatic, and some things seem like pretty darn good guesses.</span></p><p style="font-family: arial;"><span style="font-size:85%;">So, we scoured the forums, blogs, and Google's own guidelines for increasing the number of pages Google indexes, and came up with our (and the community's) best guesses. The running consensus is that a webmaster shouldn't expect to get all of their pages crawled and indexed, but there are ways to increase the number.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>PageRank </b></span></p><p style="font-family: arial;"><span style="font-size:85%;">It depends a lot on PageRank. The higher your PageRank the more pages that will be indexed. PageRank isn't a blanket number for all your pages. Each page has its own PageRank. A high PageRank gives the Googlebot more of a reason to return. <a href="http://www.seroundtable.com/archives/003418.html">Matt Cutts confirms</a>, too, that a higher PageRank means a deeper crawl.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Links</b></span></p><p style="font-family: arial;"><span style="font-size:85%;">Give the Googlebot something to follow. Links (especially deep links) from a high PageRank site are golden as the trust is already established.</span></p><p style="font-family: arial;"><span style="font-size:85%;">Internal links can help, too. Link to important pages from your homepage. On content pages link to relevant content on other pages.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Sitemap </b></span></p><p style="font-family: arial;"><span style="font-size:85%;">A lot of buzz around this one. Some report that a clear, well-structured Sitemap helped get all of their pages indexed. Google's Webmaster guidelines recommends <a href="https://www.google.com/webmasters/tools/docs/en/about.html">submitting a Sitemap file</a>, too:</span></p><p style="font-family: arial;"><span style="font-size:85%;">·<i> Tell us all about your pages by submitting a Sitemap file; help us learn which pages are most important to you and how often those pages change.<br /></i></span></p><p style="font-family: arial;"><span style="font-size:85%;">That page has other advice for improving crawlability, like fixing violations and validating robots.txt.</span></p><p style="font-family: arial;"><span style="font-size:85%;">Some recommend having a Sitemap for every category or section of a site.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Speed </b></span></p><p style="font-family: arial;"><span style="font-size:85%;">A recent <a href="http://radar.oreilly.com/archives/2008/01/limits_google_crawl_markmail.html">O'Reilly report</a> indicated that page load time and the ease with which the Googlebot can crawl a page may affect how many pages are indexed. The logic is that the faster the Googlebot can crawl, the greater number of pages that can be indexed.</span></p><p style="font-family: arial;"><span style="font-size:85%;">This could involve simplifying the structures and/or navigation of the site. The spiders have difficulty with Flash and Ajax. A text version should be added in those instances.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><br /><b>Google's crawl caching proxy </b></span></p><p style="font-family: arial;"><span style="font-size:85%;">Matt Cutts provides diagrams of how <a href="http://www.mattcutts.com/blog/crawl-caching-proxy/">Google's crawl caching proxy</a> at his blog. This was part of the Big Daddy update to make the engine faster. Any one of three indexes may crawl a site and send the information to a remote server, which is accessed by the remaining indexes (like the blog index or the AdSense index) instead of the bots for those indexes physically visiting your site. They will all use the mirror instead.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Verify </b></span></p><p style="font-family: arial;"><span style="font-size:85%;">Verify the site with Google using the Webmaster tools.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Content, content, content</b></span></p><p style="font-family: arial;"><span style="font-size:85%;">Make sure content is original. If a verbatim copy of another page, the Googlebot may skip it. Update frequently. This will keep the content fresh. Pages with an older timestamp might be viewed as static, outdated, or already indexed.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Staggered launch</b></span></p><p style="font-family: arial;"><span style="font-size:85%;">Launching a huge number of pages at once could send off spam signals. In one forum, it is suggested that a webmaster launch a maximum of <a href="http://www.webmasterworld.com/google/3200455.htm">5,000 pages per week</a>.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Size matters </b></span></p><p style="font-family: arial;"><span style="font-size:85%;">If you want tens of millions of pages indexed, your site will probably have to be on an Amazon.com or Microsoft.com level.</span></p><p style="font-family: arial;"><span style="font-size:85%;"><b>Know how your site is found, and tell Google</b></span></p><p style="font-family: arial;"><span style="font-size:85%;">Find the top queries that lead to your site and remember that anchor text helps in links. Use Google's tools to see which of your pages are indexed, and if there are violations of some kind. Specify your preferred domain so Google knows what to index</span></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7795159176952143782-2531819970280318796?l=jberradesign.blogspot.com'/></div>jberradesignhttp://www.blogger.com/profile/07060156737452461896noreply@blogger.com0tag:blogger.com,1999:blog-7795159176952143782.post-20443216302021296932008-01-04T09:40:00.000-08:002008-01-04T09:41:03.363-08:00Good books . . .<strong style="font-family: arial;"></strong> <p style="font-family: arial;"><strong>1. <a href="http://www.amazon.com/Graphic-Artists-Guild-Handbook-Guidelines/dp/0932102123" title="Graphic Artists Guild Handbook: Pricing & Ethical Guidelines" target="_blank">Graphic Artists Guild Handbook: Pricing & Ethical Guidelines</a></strong><br />This is a book you should not do without. It touches on every topic you need to know about how to be successful as a graphic artist. If you want experienced and practical advice on anything from setting prices for your work on the Internet to how to best manage your client relations – this is the book for you.</p> <p style="font-family: arial;"><strong>2. <a href="http://www.amazon.com/Sagmeister-Made-Look-Peter-Hall/dp/1861542070" title="Sagmeister: Made You Look" target="_blank">Sagmeister: Made You Look</a></strong><br />Daring designer, Stefan Sagmeister, chronicles almost 40 years of working in this business in this book. Sagmeister conveys his wit and humor into these pages, as he tells you his personal adventures.</p> <p style="font-family: arial;"><strong> 3. <a href="http://www.amazon.com/Make-Bigger-Paula-Scher/dp/1568983328" title="Make It Bigger" target="_blank">Make It Bigger</a></strong><br />This book caters to designers who work with businesses. Read this to be inspired and benefit from the wisdom of years of experience working in the field of graphic design.</p> <p style="font-family: arial;"><strong>4. <a href="http://www.amazon.com/About-Face-Reviving-Rules-Typography/dp/2880466776" title="About Face: Reviving The Rules Of Typography" target="_blank">About Face: Reviving The Rules Of Typography</a></strong><br />Talking about the large topic of typography, About Face, helps you navigate through the world with ease. Many wonderful and successful examples of typography are provided in this book.</p> <p style="font-family: arial;"><strong>5. <a href="http://www.amazon.com/Typographic-Design-Communication-Rob-Carter/dp/0471383414" title="Typographic Design: Form and Communication " target="_blank">Typographic Design: Form and Communication</a></strong><br />This is the fourth edition of a best-selling book. If you want just one book to help you learn about how to properly typography, it’s this one. Whether you’re interested in the history of this art, or how it can be effectively used in this modern-era, this book is chock full of valuable information for graphic designers.</p> <p style="font-family: arial;"><strong> 6. <a href="http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326" title="The Elements of Typographic Style " target="_blank">The Elements of Typographic Style</a></strong><br />Author, Robert Bringhurst, has written this book, which uses beautiful language to tell the story of how to apply your own artistic sensibility to typography. One treat in this book is the examples of fonts in different languages such as Russian and Greek.</p> <p style="font-family: arial;"><strong>7. <a href="http://www.amazon.com/Elements-Graphic-Design-Space-Architecture/dp/1581152507" title="The Elements of Graphic Design: Space, Unity, Page Architecture, and Type" target="_blank">The Elements of Graphic Design: Space, Unity, Page Architecture, and Type</a> </strong><br />This book’s author, Alexander W. White, is a strong advocate of white space – what you can also call negative space. Many designers feel the need to clutter things up, but less can be more. Learn how to master that idea with this great book.</p> <p style="font-family: arial;"><strong> 8. <a href="http://www.amazon.com/Making-Breaking-Grid-Graphic-Workshop/dp/1564968936" title="Making and Breaking the Grid: A Graphic Design Layout Workshop" target="_blank">Making and Breaking the Grid: A Graphic Design Layout Workshop</a></strong><br />This book focuses on layout. With it, you can comprehensively learn the elements of layout so that you can better use them in your work.</p> <p style="font-family: arial;"><strong> 9. <a href="http://www.amazon.com/Designing-Type-Essential-Guide-Typography/dp/0823014134" title="Designing with Type: The Essential Guide to Typography (Designing With Type) " target="_blank">Designing with Type: The Essential Guide to Typography (Designing With Type) </a></strong><br />A book that’s been around since 1971, this is something that will introduce you to typography. It offers pointers on how to take into account such things as the feeling of a text, as well as how effectively it is conveyed in different formats.</p> <p style="font-family: arial;"><strong> 10. <a href="http://www.amazon.com/Meggs-History-Graphic-Design-Philip/dp/0471699020" title="Meggs' History of Graphic Design" target="_blank">Meggs’ History of Graphic Design</a> </strong><br />This offers a wonderful writing up of the history of graphic design. It may be of interest to both current graphic designers, and general artistic-minded people.</p> <p style="font-family: arial;"><strong> 11. <a href="http://www.amazon.com/Graphic-Design-Stephen-J-Eskilson/dp/0300120117" title="Graphic Design: A New History " target="_blank">Graphic Design: A New History</a></strong><br />Own this book and learn about graphic design history in a new light. The book talks in-depth of the different times of history in correlation to what graphic design’s were used.</p> <p style="font-family: arial;"><strong> 12. <a href="http://www.amazon.com/Thinking-Type-Critical-Designers-Students/dp/1568984480" title="Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students (Design Briefs)" target="_blank">Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students (Design Briefs)</a></strong><br />Author Ellen Lupton has written this wonderful book. The book has three main sections: letter, text, and grid. Learn the history of each, how technology can help you, and then see examples in practice.</p> <p style="font-family: arial;"><strong> 13. <a href="http://www.amazon.com/Designers-Toolkit-Grids-Style-Sheets/dp/0811860515" title="The Designer's Toolkit: 500 Grids and Style Sheets: 500 Grids and Style Sheets" target="_blank">The Designer’s Toolkit: 500 Grids and Style Sheets: 500 Grids and Style Sheets</a></strong><br />As you may have already guessed, this book challenges designers to re-think their idea of how to work within a grid. There are 500 grid and style sheets ready for you to produce your work on and see what you like.</p> <p style="font-family: arial;"><strong>14. <a href="http://www.amazon.com/Looking-Closer-Critical-Writings-Graphic/dp/1880559153" title="Looking Closer 5: Critical Writings on Graphic Design" target="_blank">Looking Closer 5: Critical Writings on Graphic Design</a></strong><br />This is the fifth and final installment in a series of wonderful books. Within these pages you will find writing on controversial topics that will encourage you to think outside of the page, or the screen.</p> <p style="font-family: arial;"><strong> 15. <a href="http://www.amazon.com/Think-Like-Great-Graphic-Designer/dp/1581154968" title="How to Think Like a Great Graphic Designer" target="_blank">How to Think Like a Great Graphic Designer</a></strong><br />Learn what you have in common with other graphic designers who have achieved success. What has helped them overcome obstacles may very well help you as well. This book is full of interviews you will find invaluable.<br /><strong>16. <a href="http://www.amazon.com/Seventy-nine-Essays-Design-Michael-Bierut/dp/1568986998" title="Seventy-nine Short Essays on Design " target="_blank">Seventy-nine Short Essays on Design</a></strong><br />The title of the book tells you what you’re getting, right off the bat. Michael Bierut writes with whimsy and a critical eye in this book that you are sure to enjoy and be educated from.<br /><strong>17. <a href="http://www.amazon.com/Graphic-Designer-Without-Losing-Your/dp/1568985592" title="How To Be a Graphic Designer Without Losing Your Soul " target="_blank">How To Be a Graphic Designer Without Losing Your Soul</a></strong><br />The work of a graphic designer is not easy, and you probably already know that. Within these160 pages you will discover writing on topics such as how to generate ideas when your mind is void of them. You don’t want to become a slave to mundane tasks and lose your spark, if you feel yourself drifting – reach for this book.<br /><strong> </strong></p> <p style="font-family: arial;"><strong>18. <a href="http://www.amazon.com/LogoLounge-International-Identities-Leading-Designers/dp/1592532381" title="LogoLounge 3: 2,000 International Identities by Leading Designers (LogoLounge)" target="_blank">LogoLounge 3: 2,000 International Identities by Leading Designers (LogoLounge)</a> </strong><br />If you’re crazy for logos then this is the book for you. In this third installment, you will find a myriad of different logos – 2,000 to be exact. Get inspired with this book, and then get designing.</p> <p style="font-family: arial;"><strong> 19. <a href="http://www.amazon.com/Logo-Design-Midi-Julius-Wiedemann/dp/3822846228" title="Logo Design (Midi Series) " target="_blank">Logo Design (Midi Series)</a></strong><br />This is a handy reference book on logo design. Students and professionals alike will enjoy this book.</p> <p style="font-family: arial;"><strong> 20. <a href="http://www.amazon.com/Hand-Job-Catalog-Michael-Perry/dp/1568986262" title="Hand Job: A Catalog of Type" target="_blank">Hand Job: A Catalog of Type</a> </strong><br />Fifty typographers are featured in this book, and what they all have in common is that they reject technology, and design their fonts by hand. While the title at first can seem shocking to anyone, it will stay shocking to a designer. When’s the last time you reached for a pen and paper for your final draft? Maybe next time you will, after reading this book.</p> <p style="font-family: arial;"><strong> 21. <a href="http://www.amazon.com/Universal-Principles-Design-Usability-Perception/dp/1592530079" title="Universal Principles of Design: 100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design" target="_blank">Universal Principles of Design: 100 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach Through Design</a></strong><br />Well-written, this book is what it claims to be – 100 ways to enhance, influence, increase, teach – you get the idea. It is easy to understand and follow, and gives you well-researched briefs on a variety of topics that normally you’d have to read about in several different books.</p> <p style="font-family: arial;"><strong> 22. <a href="http://www.amazon.com/Adobe-Photoshop-CS3-Classroom-Book/dp/0321492021" title="Adobe Photoshop CS3 Classroom in a Book " target="_blank">Adobe Photoshop CS3 Classroom in a Book</a></strong><br />Experts that make up the Adobe Creative Team have put together this book for you to easily expand your knowledge of the Adobe Photoshop program. Learn how to do things better and faster, all from reading this book.</p> <p style="font-family: arial;"><strong> 23. <a href="http://www.amazon.com/Photoshop-Digital-Photographers-Voices-Matter/dp/0321501918" title="The Adobe Photoshop CS3 Book for Digital Photographers (Voices That Matter) " target="_blank">The Adobe Photoshop CS3 Book for Digital Photographers (Voices That Matter)</a></strong><br />To have Adobe Photoshop is one thing; to be able to use it is one thing, but to be able to use it well is another. And that is especially true when it comes to digital photography. If you want the best tips and tricks, this book won’t lead you astray.</p> <p style="font-family: arial;"><strong> 24. <a href="http://www.amazon.com/Adobe-Illustrator-CS3-Classroom-Book/dp/0321492005" title="Adobe Illustrator CS3 Classroom in a Book" target="_blank">Adobe Illustrator CS3 Classroom in a Book</a></strong><br />Master the programs in Adobe Illustrator by using this book as a step-by-stop guide. The Adobe Creative Team will guide you where you need to go.</p> <p style="font-family: arial;"><strong> 25. <a href="http://www.amazon.com/Adobe-Illustrator-CS3-Wow-Book/dp/032151842X" title="The Adobe Illustrator CS3 Wow! Book (WOW!) " target="_blank">The Adobe Illustrator CS3 Wow! Book (WOW!)</a></strong><br />If you want to be the best with using Adobe’s Illustrator, you need this book. There are tons of lessons in this book to help you learn new tools. Ever wonder how to take a desaturated image and make it appear to be a color photo? Read and learn.</p> <p style="font-family: arial;"><strong> 26. <a href="http://www.amazon.com/Adobe-InDesign-CS3-Classroom-Book/dp/0321492013" title="Adobe InDesign CS3 Classroom in a Book" target="_blank">Adobe InDesign CS3 Classroom in a Book</a> </strong><br />This is a good book for beginners. Make sure to get the second printing, as the first as some typos!</p> <p style="font-family: arial;"><strong> 27. <a href="http://www.amazon.com/XHTML-Sixth-Visual-Quickstart-Guide/dp/0321430840" title="HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)" target="_blank">HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide)</a> </strong><br />You should know HTML, and probably XHTML and CSS as well. So learn it here, with this wonderful book! This is not for advanced students.</p> <p style="font-family: arial;"><strong> 28. <a href="http://www.amazon.com/CSS-Mastery-Advanced-Standards-Solutions/dp/1590596145" title="CSS Mastery: Advanced Web Standards Solutions" target="_blank">CSS Mastery: Advanced Web Standards Solutions</a> </strong><br />Authors Andy Budd, Simon Collison, and Cameron Moll have written the ultimate guide to CSS! Learn everything you wanted to know, and more – in this book.</p> <p style="font-family: arial;"><strong> 29. <a href="http://www.amazon.fr/Bulletproof-Web-Design-Flexibility-Protecting/dp/0321509021" title="Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)" target="_blank">Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS (2nd Edition)</a></strong><br />When you build a Web site, you want it to work. This book will help you learn how to get out all of the kinks and bugs from your site so that the widest possible audience can access it without flaws.</p> <p style="font-family: arial;"><strong> 30. <a href="http://www.seobook.com/" title="SEO Book" target="_blank">SEO Book</a></strong><br />When you have a Web site, you want traffic. You get that through search engine optimization (SEO). This is the only book you will ever need to master search engine optimization and you can download it!</p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7795159176952143782-2044321630202129693?l=jberradesign.blogspot.com'/></div>jberradesignhttp://www.blogger.com/profile/07060156737452461896noreply@blogger.com0tag:blogger.com,1999:blog-7795159176952143782.post-8134994648225425382007-12-27T13:26:00.000-08:002008-01-04T09:40:38.499-08:00I "heart" GESTALT<p class="MsoNormal" style=""><span style="color: rgb(0, 0, 128);"><span style="font-family:Book Antiqua;"><span style="font-size:6;">Gestalt Principles</span></span></span><span style=";font-family:";" > </span></p> <p class="MsoNormal" style="">http://desktoppub.about.com/od/gestalt/Gestalt.htm</p> <p><span style="font-family:Book Antiqua;"><span style="font-size:100%;"><span class="body">Gestalt is also known as the "Law of Simplicity" or the "Law of Pragnanz" (the entire figure or configuration), which states that every stimulus is perceived in its most simple form.</span><span style=";font-family:";" ><o:p> </o:p> </span></span></span></p> <p><span style=";font-family:";" ><span style="font-size:100%;">Gestalt theorists followed the basic principle that the whole is greater than the sum of its parts. In other words, the whole (a picture, a car) carried a different and altogether greater meaning than its individual components (paint, canvas, brush; or tire, paint, metal, respectively). In viewing the "whole," a cognitive process takes place – the mind makes a leap from comprehending the parts to realizing the whole, <o:p> </o:p> </span> </span></p> <p><span style="font-family:Book Antiqua;"><span style="font-size:100%;"><span class="body">We visually and psychologically attempt to make order out of chaos, to create harmony or structure from seemingly disconnected bits of information. </span><span style=";font-family:";" ><o:p> </o:p> </span></span></span></p> <p><span style="font-family:Book Antiqua;"><span style="font-size:100%;">The prominent founders of Gestalt theory are Max Wertheimer, Wolfgang Kohler, and Kurt Koffka. <o:p> </o:p></span> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" > </span></p> <p class="MsoNormal"><span style="color: rgb(0, 0, 128);"><span style="font-size:180%;"><span style="font-family:Book Antiqua;">1. Figure/Ground</span></span><span style=";font-family:";font-size:14;" ><o:p> </o:p></span></span></p> <p class="MsoNormal"><span style="font-family:Book Antiqua;"><span style="font-size:100%;">This principle shows our perceptual tendency to separate whole figures from their backgrounds based on one or more of a number of possible variables, such as contrast, color, size, etc.</span></span><span style=";font-family:";font-size:14;" > </span></p> <p class="MsoNormal"><span style=";font-family:";" ><span style="font-size:100%;">A simple composition may have only one figure. In a complex composition there will be several things to notice. As we look from one to another they each become figure in turn.<o:p> <img src="http://facweb.cs.depaul.edu/sgrais/images/Lec3/figureground.gif" align="left" border="0" height="209" width="216" /></o:p></span><span style="font-size:85%;"> </span> </span></p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"> </p> <p class="MsoNormal"><span style=";font-family:";" ><span style="font-size:100%;"> </span> </span></p> <p class="MsoNormal"><span style=";font-family:";" ><span style="font-size:100%;">The focus at any moment is the figure.<o:p> </o:p></span> </span></p> <p class="MsoNormal"><o:p> <span style=";font-family:";" > <a href="http://facweb.cs.depaul.edu/sgrais/images/Lec3/SkyandWater.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Lec3/SkyandWater_small.jpg" alt="SkyandWater.jpg (773533 bytes)" border="2" height="104" width="100" /></a></span><a href="http://facweb.cs.depaul.edu/sgrais/images/Lec3/SkyandWater.jpg"><span style="font-family:Book Antiqua;"> </span></a><span style="color: rgb(0, 0, 128);"><span style=";font-family:Book Antiqua;font-size:78%;" >M. C. Escher <i>Sky and Water 1</i></span> <span style=";font-family:Book Antiqua;font-size:78%;" >1938</span></span></o:p></p> <p class="MsoNormal" style=""><span style=";font-family:";" ><span style="font-size:100%;"> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/MOULIN%7E1.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/MOULIN%7E1_small.jpg" image="images/Gestalt/MOULIN~1.jpg" border="2" height="163" width="100" /></a> </span> <span style="color: rgb(0, 0, 128);font-size:78%;" >Henri de Toulouse-Lautrec</span></span></p> <p class="MsoNormal" style=""><span style=";font-family:";" ><span style="font-size:100%;">Everything that is not figure is ground. <o:p> </o:p> </span> </span></p> <p class="MsoNormal" style=""><span style="font-family:Book Antiqua;"><span style="font-size:100%;">As our attention shifts, the ground also shifts so that an object can go from figure to ground and then back.<br />Ground is sometimes thought of as background or negative space. <o:p> <span style=";font-family:";" > </span> </o:p></span></span></p> <o:p> <span style="font-family:Book Antiqua;">Figure-ground refers to the relationship between an object and its surround. Sometimes the relationship is stable, meaning that it is easy to pick out the figure from the ground. </span> <o:p> </o:p></o:p><p><span style="font-family:Arial,Helvetica,sans-serif;"> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/matisse_dance_moma.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/matisse_dance_moma_small.jpg" image="images/Gestalt/matisse_dance_moma.jpg" border="2" height="65" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/matisse_music.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/matisse_music_small.jpg" image="images/Gestalt/matisse_music.jpg" border="2" height="66" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/dance_hermitage.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/dance_hermitage_small.jpg" image="images/Gestalt/dance_hermitage.jpg" border="2" height="67" width="100" /></a> </span><span style="color: rgb(0, 0, 128);font-size:78%;" ><o:p> <span style="font-family:Book Antiqua;">Henri </span> </o:p><o:p> <span style="font-family:Book Antiqua;">Matisse</span></o:p></span></p> <p><span style="color: rgb(0, 0, 128);font-family:Book Antiqua;font-size:78%;" >La Danse (I)1909 8'6 1/2" x 12'9 1/2" (259.7 x 390.1 cm), </span></p> <p><span style="color: rgb(0, 0, 128);font-size:78%;" ><o:p> <span style="font-family:Book Antiqua;">La Musique 1910, </span> </o:p><span style="font-family:Book Antiqua;">Dance (II) 1910, 8'5 3/8" x 12'9 1/4" (260 x 389 cm)</span></span></p> <p><span style="color: rgb(0, 0, 128);font-family:Book Antiqua;font-size:78%;" >Dance (II) 1910, 8' 5 5/8" x 12' 9 1/2" (260 x 391 cm)</span></p> <p> <span style="font-family:Book Antiqua;"> Other times the relationship is unstable, meaning it is difficult to pick out the figure from the ground. Rarely, the relationship is ambiguous, meaning that the figure could be the ground or vice-versa.</span></p> <p> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Sky%20and%20Water%20II1938.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Sky%20and%20Water%20II1938_small.jpg" image="images/Gestalt/Sky and Water II1938.jpg" border="2" height="93" width="62" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/escher53.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/escher53_small.jpg" image="images/Gestalt/escher53.jpg" border="2" height="91" width="100" /></a></p> <p><span style="color: rgb(0, 0, 128);font-family:Book Antiqua;font-size:130%;" >Tips</span></p> <p><span style=";font-family:Book Antiqua;font-size:100%;" >Clearly differentiate between figure and ground in order to focus attention and minimize perceptual confusion.</span></p> <p><a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Ambassadeurs%20Aristide%20Bruant.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Ambassadeurs%20Aristide%20Bruant_small.jpg" image="images/Gestalt/Ambassadeurs Aristide Bruant.jpg" border="2" height="147" width="100" /></a></p> <p><span style="color: rgb(0, 0, 128);font-family:Book Antiqua;font-size:130%;" >Camouflage</span></p> <p><span style="font-family:Book Antiqua;">Camouflage is the deliberate alteration of figure-ground so that the figure blends into the ground. </span></p> <p> </p> <p><span style="font-family:Book Antiqua;">During the Gulf War, all tanks had to be repainted from a woodland camouflage pattern to a desert camouflage pattern because camouflage is terrain specific. That specificity is also evident when one goes to purchase camouflage clothing; it comes in several patterns, each best suited to particular environments or seasons.</span></p> <p><span style="font-family:Book Antiqua;">Camouflage material may have a single color, or it may have several similarly colored patches mixed together. The reason for using this sort of pattern is that it is visually disruptive. The meandering lines of the mottled camouflage pattern help hide the <b>contour</b> -- the outline -- of the body. When you look at a piece of mottled camouflage in a matching environment, your brain naturally "connects" the lines of the colored blotches with the lines of the trees, ground, leaves and shadows. This affects the way you perceive and recognize the person or object wearing that camouflage.</span></p> <p> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Cam3.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Cam3_small.jpg" alt="Cam3.jpg (105071 bytes)" border="2" height="66" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/phrynocephalusbig3.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/phrynocephalusbig3_small.jpg" image="images/Gestalt/phrynocephalusbig3.jpg" border="2" height="67" width="94" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/3a.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/3a_small.jpg" image="images/Gestalt/3a.jpg" border="2" height="67" width="88" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/2c.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/2c_small.jpg" image="images/Gestalt/2c.jpg" border="2" height="67" width="91" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Cam4.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Cam4_small.jpg" alt="Cam4.jpg (115674 bytes)" border="2" height="64" width="47" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Fridge.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/Fridge_small.jpg" alt="Fridge.jpg (90450 bytes)" border="2" height="64" width="24" /></a></p> <p><span style="font-family:Book Antiqua;">Grant Wood helped develop the US military's camouflage during World War I.</span></p> <p><a href="http://facweb.cs.depaul.edu/sgrais/images/Balance/american-gothic-large4.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Balance/american-gothic-large4_small.jpg" alt="american-gothic-large4.jpg (185958 bytes)" border="2" height="99" width="82" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/urban-camo-b.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/urban-camo-b_small.jpg" image="images/Gestalt/urban-camo-b.jpg" border="2" height="99" width="76" /></a></p> <p><a href="http://facweb.cs.depaul.edu/sgrais/images/waldo.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/waldo_small.jpg" alt="waldo.jpg (186184 bytes)" border="2" height="79" width="82" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/findtheman.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/findtheman_small.jpg" alt="findtheman.jpg (228993 bytes)" border="2" height="79" width="115" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/african.gif"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/african_small.gif" alt="african.gif (168230 bytes)" border="2" height="79" width="139" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/DaliImageDisparait_med.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/DaliImageDisparait_med_small.jpg" image="images/Gestalt/DaliImageDisparait_med.jpg" border="2" height="80" width="74" /></a> <span style="color: rgb(0, 0, 128);font-size:78%;" >Dali, "L'image disparait," 1938.</span></p> <p class="MsoNormal" style=""><o:p> <span style="font-family:Book Antiqua;"><a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/01Camouflage.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/01Camouflage_small.jpg" image="images/Gestalt/01Camouflage.jpg" border="2" height="61" width="100" /></a></span></o:p></p> <p><span style="color: rgb(0, 0, 128);font-size:180%;" ><span style="font-family:Book Antiqua;">2. Similarity</span></span><span style=";font-family:Book Antiqua;font-size:14;" ><o:p> </o:p> </span></p> <span style=""><span style=";font-family:Book Antiqua;font-size:100%;" >Gestalt theory states that things which share visual characteristics such as shape, size, color, texture, or value will be seen as belonging together in the viewer’s mind.<span style=""> </span></span></span> <p><o:p> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/1.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/1_small.jpg" image="images/Gestalt/1.jpg" border="2" height="92" width="97" /></a></o:p></p> <p><span style=""><span style=";font-family:Book Antiqua;font-size:100%;" >In the graphic below, the viewer is likely to discern a shape in the middle, though each individual object is the same color.</span></span></p> <p><a href="http://facweb.cs.depaul.edu/sgrais/images/Lec3/simShape.gif"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Lec3/simShape_small.gif" alt="simShape.gif (3641 bytes)" border="2" height="92" width="100" /></a> </p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Repetition of forms or colors in a composition is pleasing in much the same way rhythm is pleasing in music the forms aren't necessarily identical - there may be tremendous variety within the repetition, yet the correspondence will still be discernable.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Like static and dynamic tension a deliberate use of similarity in composition can impart meaning to the viewer that is independent of the subject matter of the image.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Similarity or repetition in an image often has connotations of harmony and interrelatedness, or rhythm and movement.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><o:p><span style=";font-family:Verdana;font-size:10;" > <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/artwork_images_478_163396_Ilse-Bing.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/artwork_images_478_163396_Ilse-Bing_small.jpg" image="images/Gestalt/artwork_images_478_163396_Ilse-Bing.jpg" border="2" height="70" width="47" /></a> </span><span style="color: rgb(0, 0, 128);font-size:78%;" ><span style="font-family:Book Antiqua;"> Ilse Bing</span></span></o:p></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• good composition: regardless of the subject matter, makes some use of similarity in arranging elements and space for aesthetic advantage.<o:p> </o:p> </span><o:p><span style=";font-family:Verdana;font-size:10;" ><br /><br /></span></o:p><span class="sign"><em><span class="signcouleur"><strong> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/repetition.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/repetition_small.jpg" image="images/Gestalt/repetition.jpg" border="2" height="75" width="100" /></a> <span style="color: rgb(0, 0, 128);font-family:Book Antiqua;" ><span style="font-size:78%;">Répétition d'un Ballet</span></span></strong></span><span style="color: rgb(0, 0, 128);font-family:Book Antiqua;font-size:78%;" >. 1874</span></em></span><span style="font-size:85%;"><span style="font-family:Verdana;"> </span> </span><o:p><span style=";font-family:Verdana;font-size:10;" > <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/52-18.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/52-18_small.jpg" image="images/Gestalt/52-18.jpg" border="2" height="70" width="93" /></a> </span></o:p><a href="http://facweb.cs.depaul.edu/sgrais/images/Collage/CG3.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Collage/CG3_small.jpg" image="images/Collage/CG3.jpg" border="2" height="71" width="70" /></a><o:p><span style="font-family:Book Antiqua;"><span style="color: rgb(0, 0, 128);font-size:78%;" > </span> </span></o:p><o:p><span style="font-family:Book Antiqua;"> <span style="color: rgb(0, 0, 128);font-size:78%;" >Carol </span> </span></o:p><o:p><span style="font-family:Book Antiqua;"> <span style="color: rgb(0, 0, 128);font-size:78%;" >Golemboski</span></span></o:p></p> <p class="MsoNormal" style=""><o:p><span style=";font-family:Verdana;font-size:10;" ><br /></span><span style="font-family:Book Antiqua;">In Edgar Degas' </span> <span style="font-family:Verdana;"> <em><span style="font-family:Book Antiqua;">The Millinery Shop</span></em><span style="font-family:Book Antiqua;"> notice the repetition of the circle motif. Circles represent objects such as hats, flowers, bows, the woman's head, bosom, and skirt, etc. The painting is a whole design of circles broken by a few verticals (the hat stand, the ribbons, the back draperies) and a triangle or two (the table, the woman's vent arm, and the front hat's ribbons).</span></span></o:p></p> <p class="MsoNormal" style=""><o:p><span style=";font-family:Verdana;font-size:10;" ><br /></span><span style=";font-family:Verdana;font-size:10;" > <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/The%20Millinery%20Shop.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/The%20Millinery%20Shop_small.jpg" image="images/Gestalt/The Millinery Shop.jpg" border="2" height="91" width="100" /></a></span><span style="font-size:85%;"><span style="font-family:Verdana;"> </span></span><span style="color: rgb(0, 0, 128);font-size:78%;" > <span style="font-family:Book Antiqua;">Edgar Degas The Millinery Shop. 1879-1884</span></span></o:p></p> <p><span style="color: rgb(0, 0, 128);font-size:180%;" ><span style="font-family:Book Antiqua;">3. Proximity</span></span><span style=";font-family:";font-size:14;" ><o:p> </o:p> </span></p> <span style="font-family:Book Antiqua;"><span style="font-size:100%;">The Gestalt law of proximity states that "objects or shapes that are close to one another appear to form groups". Even if the shapes, sizes, and objects are radically different, they will appear as a group if they are close together.</span></span> <p><a href="http://facweb.cs.depaul.edu/sgrais/images/Fruitbowl.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Fruitbowl_small.jpg" alt="Fruitbowl.jpg (18212 bytes)" border="2" height="72" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/mangoes.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/mangoes_small.jpg" alt="mangoes.jpg (33045 bytes)" border="2" height="71" width="109" /></a><b><span style=";font-family:";color:black;" ></span></b><b><span style=";font-family:";color:black;" > </span></b></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• refers to the way smaller elements are "massed" in a composition.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/XBBN0010AFS.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/XBBN0010AFS_small.jpg" image="images/Gestalt/XBBN0010AFS.jpg" border="2" height="72" width="63" /></a> <span style="color: rgb(0, 0, 128);font-size:78%;" >Bill Brandt </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Also called "grouping," the principle concerns the effect generated when the collective presence of the set of elements becomes more meaningful than their presence as separate elements.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/newman_gallows.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/newman_gallows_small.jpg" image="images/Gestalt/newman_gallows.jpg" border="2" height="72" width="58" /></a> <span style="color: rgb(0, 0, 128);font-size:78%;" >Arnold Newman</span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Arranging words into sentences or titles is an obvious way to group unrelated elements to enhance their meaning (it also depends on a correct order for comprehension).<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Grouping the words also changes the visual and psychological meaning of the composition in non-verbal ways unrelated to their meaning.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Elements which are grouped together create the illusion of shapes or planes in space, even if the elements are not touching.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Grouping of this sort can be achieved with:<o:p> </o:p> </span></p> <blockquote> <ul><li> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >Tone / value<o:p> </o:p> </span> </p></li><li> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >Color<o:p> </o:p> </span> </p></li><li> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >Shape<o:p> </o:p> </span> </p></li><li> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >Size<o:p> </o:p> </span> </p></li><li> <p class="MsoNormal"><span style=";font-family:";color:black;" >Or other physical attributes</span><span style=";font-family:";" ><o:p> </o:p></span> </p></li></ul> </blockquote> <p><span style=";font-family:Verdana;font-size:10;" ><br /><br /><br /></span><span style="font-family:Book Antiqua;">The painting by Thomas P. Anshutz of workers on their lunch break shows the idea in composition. The lighter elements of the workers' upper bodies contrast with the generally darker background. These light elements are not placed aimlessly around the composition but, by proximity, are arranged carefully to unite visually. Arms stretch and reach out to touch or overlap adjoining figures so the bodies form a large horizontal unit stretching across the painting. </span></p> <p><o:p><span style=";font-family:Verdana;font-size:10;" > <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/AnshutzT1880TheIronworkersNoontime2.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/AnshutzT1880TheIronworkersNoontime2_small.jpg" image="images/Gestalt/AnshutzT1880TheIronworkersNoontime2.jpg" border="2" height="69" width="100" /></a></span></o:p><span style="font-size:85%;"><span style="font-family:Verdana;"> </span></span><span style="color: rgb(0, 0, 128);font-size:78%;" ><span style="font-family:Book Antiqua;">Thomas P. Anshutz. </span><span style="font-family:Verdana;"> <em> <span style="font-family:Book Antiqua;">The Ironworkers' Noontime</span></em></span></span></p> <p><span style=";font-family:Verdana;font-size:10;" > <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/creation-adam.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/creation-adam_small.jpg" image="images/Gestalt/creation-adam.jpg" border="2" height="57" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/creation-adam-detail.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/creation-adam-detail_small.jpg" image="images/Gestalt/creation-adam-detail.jpg" border="2" height="56" width="148" /></a></span></p> <p><span style="color: rgb(0, 0, 128);font-size:78%;" ><span style="font-family:Book Antiqua;">Michelangelo, </span> <span style="font-family:Verdana;"> <em><span style="font-family:Book Antiqua;">Creation of Adam</span></em></span><span style="font-family:Book Antiqua;">, c. 1510. Sistine Chapel, Rome</span></span><span style="font-family:Book Antiqua;"><span style="color: rgb(0, 0, 128);font-size:78%;" >.</span></span><span style=";font-family:Verdana;font-size:10;" ><br /><br /></span><span style="font-family:Book Antiqua;">Michelangelo's Creation of Adam demonstrates the expressive power of proximity.</span></p> <p> </p> <p style=""><span style="color: rgb(0, 0, 128);font-size:180%;" ><span style="font-family:Book Antiqua;">4. Closure</span></span><span style=";font-family:";font-size:18;" ><o:p> </o:p> </span></p> <h3><span style="font-weight: normal;font-family:Book Antiqua;" ><span style="font-size:100%;">The satisfaction of a pattern encoded, as it were, into the brain, thus triggering recognition of the stimulus. This can involve the brain's provision of missing details thought to be a part of a potential pattern, or, once closure is achieved, the elimination of details unnecessary to establish a pattern match. <o:p> </o:p> </span> </span></h3> <p class="MsoNormal" style=""><span style=";font-family:";" ><span style="font-size:100%;"><o:p> </o:p> </span> </span></p> <ul><li> <p class="MsoNormal" style=""><span style=";font-family:";" ><span style="font-size:100%;">Closure is the effect of suggesting a visual connection or continuity between sets of elements which do not actually touch each other in a composition.</span></span> </p></li><li> <p class="MsoNormal" style=""><span style="font-size:100%;"><span style=""><span style="font-family:Book Antiqua;">The principle of closure applies when we tend to see complete figures even when part of the information is missing.</span></span><span style=";font-family:";" ><o:p> </o:p> </span></span> </p></li><li> <p class="MsoNormal" style=""><span style=";font-family:";" ><span style="font-size:100%;"> Closure occurs when elements in a composition are aligned in such a way that the viewer perceives that "the information could be connected."<o:p> </o:p></span> </span> </p></li></ul> <p><a href="http://facweb.cs.depaul.edu/sgrais/images/Lec3/closure.gif"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Lec3/closure_small.gif" border="2" height="100" width="100" /></a> <span style=";font-family:Book Antiqua;font-size:78%;" ><span style="color:black;">Kanizsa Illusion</span></span><span style=";font-family:";color:black;" ></span><span style=";font-family:";color:black;" > </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Imaginary lines called vectors, or shapes called counter forms, are generated by these relationships, which the eye understands as part of the composition even though there is "nothing there.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Vectors and counter forms exert forces and tensions that are as real in defining its underlying structure as the elements that are visible.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Linear vectors direct the path of the eye through the composition and determine where the eye will go once it is attracted by the prominent features of the composition.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• A vector can be straight or curved, depending on the relationships that form it.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Counter forms, (or negative spaces), determine to a great extent whether or not the composition will be perceived as a harmonious whole. Counter forms "echo" the positive visual elements with "similarity," or create powerful substructures that support and connect visible elements.<o:p> </o:p> </span></p> <o:p> </o:p><p><span style=""><span style="color: rgb(0, 0, 128);"><cite><span style=";font-family:Book Antiqua;font-size:85%;" ><a href="http://facweb.cs.depaul.edu/sgrais/images/Space/The%20Great%20Wave%20Off%20Kanagawa.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Space/The_Great_Wave_Off_Kanagawa_small.jpg" alt="The Great Wave Off Kanagawa.jpg (519964 bytes)" border="2" height="67" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Space/The%20Great%20Wave%20Off%20Kanagawa%20copy.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Space/The_Great_Wave_Off_Kanagawa_copy_small.jpg" alt="The Great Wave Off Kanagawa copy.jpg (519651 bytes)" border="2" height="67" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Space/The%20Great%20Wave%20Off%20Kanagawa%20copy%202.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Space/The_Great_Wave_Off_Kanagawa_copy_2_small.jpg" alt="The Great Wave Off Kanagawa copy 2.jpg (65074 bytes)" border="2" height="67" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Space/The%20Great%20Wave%20Off%20Kanagawa%20copy%203.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Space/The_Great_Wave_Off_Kanagawa_copy_3_small.jpg" alt="The Great Wave Off Kanagawa copy 3.jpg (65092 bytes)" border="2" height="67" width="100" /></a> <a href="http://facweb.cs.depaul.edu/sgrais/images/Space/Untitled-1.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/Space/Untitled-1_small.jpg" alt="Untitled-1.jpg (55795 bytes)" border="2" height="67" width="66" /></a></span></cite></span></span></p> <p><span style=""><span style="color: rgb(0, 0, 128);"><cite><span style=";font-family:Book Antiqua;font-size:85%;" >Katsushika Hokusai </span><span style="font-size:78%;">The Great Wave Off Kanagawa</span></cite><span style="font-size:78%;"><br />From "Thirty-six Views of Mount Fuji"; 1823-29 </span></span></span></p> <p class="MsoNormal" style=""> </p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Closure can be thought of as the tension or "glue" that holds a two-dimensional structure together.<o:p> </o:p></span></p> <p> </p> <p><span style="color: rgb(0, 0, 128);font-family:Book Antiqua;font-size:180%;" >5. <span style="">Good Continuation</span></span><span style=";font-family:";font-size:14;" ><o:p> </o:p></span><span style="font-family:Book Antiqua;"><span style="color: rgb(0, 0, 128);font-size:180%;" >(Continuity)</span></span><span style=";font-family:";font-size:14;" > </span></p> <p><span style=";font-family:";" ><span style="font-size:100%;">This Gestalt law states that learners "tend to continue shapes beyond their ending points". <o:p> </o:p> </span> </span></p> <p><span style="font-size:100%;"><span style=";font-family:";" >The edge of one shape will continue into the space and meet up with other shapes or the edge of the picture plane.</span><span style=";font-family:";" ><o:p> </o:p> </span></span></p> <p><span style=";font-family:";" ><span style="font-size:100%;">The example below illustrates that learners are more apt to follow the direction of an established pattern rather than deviate from it. <o:p> </o:p> </span> </span></p> <p><span style="font-size:100%;"><span style="font-family:Book Antiqua;"> We perceive the figure as two crossed lines instead of 4 lines meeting at the center.</span><o:p> </o:p></span> </p> <p><a href="http://facweb.cs.depaul.edu/sgrais/images/Lec3/Continuity.gif"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Lec3/Continuity_small.gif" alt="Continuity.gif (1632 bytes)" border="2" height="99" width="100" /></a></p> <p><span style=";font-family:Verdana;font-size:10;" ><br /></span><span style="font-family:Book Antiqua;">Continuity in the form of a line, an edge, or a direction from one form to another creates a fluid connection among compositional parts.<br /><br /><br />In Degas' drawing the line of the round tub starts at the bather's hairline, meets her fingertips, and joins the vertical line of the shelf where the brush handle overlaps. The circular shape of the bather's hips is tangential to the same shelf edge. The objects on the shelf barely touch and carry the eye from one to another.</span></p> <p><o:p><span style="font-family:Book Antiqua;"> <a href="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/degas59.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Gestalt/degas59_small.jpg" image="images/Gestalt/degas59.jpg" border="2" height="72" width="100" /></a></span></o:p><o:p> </o:p> <span style="font-family:Book Antiqua;"> <span style="color: rgb(0, 0, 128);font-size:78%;" >Edgar Degas, The Tub, 1886. Pastel</span></span><span style=";font-family:Verdana;font-size:10;" ><br /></span></p> <p> </p> <p><span style="color: rgb(0, 0, 128);font-family:Book Antiqua;font-size:180%;" >6. <span style="">Symmetry or Order</span></span></p> <p><span style=";font-family:";" ><span style="font-size:100%;">Symmetry states that the viewer should not be given the impression that something is out of balance, or missing, or wrong. </span></span></p> <p><span style=";font-family:";" ><span style="font-size:100%;">If an object is asymmetrical, the viewer will waste time trying to find the problem instead of concentrating on the instruction.<o:p> </o:p></span> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" > • Order has connotations of stability, consistency and structure.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• An orderly arrangement of elements has connotations that will be perceived either positively or negatively by a viewer depending on the purpose of the communication and the viewer's personality.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Utilitarian information (instructional or technical design) will be more effective if the presentation is orderly, especially if it must be comprehended quickly.<o:p> </o:p> </span></p> <ul><li> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >traffic signs<o:p> </o:p> </span> </p></li><li> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >sets of instructions<o:p> </o:p> </span> </p></li><li> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >reference books<o:p> </o:p> </span> </p></li></ul> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Texts and illustrative material may also need to be orderly; especially if the organization sponsoring the communication wishes to be perceived as orderly and well run (annual reports are typically clean, orderly documents).<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• People are accustomed to receiving information in a systematic and organized manner and will be frustrated by material that requires too much work to comprehend.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Some viewers associate order with institutional rigidity or social conservatism and will reject or be "bored" by communications that seem too highly structured.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• Developing judgment about audience preferences and tolerances with respect to order is central to the designer's task.<o:p> </o:p> </span></p> <p class="MsoNormal" style=""><span style=";font-family:";color:black;" >• The goal is to be structured and equally engaging.<o:p> </o:p></span></p> <p> </p> <p class="MsoNormal"><span style=";font-family:";" > </span><a href="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/taj5.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/taj5_small.jpg" image="images/212Lec3/taj5.jpg" border="2" height="63" width="44" /></a> <span style=";font-family:";" > <a href="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/taj4.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/taj4_small.jpg" image="images/212Lec3/taj4.jpg" border="2" height="62" width="122" /></a></span></p> <p class="MsoNormal"><o:p> </o:p><o:p> <a href="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/pinwheel7.jpg"><img src="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/pinwheel7_small.jpg" image="images/212Lec3/pinwheel7.jpg" border="2" height="96" width="98" /></a></o:p><o:p> <a href="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/pinwheelcons.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/pinwheelcons_small.jpg" image="images/212Lec3/pinwheelcons.jpg" border="2" height="95" width="77" /></a></o:p><o:p> </o:p><o:p> <a href="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/Pinwheel.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/Pinwheel_small.jpg" image="images/212Lec3/Pinwheel.jpg" border="2" height="94" width="100" /></a></o:p></p> <p class="MsoNormal"><o:p> <a href="http://facweb.cs.depaul.edu/sgrais/images/Proportion/Untitled-2232323.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/Proportion/Untitled-2232323_small.jpg" alt="Untitled-2232323.jpg (185940 bytes)" border="2" height="91" width="100" /></a></o:p><span style=";font-family:";" > </span> <o:p> <a href="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/pinwheel8.jpg"> <img src="http://facweb.cs.depaul.edu/sgrais/images/212Lec3/pinwheel8_small.jpg" image="images/212Lec3/pinwheel8.jpg" border="2" height="89" width="94" /></a></o:p></p> <i></i><span title="This claim needs references to reliable sources since February 2007" style="white-space: nowrap;"></span><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7795159176952143782-813499464822542538?l=jberradesign.blogspot.com'/></div>jberradesignhttp://www.blogger.com/profile/07060156737452461896noreply@blogger.com0tag:blogger.com,1999:blog-7795159176952143782.post-76247716132879849522007-12-20T13:21:00.000-08:002007-12-20T13:47:03.833-08:00Typography<h1 style="font-family:arial;"> <span style="font-size:100%;"><strong> <strong> <strong> <strong>5 Basic Rules on Typography </strong></strong></strong></strong><br /></span><div style="font-size:12px;"> <span style="font-size:100%;"><em>Contributed by <em> <em> <em> Granny's Mettle</em> </em></em></em></span></div> </h1> <p><span style="font-size:85%;"><span style="font-family:arial;">Whenever you get projects for designing graphics for different media materials, there are certain rules you need to know before venturing to the complexities and elaborate world of graphic design. </span><br /><br /><span style="font-family:arial;"> One of the elements considered in graphic design is typography. This is how you utilize and create your text to come out with a result that complements your images and design of the whole media material, whether it's for print or web. </span><br /><br /><span style="font-family:arial;"> For typography, here are five of the basic rules to follow (or to break, whichever suits your creativity at the moment): </span><br /><br /><span style="font-size:130%;"><strong style="font-family: arial;">Rule No. 1- DO NOT use all the fonts in one document.</strong></span><br /><span style="font-family:arial;"> Every designer has his or her own collection of fonts, which he or she uses for each design project. As one designer would say: "If you're a designer, it almost goes without saying that you own fonts- Lots of fonts." </span><br /><br /><span style="font-family:arial;"> Aside from the existing fonts in the software program being used, most designers have their own lists that were added to the already existing list. And because of the availability of so many fonts, one may be tempted to use as many, if not all of the fonts that he or she owns. </span><br /><br /><span style="font-family:arial;"> Always remember that simplicity is more attractive than disarray and confusion. When you start using many fonts in one document, the message most often get lost in the jumble. In addition, too many fonts can distract the reader from the original intent of the design- to get a message across. Nevertheless, this doesn't mean that you have to be dull and boring by sticking to the conventional "two-font rule", which states that you had to have one font for headings and another for text. So where's the creativity in that? Just make sure to have a reason why you want to deviate from the rule and chose to use the fonts. </span><br /><span style="font-size:130%;"><br /><strong style="font-family: arial;">Rule No. 2- "Serif type is easier to the eyes than sans serif."</strong></span><br /><span style="font-family:arial;"> There's an old principle in the graphics world that goes "Serif type is easier to read because the serifs draws your eye from character to character." Hence, sans serif type is oftentimes used for headings and short quantities of text. </span><br /><br /><span style="font-family:arial;"> Truth to tell, all fonts can be made readable (except, well, maybe for Wingdings) with the ideal design. With sans serif, although it needs more leading than serif type, it can give your documents a very modern look, and is the popular body text in Europe. </span><br /><br /><span style="font-size:130%;"><strong style="font-family: arial;">Rule No. 3- Putting two spaces after a period is a no-no.</strong></span><br /><span style="font-family:arial;"> In the olden times, when typewriters are the thingamajigs for writers, two spaces after a period was the rule to indicate the end of a sentence. </span><br /><br /><span style="font-family:arial;"> With the onset of technology, fonts have characters of their own, with different widths, that putting two spaces after a period is no longer needed. Sometimes, this rule can create a rather annoying flaw that creates a stop rather than help you pinpoint the end of every sentence. </span><br /><br /><span style="font-size:130%;"><strong style="font-family: arial;">Rule No. 4- DO NOT use all capital letters.</strong></span><br /><span style="font-family:arial;"> One designer said that when using all capitals in the text, there are no ascenders or descenders. The two are what makes it easy to identify the shape of a word. "The shape of almost every word becomes a rectangle, and it's harder to read." </span><br /><br /><span style="font-family:arial;"> But this doesn't also mean that you cannot use capital letters. Where can you use capital letters? Short phrases or headings do look attractive in all caps. Sans serif also works better in all caps. </span><br /><br /><span style="font-size:130%;"><strong style="font-family: arial;">Rule No. 5- DO NOT center large quantities of text.</strong></span><br /><span style="font-family:arial;"> The eyes go from left to right when reading. It's the way to go. It rapidly scans one line, then goes from the right side of the page back to the left side of the page. When text is centered, it makes it harder for the eyes to be told to find where the next text begins again on the left side of the page, and makes it easy for the reader to skip down lines of text. </span><br /><br /><span style="font-family:arial;"> This time, it's not too easy to bend the rules. The best way is still to save centering to headings that don't run more than several lines deep.</span></span></p><p><span style="font-size:85%;"><span style="font-family:arial;"><br /></span></span> </p> <p> <span style="font-size:85%;"><b style="font-family: arial;">About the Author:</b></span><br /><span style="font-size:85%;"><em style="font-family: arial;"><em> Granny's Mettle is a 30-something, professional web content writer. She has created various web content on a diverse range of topics, which includes digital printing topics, medical news, as well as legal issues. Her articles are composed of reviews, suggestions, tips and more for the printing and designing industry.<br /><br />Her thoughts on writing: "Writing gives me pleasure… pleasure and excitement that you have created something to share with others. And with the wide world of the Internet, it gives me great satisfaction that my articles reach more people in the quickest time you could imagine."<br /><br />On her spare time, she loves to stay at home, reading books on just about any topic she fancies, cooking a great meal, and taking care of her husband and kids.</em> </em></span></p><div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7795159176952143782-7624771613287984952?l=jberradesign.blogspot.com'/></div>jberradesignhttp://www.blogger.com/profile/07060156737452461896noreply@blogger.com0tag:blogger.com,1999:blog-7795159176952143782.post-2935749642633649632007-12-20T12:41:00.000-08:002007-12-20T12:44:31.117-08:00Welcome to JBlog!Greeting from Lawrence, KS . . .<br /><br /><span class="blsp-spelling-error" id="SPELLING_ERROR_0">JBerra</span> Design is here to offer beginners and novices a like, some <span class="blsp-spelling-corrected" id="SPELLING_ERROR_1">in site</span> to the world of graphic and web design. We will also share upcoming projects, news and links.<br /><br />We hope you enjoy our blog. Feel free to leave up notes or comments. We'd love to hear from you.<div class="blogger-post-footer"><img width='1' height='1' src='https://blogger.googleusercontent.com/tracker/7795159176952143782-293574964263364963?l=jberradesign.blogspot.com'/></div>jberradesignhttp://www.blogger.com/profile/07060156737452461896noreply@blogger.com0