Veerle's blog 3.0http://veerle.duoh.com/
Graphic and web design articlesenVeerle PietersCopyright 2016Wed, 16 Nov 2016 10:05:46 GMTResponsive web design basicshttp://feedproxy.google.com/~r/graphic-web-design/~3/QrilZ3AYZkU/responsive_web_design_basics
http://veerle.duoh.com/design/article/responsive_web_design_basics#When:10:05Just recently Adobe released the <a href="http://www.adobe.com/creativecloud.html">new Adobe CC 2017 updates</a> and part of that was a completely new <strong>Dreamweaver</strong> that includes an all-new code engine, completely refreshed user interface with selectable dark themes, support for modern web workflows such as CSS Preprocessors, and more. More after the jump…<div class="col234">
<h3>Adobe Dreamweaver CC 2017</h3>
<p>The new <a href="http://www.adobe.com/products/dreamweaver.html">Adobe Dreamweaver CC 2017</a> has been reimagined from the ground up taking clues from <a href="http://brackets.io/">Brackets</a>, their modern open source text editor. I've been a <strong>Dreamweaver</strong> user in the past but moved on when things started to evolve and Dreamweaver couldn't keep up. I must say that I am pleasantly surprised with this new version. There are a lot of good things in there that make me want to give it go. If you are curious like me on how the <strong>CSS Preprocessors</strong> work in Dreamweaver, here's a page that <a href="https://helpx.adobe.com/dreamweaver/using/css-preprocessors.html">explains it in detail</a>. One of the best ways to see what is possible with the new Dreamweaver CC 2017 release is by following a tutorial. A step-by-step walkthrough on how to create a <strong>responsive design</strong>. I've watched all videos and honestly Daniel Walter Scott did a wonderful job. It's worth following along, even if all this sounds new to you.</p>
<h3>Responsive web design basics</h3>
<p>Explore different design techniques for displaying content across mobile, tablet, and desktop browsers before you dive in to Adobe Dreamweaver to write the actual code.</p>
<iframe src="//video.tv.adobe.com/v/16522/?hidetitle=true&quality=6" title="Video Player" class="video-iframe video-iframe-full-width" width="710" height="399" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
<h3>Create a responsive menu</h3>
<p>Style the menu to make it easy for visitors to navigate your site on any type of device — mobile, tablet, or desktop. Here's <a href="http://learndownload.adobe.com/pub/learn/dreamweaver/create-responsive-navigation-menu.zip">the link to the files you'll need</a> for this tutorial (ZIP, 49MB).</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/responsive-menu-prism.jpg" alt="" height="399" width="710" class="noborder" />
<h4>1. Create a menu structure</h4>
<p>See why a mobile-first approach to web design is a good idea. Define a site to manage your files and assets, and then use HTML to create a header section that includes the logo and basic structure of your navigation.</p>
<iframe src="//video.tv.adobe.com/v/16523/?hidetitle=true&quality=6" title="Video Player" class="video-iframe video-iframe-full-width" width="710" height="399" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
<h4>2. Style the menu for mobile</h4>
<p>As of now, the main menu is a bulleted list with purple text. Let’s style it with CSS and adjust the layout for mobile screens.</p>
<iframe src="//video.tv.adobe.com/v/16524/?hidetitle=true&quality=6" title="Video Player" class="video-iframe video-iframe-full-width" width="710" height="399" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
<h4>3. Style the menu for tablet and desktop</h4>
<p>The menu layout will be different across mobile, tablet, and desktop screens. Find out how to use CSS media queries to change the layout for different devices. As a bonus, see how you can do real-time design while previewing on an actual device.</p>
<iframe src="//video.tv.adobe.com/v/16525/?hidetitle=true&quality=6" title="Video Player" class="video-iframe video-iframe-full-width" width="710" height="399" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
<h3>Create a responsive grid layout</h3>
<p>Define a responsive grid layout that allows the contents of your web page to scale across devices. Here's <a href="http://learndownload.adobe.com/pub/learn/dreamweaver/create-responsive-grid-layout.zip">the link to the files you'll need</a> for this tutorial (ZIP, 62MB).</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/responsive-grid-layout-adobe.jpg" alt="" height="399" width="710" class="noborder" />
<h4>1. Style the header image and text</h4>
<p>Dig deeper into HTML and CSS to organize your content into a grid of rows and columns that begins with a striking header image and engaging text.</p>
<iframe src="//video.tv.adobe.com/v/16526/?hidetitle=true&quality=6" title="Video Player" class="video-iframe video-iframe-full-width" width="710" height="399" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
<h4>2. Style text and image content</h4>
<p>Every web page needs text and images to convey a message. With the grid structure in place, now add and organize the rest of your web page content — text, images, color, and a footer.</p>
<iframe src="//video.tv.adobe.com/v/16527/?hidetitle=true&quality=6" title="Video Player" class="video-iframe video-iframe-full-width" width="710" height="399" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
<h4>3. Finish the responsive design</h4>
<p>The web design looks great on mobile devices, now let’s use CSS media queries to ensure your layout automatically adjusts when viewed on tablet and desktop screens. Once you’re done, that’s it — you have successfully created a responsive web page in Dreamweaver. </p>
<iframe src="//video.tv.adobe.com/v/16528/?hidetitle=true&quality=6" title="Video Player" class="video-iframe video-iframe-full-width" width="648" height="364" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen scrolling="no"></iframe>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/QrilZ3AYZkU" height="1" width="1" alt=""/>CSS, Tutorials,Wed, 16 Nov 2016 10:05 GMThttp://veerle.duoh.com/design/article/responsive_web_design_basics#When:10:05New Tycho album ‘Epoch’http://feedproxy.google.com/~r/graphic-web-design/~3/quKwlPjw-EE/new_tycho_album_epoch
http://veerle.duoh.com/design/article/new_tycho_album_epoch#When:16:23I’ve discovered <a href="http://blog.iso50.com/">Scott Hansen</a> as a graphic designer before I got to know about his music path as <strong>Tycho</strong>. I’ve always admired the simplicity in his work as a designer. He doesn’t do much design anymore except for his album art & T-shirts. It’s almost always something that I want to add to my <a href="http://veerle.duoh.com/inspiration">inspiration stream</a>.<div class="col234">
<h3>Epoch</h3>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/Tycho-Epoch-Artwork-770x770.jpg" alt="" height="695" width="695" />
<p>I’ve <a href="http://veerle.duoh.com/design/article/5_albums_from_2014_that_helped_me_get_inspired">written</a> about the importance of music in my work as a graphic designer in the past and Tycho plays a role in that. This fourth studio album ‘<strong>Epoch</strong>’ is a follow up to 2014’s ‘<strong>Awake</strong>’ and it also marks the tenth anniversary of the group’s debut as Scott points out in a Facebook post:</p>
<blockquote><p>I’m very pleased to announce the release of the fourth full length Tycho album, Epoch. 10 years ago next month the first Tycho record, Past is Prologue, was released and it’s been an incredible journey. There’s nothing I could possibly say to fully express my deep gratitude to all of you for making this past decade possible. I truly hope you enjoy this music and make it your own.
We finished the album less than a month ago and decided to forego the typical release schedule and just put the record out as soon as possible. We’re all very excited for you to be able to hear it so soon after it was completed.</p></blockquote>
<p>Only a few days ago I tweeted that I was looking forward to the album after listening to the single ‘Epoch’ quite a few times. I was kinda surprised to see it so quickly being released. I like Scott’s thinking about not holding it back.</p>
<blockquote><p>I’ve never been fond of handing in an album then waiting 4 months for it to be released. I wanted to be more connected to the people consuming the music. There is a kind of visceral fulfilment you get from sharing something that you’ve just created with other people. That’s a very satisfying feeling as an artist.</p></blockquote>
<p>I’ve only listened to the album once but I already know that it will be a regular when I’m on an inspiration hunt. It’s the kind of album to get your noice canceling headset on and escape into his dreamy world. You don’t have to take my word for it just have a listen yourself.</p>
<iframe src="https://embed.spotify.com/?uri=spotify%3Aalbum%3A0GXI4iAc5FshqWgIlaNAXO" width=“300” height=“380” frameborder="0" allowtransparency="true"></iframe>
<p>I bought my copy on <a href="https://itunes.apple.com/be/album/epoch/id1154577700">iTunes</a> but it’s also available on these services too.</p>
<ul>
<li><a href="http://shop.tychomusic.com/collections/epoch">ISO50 </a>(MP3 + Lossless)</li>
<li><a href="https://www.amazon.com/gp/product/B01LZHEHCJ">Amazon</a></li>
<li><a href="https://tycho.bandcamp.com/">Bandcamp</a></li>
</ul>
<h4>About the artwork</h4>
<p>As I mentioned before Scott worked as a <em>graphic designer</em> for 14 years before pursuing music full time. The artwork of <strong>Tycho</strong> has always been an important part of it all. Be sure to go read <a href="http://blog.iso50.com/34853/epoch-artwork-lineage/">Scott’s article</a> where he explains the meaning and origin of the artwork. A must read imho. Here’s a little excerpt.</p>
<blockquote><p>The sun disc, both literally and as an icon, has always been at the center of the artwork. From Sunrise Projector and on I’ve used the sun and circle as a metaphor for life; the sun being the life giver and the circle symbolizing the closed loop, the interconnectedness of the human experience with the physical world. I think the imagery tells a story that the music can’t fully articulate, and vice versa.</p></blockquote>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/quKwlPjw-EE" height="1" width="1" alt=""/>Inspiration,Fri, 30 Sep 2016 16:23 GMThttp://veerle.duoh.com/design/article/new_tycho_album_epoch#When:16:23How to create The Stranger Things intro in Adobe After Effectshttp://feedproxy.google.com/~r/graphic-web-design/~3/_QwkjvWXzCg/how_to_create_the_stranger_things_intro_in_adobe_after_effects
http://veerle.duoh.com/design/article/how_to_create_the_stranger_things_intro_in_adobe_after_effects#When:07:43There's a new show on <a href="http://www.netflix.com">Netflix</a> that is generating some buzz called <strong>Stranger Things</strong>. I haven't seen it yet but I have seen the opening credits. I'm interested in learning <a href="http://www.adobe.com/products/aftereffects.html">Adobe After Effects</a>. That's why I always try to analyse animations to discover how it's done. What follows are some great tutorials that explain the opening credits in detail.<div class="col234">
<img src="http://images.veerle.duoh.com/uploads/design-article-images/stranger-things-poster-netflix.jpg" alt="" height="1052" width="710" class="noborder" />
<h3>Tutorial part 1</h3>
<p>This tutorial covers how to make the opening 2 shots of the stranger things intro.</p>
<iframe width="710" height="399" src="https://www.youtube.com/embed/SwXIkePdEuM" frameborder="0" allowfullscreen></iframe>
<h3>Tutorial part 2</h3>
<p>This tutorial covers how to create the final shot of the intro where all the letters come together. Mostly focused on the effects.</p>
<iframe width="710" height="399" src="https://www.youtube.com/embed/Uw12TKTWK6s" frameborder="0" allowfullscreen></iframe>
<h3>Tutorial part 3</h3>
<p>This tutorial covers how to create the shot introducing the episode chapter number, and title.</p>
<iframe width="710" height="399" src="https://www.youtube.com/embed/A1E7zEHdwPQ?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
<h3>How the movement is done</h3>
<p>This part covers an in-depth analysis of how the letters come together at the end.</p>
<iframe width="710" height="399" src="https://www.youtube.com/embed/-2ZzuNnJLRA" frameborder="0" allowfullscreen></iframe>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/_QwkjvWXzCg" height="1" width="1" alt=""/>Tutorials,Mon, 08 Aug 2016 07:43 GMThttp://veerle.duoh.com/design/article/how_to_create_the_stranger_things_intro_in_adobe_after_effects#When:07:435 Hidden Gems in Photoshop CC 15.5 and morehttp://feedproxy.google.com/~r/graphic-web-design/~3/n2YVTEU0t9I/5_hidden_gems_in_photoshop_cc_15.5_and_more
http://veerle.duoh.com/design/article/5_hidden_gems_in_photoshop_cc_15.5_and_more#When:07:52You always know you'll learn something with the videos of Julieanne Kost.<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/photoshop15-5-screen.jpg" alt="" height="801" width="927" /></div>
<div class="col234">
<h3>What you'll learn</h3>
<p>Discover new features and enhancements made to Artboards including new background color properties and easier duplication of layers and layer groups, Adjustment layer support for Looks and Fill layer support for Patterns created in Capture CC, read-only Library Collaboration, and new export options for embedding color profiles and additional Artboard improvements.</p>
<iframe width="695" height="391" src="https://www.youtube.com/embed/tvGKut9yG-M?rel=0" frameborder="0" allowfullscreen></iframe>
<p><em>Note: because of the new background color support, Artboard backgrounds export as visualized on the canvas (i.e. if you see a background, you will get that when you export – you must set transparency to export as transparent)</em>.</p>
<p><em>The visual representation of “transparency” as a checkerboard works the same in Artboard documents as it does in regular canvases. Therefore, if you have changed your Preferences > Transparency & Gamut to None, then you will not see the checkerboard representing transparency in an Artboard. </em></p>
<h3>Select and Mask Taskspace</h3>
<p>Discover how the new Select and Mask taskspace in Photoshop CC makes creating selections and masks easier, more exact, and more efficient than ever before.</p>
<iframe width="695" height="391" src="https://www.youtube.com/embed/H5vT0lyKSTg?rel=0" frameborder="0" allowfullscreen></iframe>
<h4>Tool and Properties Shortcuts</h4>
<p>Below is additional information for working in the Select and Mask taskspace</p>
<ul>
<li>For the Quick Select (W), Lasso (L), and Brush (B) tools, Option (Mac) | Alt (Win) toggles Add To Selection to Subtract From Selection.</li>
<li>For the Quick Select (W), Lasso (L), and Brush (B) tools, Shift toggles Subtract from Selection to Add to Selection.</li>
<li>With the Lasso Tool selected, Option + Shift (Mac) | Alt + Shift (Win) toggles both Add To and Subtract From options to Intersect with Selection.</li>
<li>For the Refine Edge Brush (R), Option (Mac) | Alt (Win) toggles Expands Detection Area to Restore Original Selection.</li>
<li>In Select and Mask, painting with the Brush tool adds to or subtracts from the mask (it will not paint on the image).</li>
<li>Control + Option -drag (Mac) | Alt + right click -drag (Win) left/right to decrease/increase brush diameter.</li>
<li>Control + Option -drag (Mac) | Alt + right click -drag (Win) up/down to increase/decrease the hardness/softness of the brush.</li>
<li>Shift-click to paint a straight line between the first and subsequent clicks.</li>
<li>All of the View modes have their own shortcut (listed next to the name of the view). Plus, “F” cycles through the views while “X” temporarily toggles off all views.</li>
<li>If you create a selection in Photoshop, choose Select and Mask and then modify the selection, clicking “Clear Selection” removes all masking while clicking the Reset Workspace icon (to the left of the Cancel button) resets the selection to the state when Select and Mask option was chosen.</li>
<li>The first time you double-click on a Layer Mask in the Layers panel, Photoshop displays a dialog asking what you would like double clicking on a Layer Mask to do. You can choose between View Properties (in the Properties panel) or Enter Select and Mask. This behavior can be changed later in Preferences >Tools > Double Click Layer Mask Launches Mask and Select Workspace.</li>
<li>Select and Mask supports Birds Eye View for faster navigation within an image. When zoomed into an image, press and hold “H” (the image zooms out to fit in the window). Drag the zoom rectangle over the desired location and release the mouse. Release the “H” key – the image zooms to the chosen area and the selected tool remains unchanged. (Note: Birds Eye View requires GPU support.)</li>
</ul>
<h4>Additional advantages of the Select and Mask Taskspace:</h4>
<ul>
<li>Select and Mask should be faster than the previous Refine Edge option because Select and Mask takes advantage of GPU.</li>
<li>You no longer have to jump in and out of a modal state to refine the initial selection (using the Lasso, Quick Select, or Brush tools).</li>
<li>You don’t have to start with a selection, you can choose Select and Mask first and begin the selection process there.</li>
<li>After choosing Select > Focus Mask, you can choose to go directly to Select and Mask.</li>
<li>Select and Mask supports multiple undo, is actionable, and works with touch interface.</li>
</ul>
<h3>The Content-Aware Crop Tool</h3>
<p>When using the Crop tool to straighten a photo, use the new Content Aware option to intelligently fill in transparent areas with computer generated “Content aware” information in Photoshop CC. The video below demonstrates how.</p>
<iframe width="695" height="391" src="https://www.youtube.com/embed/Lqwf-3Wux0g?rel=0" frameborder="0" allowfullscreen></iframe>
<p><em>Note: the Content Aware technology has been improved throughout Photoshop including improvement in details, reduction in blur/smudge, improved color adaptation (now on by default), and performance increases of up to 3x faster than before!</em></p>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/n2YVTEU0t9I" height="1" width="1" alt=""/>Photoshop, Tutorials,Thu, 21 Jul 2016 07:52 GMThttp://veerle.duoh.com/design/article/5_hidden_gems_in_photoshop_cc_15.5_and_more#When:07:52A Field Guide to Freelancer Financeshttp://feedproxy.google.com/~r/graphic-web-design/~3/KzjkfYmepzE/a_field_guide_to_freelancer_finances
http://veerle.duoh.com/design/article/a_field_guide_to_freelancer_finances#When:09:16When I started freelancing back in the nineties there was no Internet to search for valuable resources. You either had someone that took the same jump into the deep end and advices you with his/her experience or you had to figure things out along the way. That’s essentially how I did it. A risky path with mistakes along the way. How times have changed… I finally had time to read a little book that I received from <a href="http://www.freeagent.com/">FreeAgent</a> some time ago.<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/FreeAgent-header.jpg" alt="" height="641" width="927" /></div>
<div class="col234">
<h3>Practical tips from designers, developers</h3>
<p>That little book is called ‘<a href="https://www.freeagent.com/fieldguide/">A Field Guide to Freelancer Finances</a>’ and is published by FreeAgent, an accountancy software provider from the UK. This little book has tips, reports, real life stories and more, so let’s have have a look at what you’ll find inside.</p>
<h3>Setting off</h3>
<p>The book starts with the most difficult part of freelancing, pricing your work. It’s a subject where everybody struggles I think because it’s never easy.</p>
<h4>Using the break-even point to price</h4>
<p>This section offers practical advice to help you in finding your approach to pricing. The first part is figuring out how much costs you will have. <a href="http://maban.co.uk/">Anna Debenham</a> offers some really good tips here.</p>
<h4>Beyond break-even: planning your price</h4>
<p>This part deals with knowing what to charge, one of the hardest things to figure out. Cole Henry breaks things down based on his own experiences when he started freelancing in 2011. There’s also an indication that includes examples of what other freelancers charge in UK. This differs of course from country to country because some are more expensive to live in than others.</p>
<h4>How I take the uncertainty out of fixed-price projects</h4>
<p>I mostly worked with fixed pricing as well and it’s true I have been burned by undercharging because of all sorts of variables and unknowns. Daniel Howells offers some really valuable info here in how you can break things down. Especially the info about giving out detailed estimates.</p>
<h4>My biggest pricing mistake</h4>
<p>These are quotes from designers and developers with their biggest mistakes.</p>
<h4>My best pricing tip</h4>
<p>Same as above but in this instance it’s about pricing tips.</p>
<h3>Building shelter</h3>
<p>In this chapter you’ll learn from other freelancers about their techniques for getting paid and also practical tips for handling worst-case scenarios. It’s indeed not so easy as money is rolling in and sit back and relax. One of the things that many people hate is the uncertainty of being a freelancer. You never know what next month will bring. Will work come in? Will all invoices be paid on time etc.</p>
<h4>Creating a stormproof invoicing process</h4>
<p>A practicle hand on approach explained by Anna Debenham. It deals with payment terms, like due in 30 days and what other essential information that needs to be on the invoice. Some parts are very UK oriented but overall it arms you with ‘need-to-know’ knowledge.</p>
<h4>My invoicing terms</h4>
<p>This little section contains a few tips from freelancers. I have my own rules. For example I never work for the government because they are lousy payers with terms ranging from 60 to 90 days and more. Most of the time they also require <a href="http://www.nospec.com/">Spec work</a> before they decide if they will hire you. I’ve seen requests for proposals that went as far as demanding revision work on the free design. Imagine that! All my payment terms are 50% before the project commences and the other 50% upon completion. Smaller jobs for longtime clients are payable within 30 days.</p>
<h4>How do other freelancers invoice?</h4>
<p>Small piece of information on fellow freelancers’ invoicing terms, whether or not they’re using contracts and what unit of time they charge for.</p>
<h4>Credit control for freelancers</h4>
<p>As a freelancer, your time is your credit. Each time you complete work for a client without being paid upfront, you are extending credit to that client. This section has some tips on how to minimise the risks and a few links to do a basic credit check on a potential client. Not sure if those will work outside the UK though. One of the better tips in here is to invoice regularly and not between work gaps, or weeks after the work has been done. I’ve fallen in this trap too and now try to stick to a regular invoicing schedule so cash keeps coming in.</p>
<h4>Late payments in the web industry</h4>
<p>Small survey piece of what’s getting paid looks like for any UK web designer and developer.</p>
<h4>How I chase late payments</h4>
<p>Absolute the worst part of being a freelancer. Even when you have a reliable invoicing process you still will get the occasional client who pays late, or worse -refuses to pay. There are a few quotes in here with some tips and a few email templates on how to formulate it.</p>
<h3>Keeping warm</h3>
<p>This chapter of the book focuses on planning, cash flow, and helping you identify what really matters in your business finances.</p>
<h4>Overcoming a fear of finances</h4>
<p>This part starts with an article by Paul Boag. I know Paul from my work for his Digital Adaptation book published by Smashing Magazine. Paul always explains things with clarity and that’s the case here too. He tells his personal story of leaving the agency he had been running with 2 co-founders and why it took so long before he decided to strike out on his own. Paul explains the five numbers that helped him to stay in control of his business finances. Those numbers are:</p>
<ul>
<li><strong>Retained profit</strong></li>
<li><strong>Aged Debtors report</strong></li>
<li><strong>Pipeline and forecast</strong></li>
<li><strong>Cash flow</strong></li>
<li><strong>Projected tax bill</strong></li>
</ul>
<p>He also mentions some of the tools he’s using that are helpful in running a business.</p>
<h4>Accounting reports and what they will tell you</h4>
<p>Accounting reports help you find out how your business is doing financially. In this little section there’s an introduction to the reports that are likely useful as a freelancer.</p>
<h4>How to plan your cash flow for holidays and long breaks</h4>
<p>A section by <a href="http://lefft.com/">Paddy Donnelly</a> where he talks about his three-month trip around South America. He explains how he planned everything for such a long break so he would be able to enjoy the amazing experience. Paddy guides you through the various steps you should consider if you are planning a long break. It’s an interesting read.</p>
<h4>Top five finance mistakes I see from freelancers.</h4>
<p>Sarah Solo highlights five things in this section. Each one is explained in more detail. They are:</p>
<ul>
<li><strong>Not keeping on top of bookkeeping records</strong></li>
<li><strong>Not having a personal tax plan in place</strong></li>
<li><strong>Not making the distinction between your personal account and business account</strong></li>
<li><strong>Mixing up out-of-pocket expenses and costs</strong></li>
<li><strong>Not keeping a check on dividend withdrawals</strong></li>
</ul>
<p>Sarah ends with a top tip for freelancers. My personal tip would be to get an accountant to help you because it is impossible to grasp all the need-to-know info on tax and other government related financials. When you keep your bookkeeping things organised and well prepared the accountant will need less time and will be cheaper. Sounds logical but I’ve heard stories about dropping off a shoebox filled with paper and an accountant that has to match everything. A recipe for a huge bill. Better to be methodological as it will not only save money but time as well.</p>
<h3>Surviving the elements</h3>
<p>The last big chapter has guides to help you spot the taxes you know about before they blow in, as well as tips and techniques to help you make the most -or at least- of your tax payments.</p>
<h4>Taxes and charges for freelancers</h4>
<p>This chapter outlines the taxes and other charges that freelance web designers and developers should look out for.</p>
<h4>Freelancers and the VAT Flat Rate Scheme</h4>
<p>This section is only interesting if you are living in the UK.</p>
<h4>The tax that caught me out</h4>
<p>We all pay taxes and it’s often hard to predict what is coming. That’s why it’s so interesting to have an accountant to help you with this. He or she calculates exactly what you will owe and he or she can advice on what’s the best approach to pay as little as possible. They also know exactly how everything works internationally. That can become complicated believe me, especially with VAT. This section contains a few cautionary tales from freelancers who have been caught out in the past.</p>
<h4>Costs, expenses, and claiming tax relief</h4>
<p>When you’re talking about “<em>expenses</em>”, “<em>costs</em>” and “<em>claiming</em>” them, sometimes things can get confusing. This is a quick guide that explain the differences. Here it is important to know that rules for this differ from country to country.</p>
<h4>A-Z of claiming expenses</h4>
<p>An interesting breakdown of the common business costs and expenses. However be aware that this is also very UK oriented. There are many similarities as far as I noticed but the differences will be in the amount or precentage you can deduct. For example a car is not 100% deductible in Belgium.</p>
<h4>How to calculate tax relief for home working expenses</h4>
<p>The last section deals with working from home and discusses the most popular methods of dividing things up as recommended by accountants. This section is also very UK oriented but you get an idea of how it works. You just have to remember that these differ from country to country.</p>
<h3>Available as a free e-book</h3>
<p>This finance guide for designers and developers is available for <a href="https://www.freeagent.com/fieldguide/">free as an e-book</a> if you supply your email address. I personally think it is worth it as it contains valuable information.</p>
<p>I’m not a <strong>FreeAgent</strong> user as I’m currently using <a href="https://www.marketcircle.com/billingspro">Billings Pro</a> to do all my time-tracking and invoicing. I just set up a 30 day demo but it didn’t started very well with the difference between Belgium and the UK. We use <em>€20.100,70</em> to differentiate the numbers and they use <em>€20,100.70</em> and there’s no option under the ‘settings’ and ‘country options’ to change this. Something very basic that should be right from the beginning when you select your country imho.</p>
<p>Another concern is the invoice templates. I’m very picky on how things look and I don’t see something in there that would be suitable and match what I’m using now. On the back of invoices I also have the terms of sale.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/invoice-1a.jpg" alt="" height="1005" width="710" />
<p>There aren’t many options to design your own except by using CSS. For me that’s a deal breaker as I want to use my own design and I don’t want to spend hours trying to re-create it as a CSS design with unpredictable outcome. Even if I would, the PDF renderer doesn’t support CSS3 properties. I’m also using my own custom font ‘<a href="https://typekit.com/fonts/brandon-grotesque">Brandon Grotesque</a>’ and that font isn’t on their servers when you want to generate a PDF. <a href="http://www.freeagent.com/support/kb/invoicing/css-guide-for-invoice-templates">Here’s the guide</a> for creating customs invoices. But hey that’s just me and that doesn’t mean you shouldn’t check it out as many of its features look very useful and handy to help run your freelance business. There’s a <a href="http://www.freeagent.com">30-day trial</a> without the need for a credit card.</p>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/KzjkfYmepzE" height="1" width="1" alt=""/>Reviews,Thu, 16 Jun 2016 09:16 GMThttp://veerle.duoh.com/design/article/a_field_guide_to_freelancer_finances#When:09:16My process of creating the Arriva web sitehttp://feedproxy.google.com/~r/graphic-web-design/~3/8t5CRRIVsTg/my_process_of_creating_the_arriva_web_site
http://veerle.duoh.com/design/article/my_process_of_creating_the_arriva_web_site#When:13:50Just a while ago I wrote about a cool project I finished for a small start up company called <a href="http://arriva.cc">Arriva</a>. I shared <a href="http://veerle.duoh.com/design/article/the_design_process_of_the_arriva_logo">the logo design process</a> back then. Today I’ll talk about the design of the web site and I’ll share how I get started with my coding, how I prepare the different assets, which tools I use, and how I organise my files, my CSS (or better put SCSS) in particular.<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-website-header.png" alt="" height="456" width="927" /></div>
<div class="col234">
<h3>Short introduction</h3>
<p>Arriva is all about cycling and coffee. It’s three things in one: a mobile coffee bar, a shop selling small but useful bike gadgets for cyclists, and it’s also a bike repair service. With their Arriva-caravan, <em>’Eddy’</em> (named after <strong>Eddy Merckx</strong>, best cyclist of all times), Arriva can be found on several cycling events serving coffee, or hosting an event themselves around cycling on different places.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/eddy-approves-arriva.jpg" alt="" height="464" width="695" />
<h3>Briefing</h3>
<p>There wasn’t a huge briefing for this project since this is a rather small and straightforward project. Apart from the design style, which was discussed when I designed the logo, the need for the Arriva site came down to a small but very inviting site, with a blog to post regular updates about their events, and announcements on future events, with the option of a contact form to hire Arriva, and a way to <a href="http://email.arriva.cc/h/i/F315587D3291D4FB">subscribe</a> to the Arriva newsletter to be in the loop about their future events, plus keeping in mind that the site could be expanded in a later phase with an online shop. The site needed to be mobile friendly, which I translated into a full responsive design.</p>
<h3>Wireframes</h3>
<p>Even though the site’s design would be pretty basic and straightforward, I decided to mockup a simple wireframe for the main page first in <a href="http://www.adobe.com/products/illustrator.html">Adobe Illustrator</a> before jumping directly into <a href="http://www.adobe.com/products/photoshop.html">Photoshop</a>. This always helps me in figuring out how all the elements of the page could be laid out. During this stage, I’m already <em>a little bit</em> (if you can call it that) in <em>’design’ mode</em>. As a designer I can’t help myself visualising the whole picture in my head while doing this layout exercise, because that’s how I see this phase. Very simply put, I play around with lines and boxes on the page.</p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-website-wireframe.png" alt="" height="1296" width="927" /></div>
<div class="col234">
<p>A few items such as the logo, and the social media icons in the footer are already in their final state since they’re designed earlier in the project. The only thing that needed a bit more thinking was the menu: how will it be laid out on mobile? I didn’t want to go for a sidebar menu, because I like the centered aligned flow. So I decided not to break this and go for something centered as well, collapsable, with an option to close it again. It would change into this type of menu as soon as the screen didn’t have enough room anymore to show all menu items. The 3 sections below with the circle present the 3 services Arriva offers. The text would flow centered below the circles at a point as soon as the text can’t flow nicely to the left or right of it. I envisioned 3 big icons for each service: mobile coffee bar, online shop and bike repair service placed into a circle.</p>
<h3>Design</h3>
<h4>The caravan</h4>
<p>I started with the most creative part, namely the illustration of the caravan. This illustration would then also be converted into a simplified version to use as an icon.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-website-illu-caravan-1.png" alt="" height="440" width="695" />
<p>While I was working on this, the lettering of the caravan itself was in ‘production’. The lay-out of the lettering on the caravan was done by the lettering company, though I did deliver them the different design elements, such as the A symbol, the triangular background pattern with random red triangles in etc. They did a great job placing that A so prominently over the door of the caravan. So in a later phase I adopted this look into my illustration.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-website-illu-caravan-2.png" alt="" height="440" width="695" />
<h4>The icons</h4>
<p>Then I moved on to the design of the icons. Initially I drew both the shop and the mobile coffee bar from the sideview of the caravan, with the coffee bar being the one from the front door view. That didn’t really work, since both icons looked too much alike, and since the side of the coffee bar, is actually the side of how I drew the shop icon.</p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-website-icons-1.png" alt="" height="313" width="927" /></div>
<div class="col234">
<p>So I decided to use that one for the mobile coffee bar and draw the shop icon from the back view of the caravan, adding the word ‘shop’. As for the bike repair service, I let myself be inspired by the great icon set by <a href="https://twitter.com/webalys">Vincent Le Moign</a> called <a href="http://www.streamlineicons.com/preview-ultimate.html">Streamline</a>, by combining two icons into one and adding a <em>’bicycle’</em> touch to it. The more ‘generic’ looking caravan icon would also be used as a divider illustration in the design.</p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-website-icons-2.png" alt="" height="313" width="927" /></div>
<div class="col234">
<h4>Homepage</h4>
<p>Once I had these elements ready, I was all set to get started with the homepage design. Initially my client suggested the idea of using the caravan as a central element in the design, maybe in a pencil sketched kinda style, and have the navigation on the caravan itself. The user would click on the window or door etc. a bit like the type of interaction we used to know in the earlier days of the web where Flash would do the heavy lifting of all the interactions and animations needed. In a way I liked this idea, but reality told me this wouldn’t be a good option, not for this era of time. And frankly I wouldn’t have a clue of how to do (code) it either. I know you can do a lot with SVG and CSS these days, but we’re talking about rather complex animations and interactions. I considered there would be way too many obstacles to make it work for a full responsive design, and there was of course the budget too. It just seemed like an impossible job to me anyhow.</p>
<p>The look for the site I envisioned was light, and clean, with a playful touch and a subtle animation, using only red, black and different tones of grey. The illustration of the caravan and the icons would suit perfectly and I could also use the elements I already previously created for the <a href="https://dribbble.com/shots/2394286-Arriva/attachments/461915">t-shirt design and banner</a>: the mountain landscape with the road and the triangular pattern.</p>
<h4>Artboards, SmartObjects & Layercomps</h4>
<p>In Photoshop I’ve used different artboards for each version: desktop, tablet and smartphone. Then I also used 2 Layercomps to show the menu in open and closed state on mobile. For the logo I used an (embedded) SmartObject placed from an Illustrator file. Same for the caravan illustration. The entire header illustration is one embedded SmartObject, which includes the caravan illustration as one linked SmartObject. Since I did small updates on the caravan during the design process, I only had to update it in the SmartObject of the header illustration, and also in the main Photoshop file where I also ‘placed’ this caravan. This way my Photoshop file stayed up-to-date with the right caravan illustration across all artboards.</p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-website-photoshop-design.png" alt="" height="814" width="927" /></div>
<div class="col234">
<p>You notice when a SmartObject needs to be updated when the SmartObject layer shows yellow warning triangle. Then you update this SmartObject via the Properties panel by using the 2nd mouse button to reveal the contextual menu and choose ‘update’. I usually use linked SmartObjects for more extended web site designs (or UX designs) where I need to create a lot of pages with repeating elements such as footer, header, etc. In some of them I create different Layercomps for different states, such as navigation or menu states.</p>
<p>I wrote an <a href="http://veerle.duoh.com/design/article/using_linked_smartobjects_in_combination_with_layercomps_in_photoshop_cc">article about using linked SmartObjects in combination with Layercomps</a> on my blog just a little while ago. These days I also use different artboards for each page, so in some cases you could use embedded SmartObjects instead. It all depends whether you’ll be using this same item in other files as well. Luckily you have the flexibility to convert a SmartObject from embedded into a linked one at all times.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-website-1.png" alt="" height="516" width="695" />
<h3>Preparing files for coding</h3>
<h4>SVG icons</h4>
<p>Before jumping into the CSS & HTMl markup, I’m preparing the different assets first. I’ve saved all the icons in SVG format, and made sure that all the paths are ‘cleaned’ up. I made sure that all compound paths were expanded into 1 single path. I also made sure the dimensions of the document has the size of the icon itself. Once all the icons are saved to SVG, I use <a href="http://grumpicon.com">Grumpicon</a> to generate an SVG sprite to be used as CSS background images. All you have to do is drag and drop your SVG files, and Grumpicon generates all the necessary CSS code for you.
<a href="https://sarasoueidan.com">Sara Soueidan</a>’s chapter about <a href="https://www.smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/">Mastering SVG for Responsive Web Design</a> helped me a lot in understanding SVG better. I can definitely recommend <a href="https://www.smashingmagazine.com/2015/03/real-life-responsive-web-design-smashing-book-5/">Smashing Book 5</a> by Smashing Magazine.</p>
<h4>Illustrations</h4>
<p>The logo, logo icon, all icons (social media, navigation arrow buttons…), the rebus items, clouds, pattern and divider elements, were all saved as SVGs. However for the illustration of the mountains and the caravan this was not the case. These illustrations are vector-based, but they are rather heavy and complex and not ideal to save as SVG. They would be way too heavy in size. I saved both the header illustration, which contains the mountains and the caravan into a PNG file, and also the illustration of just the caravan. Both were also saved in 3 different sizes. So I saved a x2 and x3 version of both.</p>
<h4>Setting up the structure</h4>
<p>What I also usually do right before starting to code is setting up my folders structure. While I save and export my assets, I create the necessary folders. I usually use this basic structure to start with:</p>
<ul>
<li><strong>IMG</strong> : contains all the images that are embedded as ‘img’ in my HTML markup</li>
<li><strong>CSS</strong> : contains all my css files with ‘styles.css’ being my main file, but at the end of the job I ‘minify’ all the css files into one ‘styles-minified.css’ file</li>
<li><strong>JS</strong> : stores all the javascript files, but also here I try to limit the amount of files to be loaded into the HTML</li>
<li><strong>SCSS</strong> : contains all my SCSS (<a href="http://sass-lang.com/">Sassy CSS</a>) files (see further below for more)</li>
</ul>
<p>The other folders in place are usually sections of the site, and are created during the coding phase.</p>
<h3>Coding</h3>
<h4>Perch CMS</h4>
<p>Since this is a small web site, I decided to choose <a href="https://grabaperch.com/">Perch CMS</a> again to make the site flexible for small updates. Perch also has a blog module, so I knew I would be fine with this light weight CMS. It’s the 2nd site I’ve used Perch so far. I’ve also used it for <a href="http://veerle.duoh.com/design/article/tuinen_de_korenbloem_a_small_website_using_perch_cms">Tuinen De Korenbloem</a>, but that was a couple of years ago already and since then things have been improved and expanded. The blog module for one, and the fact that you can work with a feature called ‘blocks’ is something that I really like.</p>
<h4>Tools</h4>
<p>Once the design was ready and approved I started with the front-end HTML & CSS coding work. These days I’ve been really focussed on pure design work, so working on this project brushed up my coding skills a bit. I’ve always been a huge fan of <a href="http://macrabbit.com/espresso/">Espresso</a>. I think it’s a fantastic app. It’s the application I’ve been using to code all my HTML & CSS in the past couple of years. This time however, I had my reasons to go off my beaten path and switch to <a href="https://panic.com/coda/">Coda</a> instead.
It was with pain in my heart since I have a special bond with Espresso: it’s Belgian, and I personally ‘know’ the creator, plus <a href="http://www.duoh.com/news/article/the-process-behind-the-espresso-illustration/">I designed</a> the <a href="http://www.duoh.com/graphics/portfolio/Espresso-startscreen-illu01.jpg">application’s startup cover illustration</a>.</p>
<h5>Espresso & Coda</h5>
<p>Since I use SCSS (Sassy CSS) to write my CSS, I use <a href="https://incident57.com/codekit/">Codekit</a> to compile my .scss files into CSS. Unfortunately (at least at that time) Espresso was slow in compiling and previewing the HTML pages. It always took a couple of seconds for each update and I just lost too much time. Not sure how Espresso deals with this action now since I’m talking months ago now, and I haven’t checked since then. So maybe this issue is solved, and it goes way smoother now. Coda previews the compiled page as good as instantly. It took me a bit to get used to the application. I really missed Espresso’s <a href="http://macrabbit.com/espresso/"><strong>’Web Preview with X-ray’ feature</strong></a>. As a designer, I can’t think of any better way to inspect padding, margins, borders,… on an element, to do edits on it and see it all live happening. This feature is just a ‘life’ saver for me. I hear you say, yeah you can do this too in Coda or in a browser even… but in Espresso it is so easy, so clean, and very self explanatory and user-friendly. It’s a totally different experience. I don’t have to deal with the ‘mambo jumbo’ of tabs and other stuff you get to see in a typical debugger. To me that’s all noise. Stuff I don’t need, and don’t have a clue what it does or what it’s for. It feels like I have to swim through an ocean of code, and functions to get to the part that I want. I always tend to open Espresso if I need to evaluate CSS or HTML markup. It’s just more focussed to my needs, it feels like a breeze of fresh air.</p>
<h4>Organisation of my files</h4>
<h5>HTML files</h5>
<p>Since this is (almost as good as) a <em>’one page’</em> design, I don’t have many HTML pages. Apart from the homepage, there is a contact page, and a couple of blog pages.</p>
<h5>SCSS files</h5>
<p>As I mentioned before I use SCSS which is compiled via CodeKit into regular CSS. My SCSS is split up in different files or so called <a href="http://sass-lang.com/guide">SASS</a> partials. Working with Sass partials makes it more flexible and easier to maintain. They’re named with a leading underscore. Working like this is a way to keep a good overview on things which makes it more efficient to maintain. After reading <a href="http://csswizardry.com/">Harry Roberts</a>’ <a href="http://cssguidelin.es">’High-level advice and guidelines for writing sane, manageable, scalable CSS’</a> I learned a few things here and there, and tried to put them into practice for this project. I usually split things up like this (listed in alphabetical order):</p>
<ul>
<li><strong>_colors.scss</strong></li>
<li><strong>_global.scss</strong></li>
<li><strong>_helpers.scss</strong></li>
<li><strong>_modules.scss</strong></li>
<li><strong>_normalize.css</strong></li>
<li><strong>_typography.scss</strong></li>
<li><strong>styles.csss</strong></li>
</ul>
<p>My ‘main’ CSS file is styles.scss. The first lines of code in this file imports the other files. It starts with:</p>
<code><pre>@import “normalize”;
@import “global”;
@import “helpers”;
@import “colors”;
@import “typography”;
@import “modules”;</pre></code>
<p>The order of how these files are imported is important. <strong>’normalise’</strong> contains basic and rudimentary CSS code in case the web site would be viewed with a browser that supports as good as nothing of what the modern browsers support these days. It helps making the site accessible and browsable in these kind of browsers.</p>
<p>The <strong>’helpers’</strong> partial contains a set of code snippets that are used to <em>help</em> me solve a certain layout problem. One of them is usually this <strong>’clear fix’ mixin</strong>:</p>
<code><pre>@mixin clearfix() {
&:before, &:after {
display: table;
content: “ “;
}
&:after {
clear: both;
}
}</pre></code>
<p>Next is the <strong>’global’</strong> SCSS file containing a mixin that manages my <a href="https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/">responsive breakpoints</a> written by <a href="http://hugogiraudel.com">Hugo Giraudel</a>. It uses SASS maps where you can easily enter the breakpoint values that work best for your design and layout.</p>
<p>Then the <strong>’colors’</strong> SCSS is imported including all color values used in the site. First listed as variables, and then below all color related SCSS code ordered in a specific way so I can easily find my way. In case the red would change to orange, I only edit the hex number of <em>$color-highlight</em> and everywhere this color is used it will be automatically updated.</p>
<p>The <strong>’typography’</strong> file contains all my typographical code for the site. I use a responsive solution that uses SASS maps, based on this article about <a href="https://www.smashingmagazine.com/2015/06/responsive-typography-with-sass-maps/">’Responsive Typography With Sass Maps’</a> on Smashing Magazine.</p>
<p>The last partial that gets imported is named <strong>’modules’</strong>. This contains special code that is needed to make the menu slide up and down on mobile devices, or the code needed for the animation of the rebus, the arrow on the bottom right that makes you jump back up again etc.</p>
<p>It might seem all a bit overkill for such a small site, but you would be amazed how fast your code grows once you start, and how fast you loose overview of things. I’m not a fan of using certain frameworks to get me started as I like to code from scratch so I <em>’know’</em> my code, and I don’t litter it with a lot of divs and extra classes. Though I’ve been using <a href="http://susy.oddbird.net">Susy</a> for a project, by reading <a href="http://zellwk.com">Zell Liew</a>’s book <a href="http://learnsusy.zellwk.com/#signup">Learning Susy</a>. It’s not a framework, and it’s not a grid system, but it does help you in this area. It’s more like a toolset of code that gives you the freedom of how you want to write your code. You are in control, while the heavy lifting is done for you by Susy. Hope this inside look into my process was helpful in some way.</p>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/8t5CRRIVsTg" height="1" width="1" alt=""/>CSS, Projects,Tue, 24 May 2016 13:50 GMThttp://veerle.duoh.com/design/article/my_process_of_creating_the_arriva_web_site#When:13:50Create a lighthouse in Adobe Illustratorhttp://feedproxy.google.com/~r/graphic-web-design/~3/0DdlIbktjls/create_a_lighthouse_in_adobe_illustrator
http://veerle.duoh.com/design/article/create_a_lighthouse_in_adobe_illustrator#When:10:45A couple of years ago I created a lighthouse as part of an illustrated header for a web site. However, the illustration didn't get approved by the client. It was one of the first projects I shared a screenshot of on <a href="https://dribbble.com/shots/80-Rejected-design">dribbble</a>. Today I'll show you how to draw this lighthouse scenery in <a href="http://www.adobe.com/products/illustrator.html">Adobe Illustrator</a>. As always, I'll explain each simple step. With all these great tools at our disposal, this simple illustration requires you to use the Pen tool only once. I guess I did give the lighthouse a new home just like <a href="https://dribbble.com/simplebits">Dan Cederholm</a> stated in a comment back then. So let's get started!<div class="col1234">
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-cover.jpg" alt="" height="599" width="942" class="noborder" />
</div>
<div class="col234">
<h3>Before getting started…</h3>
<h4>About using Illustrator template files</h4>
<p>In this tutorial I'll also show you how you can keep your illustration organised, and how you apply a <strong>Clipping Mask</strong>. To make it extra easy to follow, I've prepared an <a href="http://cl.ly/3F3Y1P470k0n">Illustrator template file</a> that includes the correct dimensions of the illustration, color mode (RGB), color swatches. You can <a href="http://cl.ly/3F3Y1P470k0n">download this template here</a>. Illustrator template files are really handy. I have my own small set of template files that I always use to start from. If you create a <strong>new document</strong> in Illustrator, you always end up with a default set of swatches, brushes, symbols, and graphic styles in the panels. These are items I never use or need, but they do get stored each time with your document. So I create my own set of '<em>empty</em>' documents, with the document settings (dimensions, color mode…) I need, and save them as an .ait file.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-final.jpg" alt="" height="425" width="710" class="noborder" />
<h4>About using Smart Guides</h4>
<p>Before getting started, make sure you have <strong>Smart Guides</strong> enabled. To check this go to <em>View > Smart Guides</em>. If you see the checkmark, you're all set. You can switch this feature on and off by hitting <strong>Cmd/Ctrl + U</strong>.</p>
<h3>The Lighthouse</h3>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-1.jpg" alt="" height="148" width="710" class="noborder" />
<p><strong>1.</strong> Select the <strong>Rectangle tool</strong> and draw a small square by holding down the <em>shift key</em> while dragging. Apply the <strong>dark black grey</strong> color as fill, and set the stroke to <strong>none</strong> (red diagonal line swatch).</p>
<p><strong>2.</strong> Select the <strong>Rotate tool</strong> and rotate the <strong>square 45°</strong> by holding down the <em>shift key</em>. You can also rotate the square by holding down the <strong>Cmd/Ctrl</strong> key.
</p>
<p><strong>3. </strong>Select the <strong>Pen tool</strong> and <em>hover the bottom anchor point of the square</em>. When you see a <em>minus appear</em> at your cursor, click the anchor point to remove it from the path. You should end up with a triangle.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-2.png" alt="" height="148" width="710" class="noborder" />
<p><strong>4.</strong> Select the <strong>Rectangle tool</strong> again and draw a rectangle right below the triangle, keeping the same with of the triangle. <em>Smart Guides</em> should help you with this as the lines would snap to the right spot. Give the rectangle the very soft <strong>light blue fill</strong>.</p>
<p><strong>5.</strong> Draw a second slightly wider and less higher Rectangle right below using the same <strong>light blue fill</strong>.</p>
<p><strong>6.</strong> Then draw yet another Rectangle below it. This time make it the same with as the first one, and make this one very tall. It should have the length of the tower.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-3.jpg" alt="" height="253" width="710" class="noborder" />
<p><strong>7.</strong> Select all the objects and select the <strong>Horizontal Align Center</strong> option from the <strong>Control bar</strong> at the top, or from the <strong>Align</strong> panel.</p>
<p><strong>8.</strong> Select the <strong>Direct Selection tool</strong> (white arrow) and select the <em>bottom left anchor point</em> of the <em>vertical rectangle</em> (the bottom of the tower). Use the <em>left arrow key</em> on your keyboard to move the anchor point to the left. Use the same count for the bottom right anchor point.</p>
<p><strong>9.</strong> Select the <strong>Line tool</strong> and <em>draw a horizontal line</em> exactly at the top of the tall (tower) rectangle. Make sure the line is wider than the tower. The <strong>Smart Guides</strong> feature should give you a clue to align it exactly there. Then draw <strong>4</strong> similar (wide enough) horizontal lines over the vertical length of the tower. Lastly draw a <em>6th line</em> exactly at the bottom of the tower. Select all <em>6 lines</em> and select the <strong>Vertical Distribute Center</strong> option from the <strong>Align panel</strong> (or Control bar at the top). </p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-4.jpg" alt="" height="253" width="710" class="noborder" />
<p><strong>10.</strong> With the <em>6 lines</em> still selected, select also the <strong>vertical tower shape</strong> (using the <em>Shift Key</em>), and choose the <strong>Divide</strong> option from the <strong>Pathfinder panel</strong>.</p>
<p><strong>11.</strong> Use the <strong>Direct Selection tool</strong> (white arrow) to select the <em>1st</em>, <em>3rd</em> and <em>5th</em> segment of the tower and give it the <strong>red fill</strong>. To select these shapes, you can also use the <strong>Selection tool</strong> (black arrow) and go into <strong>Isolation Mode</strong>, by double clicking the (entire) tower. In Isolation Mode you can then select each segment separately.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-5.jpg" alt="" height="253" width="710" class="noborder" />
<p><strong>12.</strong> Select the <strong>Rectangle tool</strong> again and draw a small square on top of the top most small rectangle of the tower as shown in the image above. Give it the <strong>dark black grey</strong> color.</p>
<p><strong>13.</strong> Select both the square and the light blue rectangle below it using the <em>Shift key</em> to select the 2nd object. Release the <em>Shift key</em> and select/click the light blue rectangle again to make it the key object (to align to). A tick selection line should appear (as shown in the image above). Choose the <strong>Horizontal Align Center</strong> option from the <strong>Align panel</strong>. Then also choose the <strong>Vertical Align Bottom</strong> option to be sure it aligns perfectly to the bottom.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-6.jpg" alt="" height="253" width="710" class="noborder" />
<p><strong>14.</strong> Select the <strong>Direct Selection tool</strong> and select the <em>2 top anchor points</em> of the square. Drag both anchor points towards the center of the square to make the top part fully rounded.</p>
<p><strong>15.</strong> Now we’ll be creating a <em>subtle drop shadow</em> at the top of the tower. Select the top red shape of the tower and hit <strong>Cmd/Ctrl + C</strong> to copy it. Then hit <strong>Cmd/Ctrl + F</strong> to past this shape in front. Give it the <strong>black grey color</strong> and apply <strong>20%</strong> opacity in <strong>Multiply mode</strong> via the <strong>Transparent</strong> or <strong>Appearance panel</strong>.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-7.jpg" alt="" height="253" width="710" class="noborder" />
<strong>16.</strong> Draw a wider rectangle on top of the current shape, but a bit lower. The vertical Y position difference is the height of the shadow. Make sure this rectangle also uses the same fill: <strong>black grey fil</strong>l with <strong>20%</strong> opacity in <strong>Multiply mode</strong>.
<strong>17.</strong> Select <strong>both shapes</strong>, and choose <strong>Minus Front</strong> from the <strong>Pathfinder panel</strong>.
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-8.jpg" alt="" height="253" width="710" class="noborder" />
<p><strong>18.</strong> Now we'll create the light beams. Select the <strong>Line tool</strong> and draw a line on the left of the tower at the top as shown from the image above.</p>
<p><strong>19.</strong> Make sure the line is selected. Now select the <strong>Reflect tool</strong> from the <em>Tools bar</em> (located under the <em>Rotation</em> tool, or hit the letter <em>O</em>), hold down the <strong>Alt/Option</strong> key and click in anchor point at the top of the tower as shown in the image above. In the <strong>Reflect options window</strong> that appears, select <strong>Horizontal</strong>, and hit the <strong>Copy</strong> button to duplicate the line.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-9.jpg" alt="" height="253" width="710" class="noborder" />
<p><strong>20.</strong> With both lines selected, hit <strong>Cmd/ctrl + J</strong> (<em>Object > Path > Join</em>) twice to close join the anchor points of both lines, or to close the shape. Give the shape the light <strong>yellow gradient fill</strong> and go to <em>Object > Arrange > Send to Back</em>, to move the item below the tower.</p>
<p><strong>21.</strong> With the item still selected, select the <strong>Reflect tool</strong> again, hold down the <strong>Alt/Option</strong> key and click in the top center point of the tower as shown in the image above. In the <strong>Reflect window</strong> that appears select <strong>Vertical</strong> and hit the <strong>Copy</strong> button.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-10.jpg" alt="" height="287" width="710" class="noborder" />
<p><strong>22.</strong> With this last step we’ve completed the lighthouse tower. Time to organise our file a bit, this way we avoid any possible mess, and a well organised file can save you minutes of time in the long run. Select the entire object and hit <strong>Cmd/Ctrl + G</strong> (<em>Object > Group</em>) to group the shapes together into 1 object. In the Layer panel I’ve already named the layer ‘<em>Illustration</em>’ for you. Now click the triangle to the left to open it and double click the text and name this group layer ‘<em>lighthouse</em>’.</p>
<h3>The Sea</h3>
<p>Now let’s move on to the sea and create these nice wavy lines. To get started select the <strong>Stroke option</strong> at the bottom of the <strong>Tools bar</strong> or from the <strong>Color panel</strong> and select the <strong>aqua blue color</strong> swatch from the <strong>Swatches panel</strong>. Keep the width of the Stroke to the default <strong>1 pt</strong> size. Make sure the Fill option is set to <strong>no fill</strong> (red diagonal line swatch).</p>
<p><strong>23.</strong> Now select the <strong>Line tool</strong> and draw a straight horizontal line from one side of your canvas to the other (holding down the <em>Shift key</em> while dragging), a bit below the lighthouse. With the line selected, go to <em>Effects > Distort & Transform > Zig Zag</em>. In the <strong>Zig Zag options window</strong> that appears, enter a value of <strong>28 px</strong> for the Size, make sure <strong>Absolute</strong> is selected, and enter <strong>10</strong> for Ridges per segment with <strong>Smooth Points</strong> selected. Check the Preview option to view the result. If all is well hit the OK button. Next go to <em>Object > Expand Appearance</em>.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-12.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>24.</strong> Before proceeding to the next step. Copy the line via <strong>Cmd/Ctrl + C</strong> to have it in your memory, as we’ll paste it in a later phase. Now select the <strong>Pen tool</strong> and click in the most left anchor point of the line, hold down the <em>Shift Key</em> and click the bottom left corner of your canvas, next click the bottom right one, and close the path by clicking in the right anchor point of the wavy line.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-13.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>25.</strong> Next give the shape the <strong>aqua blue fill</strong> and <strong>no stroke</strong>. You can easily do this by clicking the <strong>Swap arrows</strong> right above the stroke and fill swatches at the bottom of the <strong>Toolbar</strong> or in the <strong>Color panel</strong>.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-14.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>26.</strong> In the <strong>Color panel</strong> reduce the fill of the color to <strong>25%</strong> as shown in the image above. One of the advantages of using <strong>Global Swatches</strong> is the possibility of applying only a percentage of the color swatch.</p>
<h4>The power of using Global Swatches</h4>
<p>Notice the <strong>small white triangle</strong> at the bottom right of each color swatch in the <strong>Swatches panel</strong>, plus the grey square to the right? This shows the swatch is a global color. If you double click one of the color swatches, you see the details of this color, showing its values and the color mode (RGB, CMYK, Pantone…). There is also an option called '<strong>Global</strong>'. All the swatches I've created have this option checked. The advantage of using <strong>Global Swatches</strong> is that when you modify its color values, all objects using that swatch will automatically updated into this new color. It makes a swatch more powerful, as you can save a lot of of time. If you decide the red in the illustration is to cherry and it should more be coral or orange, simply double click the swatch, change its values and all shapes where this color is applied to will be automatically updated. It's also handy to check the preview option while moving the sliders and see your illustration change while doing so. Perfect for <em>color experimentation</em>! So here is my tip to you : use it whenever you can!</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-15.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>27.</strong> Select the <em>sea shape</em>, click drag the shape a bit downwards (as shown in the image above), while you start dragging hold down the <em>Shift</em> and <em>Option/Alt key</em>. The first release the mouse and then the keys. Go to the <strong>Color panel</strong> and move the slider of the fill towards <strong>50%</strong>. Now repeat the same step : select this new shape and start dragging the shape a bit downwards again while holding down the <em>Shift + Alt/Option</em> keys. Again make sure to release the mouse first and then the keys. Now apply <strong>75%</strong> as <strong>color fill</strong>.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-16.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>28.</strong> Hit <strong>Cmd/Ctrl + F</strong> to paste the wavy line (in front) that should have still been in your copy memory. Grab the object and move it a bit down while holding down the <em>Shift key</em> to make sure you move it perfectly vertical. Move the line a little bit above the bottom wavy shape as shown in the image above. Go to the <strong>Stroke panel</strong> and choose <strong>2pt</strong> as Weight. Choose a <strong>round Cap</strong> and a <strong>round Corner</strong>, and select the <strong>Dashed Line option</strong>. Add <strong>0,1 pt</strong> (or 0.1 depending on your decimal settings) for dash value and <strong>10pt </strong>for gap value. With the dotted line still selected, drag it upwards right above the middle wavy shape, while holding down the <em>Shift</em> and<em> Option/Alt </em>keys, to duplicate the line. Again, when your line is in position, make sure to first release the mouse then the keys.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-17.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>29.</strong> The sea is finished, so we repeat the same steps as we did with the lighthouse. Select all the wavy shapes, group them into <strong>1 object</strong> by hitting <strong>Cmd/Ctrl + G</strong>. Then in the <strong>Layers panel</strong>, name the grouped object ‘<em>sea</em>’. Now on to the next item of our illustration: land!</p>
<h3>The Land</h3>
<p>For the creation of the land we also use a basic shape tool, the <strong>Ellipse</strong>. We will be creating <em>2 simple hills</em> using <em>2 circles</em>. The lighthouse needs to appear in between 2 hills. We’ll create a 1st hill above (in stacking order that is) the lighthouse. This one is positioned to the right of the lighthouse, and a 2nd one below the lighthouse (again, stacking orderly speaking) which appears to the left of the lighthouse.</p>
<p>First select the <strong>green swatch</strong> as your <strong>color fill</strong> and make sure <strong>stroke</strong> is set to <strong>none</strong>.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-18.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>30.</strong> Drag a rather big circle (by holding down the <em>Shift key</em>) to the right of the lighthouse as shown in the image above. Since the land needs to go behind the sea, go to the <strong>Layers pane</strong>l, grab the <strong>Ellipse object layer</strong> and drag it below the sea object.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-19.jpg" alt="" height="431" width="710" class="noborder" />
<p><strong>31.</strong> Move the circle (or the lighthouse) in place if needed. The lighthouse should be aligned to the left of the land, and the land should be aligned with the right of your canvas. Now drag the <strong>Ellipse object</strong> in the <strong>Layers panel</strong> onto the <strong>New Layer icon</strong> at the bottom of the panel to duplicate this object. Move the new circle to the right of the lighthouse and apply <strong>75%</strong> of the <strong>green swatch</strong>. Now move the <strong>Ellipse object</strong> below the lighthouse object in the <strong>Layers panel</strong>. This way the lighthouse appears in between both hills. You can name each Ellipse object in the Layers panel '<em>land</em>' or maybe '<em>hill</em>' if you like.</p>
<h3>The Sky</h3>
<p>Next item to be drawn is the sky, which includes the creation of clouds. Again this is done a very simple and easy way using basic shapes in combination with aligning and using a <strong>Pathfinder option</strong>. Before you get started, it might be best to lock the object layers of the other items. Go to the <strong>Layers panel</strong> and click the in the squared area to the right of the eye icon of the land (or hills) objects, the sea and the lighthouse to lock each one. Then to move on to the sky, select the <strong>blue color swatch</strong> as fill and set the stroke to <strong>none</strong>.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-20.jpg" alt="" height="546" width="710" class="noborder" />
<p><strong>32.</strong> Grab the <strong>Rectangle tool</strong> and draw rectangle the size of your canvas. In the <strong>Layers panel</strong> name the object '<em>sky</em>', select it and move it all the way to the bottom of the stack.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-21.jpg" alt="" height="546" width="710" class="noborder" />
<p><strong>33.</strong> Choose <strong>white</strong> as fill and set the stroke to <strong>none</strong>. Select the <strong>Ellipse tool</strong> and draw a couple of slightly overlapping circles as shown in the image above for the creation of a cloud. Draw <strong>3</strong> or <strong>4</strong> circles with a big one in (or towards) the middle. Select <strong>all circles</strong> and align them <strong>vertically</strong> at the bottom via the <strong>Align panel</strong> (or Control bar).</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-22.jpg" alt="" height="546" width="710" class="noborder" />
<p><strong>34.</strong> Now select the <strong>Rectangle tool</strong> and draw a rectangle box right on top of the bottom area to close or to fill this area up. <strong>Smart Guides</strong> should be your help on where exactly this rectangle should be placed. If you don’t get it right from the start you can use the handlebars of the rectangle to tweak the size and position. The rectangle should be <em>perfectly aligned to the bottom of the circles</em>. The left and rightsize should be aligned to the bottom anchor point of the left and right circle. If you end up with small gaps still, than you can draw other (white) rectangles on top.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-23.jpg" alt="" height="546" width="710" class="noborder" />
<p><strong>35.</strong> Select all shapes, go to the <strong>Pathfinder</strong> and choose <strong>Unite</strong> from the <strong>Pathfinder panel</strong>.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-24.jpg" alt="" height="546" width="710" class="noborder" />
<p><strong>36.</strong> Since we’re going to add more than 1 cloud, drag the object into the <strong>Symbols panel</strong> to create a <strong>symbol</strong>. Name the object ‘<em>cloud 1</em>’. Now create another cloud using the same steps as before. Make sure this one looks different than the one you’ve already created. If this one has 3 circles, make one with 4 circles or vice versa. When finished, do the same and drag it into the <strong>Symbols panel</strong>. Name it ‘<em>cloud 2</em>’.</p>
<p>Now drag the <em>cloud symbols</em> from the <strong>Symbols panel</strong> onto the <em>blue sky</em>. Position each one of them to your liking. Make some of them big, some of them small. Add <strong>transparency</strong> to some by applying an opacity value below <strong>100%</strong> in the <strong>Transparency panel</strong>. You can also mirror some of them horizontally to create extra diversity. </p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-25.jpg" alt="" height="486" width="710" class="noborder" />
<strong>37.</strong> When you’re happy with your clouds composition, go to the <strong>Layers panel</strong> and select <strong>all cloud objects</strong>. You can do this via the <strong>Layers panel</strong> by clicking the <em>small circles</em> to the right of each layer object. Group all cloud objects into <strong>1 group</strong> by hitting <strong>Cmd/Ctrl + G</strong> (Object > Group). Name the object layer ‘<em>clouds</em>’.
<h3>The Birds</h3>
<p>Last item in the list of this illustration are the group of birds. We’ll be using the same technique of converting one bird into a symbol, and then we’ll add this bird in different ways in our illustration. To create the bird we’ll use the <strong>Ellipse tool</strong> again in combination with some <strong>Pathfinder options</strong> and the <strong>Shapebuilder tool</strong>. Start by choosing a <strong>white fill</strong> and set the stroke to<strong> none</strong>.</p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-26.jpg" alt="" height="336" width="942" class="noborder" /></div>
<div class="col234">
<p><strong>38.</strong> Select the <strong>Ellipse tool</strong> and draw a circle. Then draw a <strong>2nd circle</strong> in double the size on top, overlapping most of the circle positioned as shown in the image above. The area of the smaller circle that pops out will be the left wing of the bird. Select <em>both circles</em> and choose <strong>Minus Front</strong> from the <strong>Pathfinder's panel</strong>. </p>
<p><strong>39.</strong> Now select the <strong>Reflect tool</strong>, hold down the <em>Option/Alt key</em> and click somewhere at the bottom to the right of this shape as shown in the image above. In the window the appears choose <strong>Vertical</strong> as <strong>Axis</strong> and hit the <strong>Copy</strong> button. You should end up with something similar as shown in the image below. So there should be a small overlap at the bottom of the <em>2 shapes</em>.</p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-27.jpg" alt="" height="336" width="942" class="noborder" /></div>
<div class="col234">
<p><strong>40.</strong> Select <em>both shapes</em> and choose the <strong>Divide option</strong> from the <strong>Pathfinder panel</strong>. Both shapes are now divided into separate <strong>path segments</strong>. </p>
<p><strong>41.</strong> With the bird object still selected, choose the <strong>Shapebuilder tool</strong> from the <strong>Tools bar</strong>. Hold down the <em>Option/Alt key</em> and hover over the bottom left segment. A <em>minus</em> appears to the left of your cursor and the area you’re hovering is filled with a dark raster effect which indicates you’re about to remove this segment from the object. Click in the area to confirm this action. Do the same for the other bottom segment to the right. When both segments are removed, choose the <strong>Unite</strong> option from the <strong>Pathfinder panel</strong> to unite the remaining segments.</p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-28.jpg" alt="" height="336" width="942" class="noborder" /></div>
<div class="col234">
<p><strong>42.</strong> Give the bird object the <strong>black grey fill</strong> and drag it into the <strong>Symbols panel</strong> to turn it into a <strong>symbol</strong>. </p>
<p><strong>43.</strong> Now drag <strong>the birds</strong> from the <strong>Symbol panel</strong> onto your illustration. Create a group of birds that circle around the top of the lighthouse. Scale, and rotate each one of them in a different size and angle. Give each one a <strong>different transparency</strong> to create some randomness. </p>
</div>
<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/lighthouse-illu-howto-29.jpg" alt="" height="336" width="942" class="noborder" /></div>
<div class="col234">
<p><strong>44.</strong> I made the smaller ones more transparent than the slightly bigger ones, because they're a bit further away. I also first created the group of birds on the left of the tower and copy mirrored this group to the other side of the tower. Then I tweaked this group a bit to make sure it doesn't look the same as the birds on the other side of the tower. When you're finished, select <strong>all the birds</strong> and group them together by hitting <strong>Cmd/Ctrl + G</strong> (<em>Object > Group</em>). In the <strong>Layers panel</strong> name the grouped object '<em>birds</em>' and make sure the <strong>object layer</strong> is the top most one of the stack.</p>
<h3>Clipping Mask</h3>
<p><strong>45.</strong> Last but not least we'll create a <strong>Clipping Mask</strong> for our illustration. Select the <strong>Rectangle tool</strong> and draw a box exactly the size of your canvas. Give it <strong>no fill</strong> and <strong>no stroke</strong>. Make sure this '<em>empty</em>' box follows the borders of your canvas, and that the object layer sits on top of the stack in your <strong>Layers panel</strong>. If you like you can give the layer the name '<em>mask</em>' (as shown in the image above) as it will serve as a <strong>Clipping Mask</strong>. Next, make sure no object is selected by clicking somewhere outside your artwork holding down the <em>Cmd/Ctrl key</em>, or you make sure the <strong>Selection tool</strong> is selected when you click. When another tool is selected, you can hold down the <em>Cmd/Ctrl</em> key to temporarily have the black arrow at your disposal. It's something I constantly do to save time in between my actions. When no object is selected, go to the <strong>Layers panel</strong> and click on the main layer 'Illustration'. Now click the <strong>Make/Release Clipping Mask icon</strong> at the bottom of the panel.</p>
<p>That's it! Hope you've enjoyed this tutorial.</p>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/0DdlIbktjls" height="1" width="1" alt=""/>Illustrator, Tutorials,Wed, 02 Mar 2016 10:45 GMThttp://veerle.duoh.com/design/article/create_a_lighthouse_in_adobe_illustrator#When:10:45The design process of the Arriva logohttp://feedproxy.google.com/~r/graphic-web-design/~3/Oi7huz_YcFw/the_design_process_of_the_arriva_logo
http://veerle.duoh.com/design/article/the_design_process_of_the_arriva_logo#When:08:05It’s always great when you’re involved in the design of a project from the very beginning, and you can design everything from A till Z. Especially if you share the same passion about the project as the client. In this case: coffee, and riding your bike! Today I would like to share my experience on the design process of this project, called <a href="http://arriva.cc"><strong>Arriva</strong></a>, a small start-up company.<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-website.png" alt="Arrive logo & web site" height="700" width="942" class="noborder" /></div>
<div class="col234">
<h3>Logo design briefing</h3>
<p>This project included the design of the company logo and brand identity, plus the design and development of the Web site. The logo brief was very precise and well described towards design style, and global look: “We’re thinking along the lines of <a href="https://www.pinterest.com/pin/548313323354768037/"><i>Faema</i></a>-like typeface, red pennant, checkerboard pattern (cf. <a href="https://www.pinterest.com/pin/448108231652115349/"><i>Peugeot jersey</i></a>), maybe use an exclamation mark?…”. Furthermore, the client also had a preference to use the color red in the logo, as an accent color in combination with a dark color, either black, dark brown or dark grey. I also had to make sure that the logo could work as an icon that stands on its own. These were some basic and very straightforward ideas, and served more as a guidance and a sense of direction to get me started.</p>
<h3>The meaning of the name</h3>
<p>Arriva is Italian for arriving at the finish. The red pennant in cycling races announces the last kilometer in the race (1 km from the finish), the most intense and most beautiful phase of the race. Arriva wants to express your cyclist’s high, your deserved break, and so the tagline of Arriva is <strong>‘Your ride. Your break.’</strong>. It perfectly expresses its meaning and what the company and brand stands for.</p>
<h3>First doodles & ideas</h3>
<p>With the basic ideas in the back of my head, I grabbed pencil and paper and started doodling some ideas. One of the ideas was to turn the capital V into a cup of coffee. Then this V shape could also serve as an icon.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-doodles.png" alt="First logo idea sketches" height="400" width="695" />
<p>I also played with the idea of using both the letters A and V, and having this V shaped cup of coffee icon as a separate item in combination with the letters fully written. Another idea was to work with the shape of a coffee paper tissue coaster. Plus, I liked the idea that the shape could maybe also be referred to as a bike’s chainring (adding some adjustments to the curves).</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-ideas-color.png" alt="Color suggestions" height="500" width="695" />
<p>The above image shows our color suggestions.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-ideas-type.png" alt="Typface suggestions for logo and tagline" height="500" width="695" />
<p>The above image shows the typefaces we had in mind for the logo and the tagline.</p>
<p>Together with these designs, I also presented some ideas for colors & typefaces, and I worked out 2 ideas I found interesting. I decided to add in a version with a worn grunge effect, just to see if this could be a style that matches what my client had in mind. Mind you the (Illustrator) logos, were just quickly <em>‘mocked up’</em> in Adobe Illustrator, and so definitely far from finished versions. Just presenting some concepts and ideas was the sole purpose in this phase.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-concept-1.png" alt="Logo concept 1 : label style" height="500" width="695" />
<p><strong>Concept 1</strong>: The logo as a label, using the shape of a coffee paper tissue coaster.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-concept-2.png" alt="Logo concept 2 : icon centered above the name with a grunge effect" height="500" width="695" />
<p><strong>Concept 2</strong>: I was thinking about how the logo could be represented in combination of a checkerboard pattern (cf. Peugeot), placed on a caravan or a banner. Although this idea was pretty quickly dropped since it reminded too much of Formula 1 car races. Then I was also presenting the idea of adding in a subtle worn grunge effect.</p>
<h3>Feedback</h3>
<p>It seemed these ideas were a good start. I was on the right track, especially the idea of using a small label for the icon. Exploring this idea further and maybe changing the shape of the tissue coaster more into a chainring was definitely an option to look into. My client also mentioned they wanted to use banners, in vertical and horizontal shape. If I could think about a design with the logo, and tagline…</p>
<h3>First logo design proposals</h3>
<p>In this phase I tweaked the typography to better match the letters of the <em>Feama</em> logo.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-lettershapes.png" alt="Steps from the original typeface to logo shape" height="640" width="695" />
<p>I started from Neutraface Condensed Medium, and…</p>
<ol class="nrs">
<li class="nr1">I tweaked the letter A so the bars lined up with the bars of the double R</li>
<li class="nr2">I made the lettershapes thicker (via Object > Path > Offset Path…)</li>
<li class="nr3">I removed the sharp points of the V and A</li>
<li class="nr4">and I added a tiny bit of rounding in the corners (using the very handy corner handles in Illustrator)</li>
</ol>
<p>There wasn’t a decision made yet whether to keep or drop the grunge effect. So for now I continued using it. I liked the subtle touch of the effect, but wasn’t sure myself at this point if the logo itself also needed it.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-1.png" alt="Very first logo design proposal" height="500" width="695" />
<p>The above image shows my first design proposal, using the Faema-like typeface in combination with a ‘label’ icon centered above the name in the shape of a chainring.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-2.png" alt="2nd logo design proposal" height="500" width="695" />
<p>The above image shows the 2nd concept of a label design, using the shape of a chainring, but also serving as a coffee tissue coaster.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-3.png" alt="Just exploring more options with bike riding & coffe in the back of my head" height="500" width="695" />
<p>In the version in the image above, I was just exploring more options, translating the <em>‘riding your bike & coffee’</em> into 2 icons.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-4.png" alt="Exploring more typographical options. It was an idea that I just wanted to try out." height="500" width="695" />
<p>While I was playing with the shape of the letters, I also tried out these double lined letter shapes, which I found interesting,… Though, it didn’t make the next round.</p>
<p>In this phase I also decided to present the logo designs as how they could look on a letterhead, business card, envelope or an object such as a pencil.</p>
</div>
<div class="col1234">
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-letterhead-1.jpg" alt="Arriva logo design proposal 1 presented on a letterhead, business card, envelope and pencil" height="691" width="927" class="noborder" />
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-letterhead-2.jpg" alt="Arriva logo design proposal 2 presented on a letterhead, business card, envelope and pencil" height="691" width="927" class="no border" />
</div>
<div class="col234">
<p>Then I also played with the idea of using the triangle shape as a background pattern. It could work perfectly for a banner.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-banner.png" alt="First design proposal for the Arriva banner" height="500" width="695" />
<h3>Some more logo design variations</h3>
<p>A whole bunch of variations were created, based on the idea of a coaster icon in combination with the <em>Faema</em> typeface.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-5.png" alt="Presenting the logo designs in combination with a design proposal for the banner." height="500" width="695" />
<p>I also played a bit with the triangular shape of the icon, making it sharper, less sharper…</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-banner-2.png" alt="Associated banner design" height="500" width="695" />
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-6.png" alt="Trying out a wider typeface and no icon" height="500" width="695" />
<p>The idea came to mind to use a <em>rebus</em> to translate what Arriva is about for the banner:</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-banner-3.png" alt="The associated banner design" height="500" width="695" />
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-7.png" alt="Icon in the shape of the letter V" height="500" width="695" />
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-8.png" alt="Exploring options for the icon design" height="500" width="695" />
<p>Further exploring on the icon design…</p>
<p>At a certain point during this phase, this twisted fun idea was suggested to try out:</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-twisted-weird-icon.png" alt="Just a twisted fun idea we had to try out :)" height="300" width="695" />
</div>
<div class="col1234">
<blockquote class="special"><p>The idea intrigued me for sure, but somewhere in the back of my head my intuition told me it wouldn’t work. Though, I have been wrong many times, thinking <em>‘nah this won’t work’</em> and then when I actually try it, I ended up with something surprisingly good and strong. So always try ideas out, even if you think upfront it will lead to nothing. You never know.</p></blockquote>
</div>
<div class="col234">
<p>It was time to put all the designs next to each other and compare… It was hard to decide which one was best, and 4 people had to come to a mutual decision. The best thing you can do if there isn’t a version jumping out, is letting it rest for a bit. Let it sink in.</p>
<h3>A short pause</h3>
<p>After this short pause, it seems the logo wasn’t just there yet, and we decided to try out a bit of a different route, keeping the part we liked: the typeface. It was the icon that needed work. We thought maybe we need to drop the coffee mug or paper coaster idea, and focus more on the meaning of the name: the finish (of a race), and the <strong>red pennant</strong>. So the idea came of changing the A, and adding this red pennant in. This triangular shape could work perfectly, no? So we tried it out and so the new logo was born.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-9.png" alt="The almost final logo" height="500" width="695" />
<p>I decided to add this red triangle to the 2nd A because the first A had this nice sync with the double R. It just felt more in balance this way. Plus, the last A, is also the <em>finishing</em> A.</p>
<h3>Finalising</h3>
<p>In the last phase we decided to drop the grunge effect and go for plain, clean and strong black in combination with red, instead of dark brown.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-logo-design-final.png" alt="Final logo design" height="500" width="695" />
<h3>Banner design</h3>
<p>While working on the Arriva logo design, I also worked on the design of a vertical and horizontal banner. These 2 were the final and approved designs:</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-vertical-banner-final.png" alt="Final vertical banner design" height="1015" width="695" />
<p>The final vertical banner design</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-horizontal-banner-final.png" alt="Final horizontal banner design" height="300" width="695" />
<p>The final horizontal banner design</p>
<h3>T-shirt design & icons</h3>
<p>The banner design was followed up with a t-shirt design, that would be screen printed in 3 colors.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-t-shirt-design-1.jpg" alt="Arriva t-shirt design" height="395" width="695" />
<p>Later on when we started with the design of the web site, we frist created an illustration of <em>‘Eddy’</em>, the retro-caravan and the 3 mayor icons that presented Arriva’s services: mobile coffee shop, bike repair service and shop. These would then be used for the design of the web site.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-t-shirt-design-2.jpg" alt="Arriva t-shirt design with the Eddy retro-caravan" height="395" width="695 />
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-caravan-web-site-icons.png" alt="Arriva logo, the ‘Eddy’ retro-caravan illustration, the Arriva logo icon with pattern background and the 3 Arriva service icons" height="995" width="695" />
<p>Arriva logo, the ‘Eddy’ retro-caravan illustration, the Arriva logo icon with pattern background and the 3 Arriva service icons.</p>
<h3>Arriva’s ‘Eddy’ retro-caravan</h3>
<p>The Arriva retro-caravan was baptised <em><strong>‘Eddy’</strong></em>, after <strong>Eddy Merckx</strong>, best cyclist of all times that put the <em>Faema</em> espresso machines on the map in the 60's, a wink to coffee and cycling.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-eddy-caravan.jpg" alt="The Arriva Eddy retro-caravan" height="630" width="695" />
<img src="http://images.veerle.duoh.com/uploads/design-article-images/arriva-eddy-caravan-in-action.jpg" alt="The Arriva Eddy retro-caravan in action" height="463" width="695" />
<p>Hope you enjoyed the read. In a next article I talk about the design and development of the web site.</p>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/Oi7huz_YcFw" height="1" width="1" alt=""/>Projects,Thu, 11 Feb 2016 08:05 GMThttp://veerle.duoh.com/design/article/the_design_process_of_the_arriva_logo#When:08:05Preview the new Authentic Jobs sitehttp://feedproxy.google.com/~r/graphic-web-design/~3/bssDJuaGjSQ/preview_the_new_authentic_jobs_site
http://veerle.duoh.com/design/article/preview_the_new_authentic_jobs_site#When:18:04As a long time partner of Authentic Jobs it's my great pleasure to announce the <a href="https://new.authenticjobs.com">new design</a>. It's a preview for now as it's a significant departure from the previous design, which were much more <a href="http://alistapart.com/article/redesignrealign">realign than redesign</a>. This version is both realign and redesign — an iterative evolution of a decade-old product and a complete design &amp; code overhaul. Here's a small look into the design process…<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/2016-home-full.png" alt="" height="821" width="927" /></div>
<div class="col234">
<h3>Realign + Redesign</h3>
<p>We felt this was the perfect opportunity to overhaul UI components that had remained untouched for years. Albeit they were functional, but we didn’t feel the components were holistically in harmony with each other, especially at varying screen sizes. For example, previously you couldn’t locate nearby jobs with a single tap on larger screens—that was reserved only for smaller screens. Now you can locate nearby jobs with a single tap on any size screen</p>
<h4>Fully responsive, both content & function</h4>
<p>This new design is far more responsive than the last. The previous design (2011) adapted well to common screens sizes among mobile phones, tablets, and larger screens. However, functionality was limited on some screens sizes, and many more screen sizes have emerged since 2011. In fact, today “common screen sizes” might be considered ridiculously and unreasonably subjective. The new design is fully responsive, both content and function. Anyone can access the site regardless of screen size, and anyone can access nearly all functionality irrespective of their viewport dimensions.</p>
<h4>Listing hero</h4>
<p>We’ve redesigned the job listing pages to make the job itself the hero, placing greater emphasis on the title and meta data. Employers can also include beautiful ‘hero’ images with their description that personify the company, its culture, or the team candidates will be a part of.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/2016-chrome-together.png" alt="" height="465" width="695" />
<p>By the way, we spent loads of time fontsploring the right headline type, and we couldn’t be happier with <a href="http://thequestaproject.com">Questa</a> by <strong>Martin Majoor</strong> & <strong>Jos Buivenga</strong>. Additionally <a href="https://www.dardenstudio.com/typefaces/freight_text">Freight Text Pro</a> (<strong>Joshua Darden</strong>) and <a href="https://adobe-fonts.github.io/source-sans-pro/">Source Sans Pro</a> (<strong>Paul D. Hunt</strong>) round out the other font selections found throughout the site.</p>
<h4>New filtering options</h4>
<p>We’ve modified the Skills categories and introduced two new filtering options: Compensation and Levels. However a fair warning as we don’t anticipate having any listings that match these new filters until the new design is live in a few weeks and employers begin posting jobs using these new filters.</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/2016-filters.png" alt="" height="597" width="695" />
<h4>Improved posting process</h4>
<p>We’ve made numerous improvements to our posting process, including the use of Redactor text editor. Initial tests show it’s much more friendly to those who copy & paste job descriptions from Word documents (which is pretty common among our customers).</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/2016-post-windows.png" alt="" height="414" width="695" />
<p>So, please <a href="https://new.authenticjobs.com/">kick the tires</a> and tell us what you think. <a href="https://new.authenticjobs.com/contact?subject=Beta%20Feedback">Drop us a note</a> with the sign-off line of your choice. “<em>With hugs</em>” is our favorite, but we happily accept “<em>totally frustrated</em>” too.</p>
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/bssDJuaGjSQ" height="1" width="1" alt=""/>Projects,Wed, 27 Jan 2016 18:04 GMThttp://veerle.duoh.com/design/article/preview_the_new_authentic_jobs_site#When:18:04New logo for Veerle’s blog 4.0http://feedproxy.google.com/~r/graphic-web-design/~3/XwaklvFQxoo/new_logo_for_veerles_blog_4.0
http://veerle.duoh.com/design/article/new_logo_for_veerles_blog_4.0#When:15:26Yes you read that right I'm working on version 4.0 of my blog :) Long overdue I know. Strictly speaking there should have been a 3.5 version in 2012 but that one was never released. If you are curious how that would have looked like you can find out after the jump.<div class="col1234"><img src="http://images.veerle.duoh.com/uploads/design-article-images/veerles-blog-3point5.jpg" alt="Veerle's blog version 3.5" height="1687" width="927" /></div>
<div class="col234">
<h3>Starting fresh</h3>
<p>A blank canvas is daunting and getting a good start is important for me personally. Didn't nail it on <a href="https://dribbble.com/shots/2412355-V">first try</a> but I am happy with what I have now. The new logo is a great start for a total refresh of this blog. I see many possibilities with it and this animation is a first try-out. I'm a total newbie when it comes down to <a href="http://www.adobe.com/products/aftereffects.html">Adobe After Effects</a>. Since I didn't know anything about the application I first followed <a href="https://www.skillshare.com/classes/design/After-Effects-Motion-Graphics-101-Typographic-Line-Logo-Reveal/93163689?studentRef=6515615">this course</a> on <strong>Skillshare</strong> to understand the basics. Once that was done I dived in, got frustrated a few times but got there in the end. Hope you like it :)</p>
<img src="http://images.veerle.duoh.com/uploads/design-article-images/V-icon-animation-looped.gif" alt="" height="521" width="695" />
</div><img src="http://feeds.feedburner.com/~r/graphic-web-design/~4/XwaklvFQxoo" height="1" width="1" alt=""/>Projects,Wed, 20 Jan 2016 15:26 GMThttp://veerle.duoh.com/design/article/new_logo_for_veerles_blog_4.0#When:15:26