Slate
Blackcurrant
Watermelon
Strawberry
Orange
Banana
Apple
Emerald
Chocolate
Marble
Slate
Blackcurrant
Watermelon
Strawberry
Orange
Banana
Apple
Emerald
Chocolate
Marble
-
Content Count
17,053 -
Joined
-
Last visited
Never -
Feedback
N/A
Everything posted by Rss Bot
-
Let’s face it, the biggest 3D movies of 2017 are never going to be subtlest ones. To make back the multi-millions of dollars invested means appealing to a broad global audience through spectacular visual effects and high-impact action. But many 3D movies are actually surprisingly sophisticated in a number of ways, and can teach designers from other disciplines a thing or two. In this post, we look at five of the year’s biggest 3D movies, and discuss the five lessons they can teach poster designers, logo designers, artists, 3D artists and VFX specialists. 01. Logan: How to make a poster Poster by Dave Rapoza for the IMAX screenings of Logan After the backlash the Spider-Man: Homecoming poster received, in June we asked “Are movie posters in a design crisis?” But if you want to know exactly how to pull off a movie poster design, then here’s a great example. Released in March, Logan was an X-Men film unlike any other X-Men film. Less a standard superhero caper and more akin to a Western, this film is intense, gritty and graphically violent in a way that’s totally unsuitable for small children. With a more mature story aimed at a more mature audience, it was fitting that this poster design by Dave Rapoza for the IMAX screenings harked back to an earlier era of classic movie posters. And the reaction from the design community was overwhelmingly positive, as we reported. Okay, so this movie poster is purposely retro. But with so many movie posters of the 21st century looking like hastily and amateurishly knocked-up Photoshop composites (you’ll find some typical examples of the worst on Games Radar), a return to the epic, character-led, painterly posters of the 1970s and 1980s would be no bad thing in our opinion. Lesson learned: When it comes to poster design, looking to the past isn’t just about being knowing and ironic. It’s about understanding why the classics work, and drawing on those same principles to create something beautiful and alluring. 02. Guardians of the Galaxy Vol 2: How to make a logo The Guardians of the Galaxy Vol 2 logo is a beautiful mess of colours and stylesThere was a time when it was only readers of Creative Bloq and the Brand New blog who were excited by the release of a new logo. How times have changed. Nowadays, new movie logos get glitzy launches at events like Comic-Con, and mass coverage in the mainstream press. As a result, perhaps some movie studios are upping their games in terms of logo design. We certainly think this logo for the 2017 sequel to Guardians of the Galaxy hits the sweet spot. With this quirky franchise being firmly centred around 1980s nostalgia and a sense of anarchic fun, Marvel has wisely stepped away from its standard silver-and-red approach to superhero logos and produced something much more original and enticing. It artfully combines a hotchpotch of different colours and approaches to create something that’s both chaotic and messy yet fun and appealing... much like the characters and storylines of the movies themselves. Lesson learned: A logo that expresses what’s distinctive about a movie sells it far more successfully than taking a generic and predictable approach. See our 7 key typographic trends in Marvel movie logos article for more Marvel logo tips. 03. Alien Covenant: How to make in-movie art One of Dane Hallet’s charcoal drawings for Alien: CovenantMost movie concept art is used as the basis for the sets, costumes, environments and so on. But for the latest movie in the Alien series, Dane Hallett was asked to create art that actually appears in the film. That’s because in the story, Michael Fassbender’s character David draws nature studies of extraterrestrial wildlife. So Hallett and his colleague Matt Hatton were asked to become ‘the hand of David’... and director Ridley Scott pretty much left them to their own devices. “We just got let off the leash,” enthuses Hallett. “It was awesome; I haven’t had this much fun since Mad Max. We got the language down and it was leash off, go beserk, draw as much as you can draw. I think it was nine months straight, we didn’t have a day off. It went from 30 fine art finished drawings to about 600.” The work the two created is quite astonishing: you can see more of the work by Hallet here and Hatton here. You can also read our full interview with them and fellow Alien: Covenant artist Wayne Haag in issue 151 of ImagineFX. Lesson learned: When artists have a true passion for a project, giving them free rein can lead to a productive avalanche of mind-blowing art. 04. Spider-Man: Homecoming: How to make CG believable For Spider-Man: Homecoming, director Jon Watts was restrained in his use of CGA common complaint about 3D films is, “There was too much CG”. But almost everything we watch these days uses CG, so what viewers really mean is that there was too much unconvincing CG that detracted from their suspension of disbelief. Making special effects in a superhero movie look ‘realistic’ may seem like an impossible task, but that’s just what the director of Spider-Man: Homecoming, Jon Watts, set out to do. Achieving this goal came down to a high attention to detail from the main VFX vendors, who included Sony Picture Imageworks and Digital Domain. But it also stemmed from a strong use of practical effects on big set pieces. For instance, for the scene where the ferry splits in two, the film-makers used a combination of a big set that cleaves in half, and the actual ferry in New York. You can learn more about the CG secrets of the movie in our article The CG secrets of Spider-Man: Homecoming. Lesson learned: Only use CG when you absolutely have to. The more practical footage you can capture in camera, the more convincing and compelling your storytelling will be for the audience. 05. Transformers: The Last Knight: How to create a convincing world Building a convincing CG world takes a staggering amount of thought, planning and timeIf you go to see a Transformers movie by Michael Bay, you know exactly what you’re getting: a ton of high-octane, fast-paced and frequently ridiculous action. But even if it’s not your cup of tea, you can’t dismiss a franchise that’s generated almost a billion dollars per movie as being without merit. There’s an incredible level of craft to these CG-fuelled blockbusters, and part of that lies in the astonishing amount of effort that’s gone into creating convincing, believable worlds. For the latest in the series, Bay brought in ILM to create Cybertron, the planet of the Transformers, and as associate VFX supervisor David Fogler told 3D World magazine, they didn’t rush things. “We asked ourselves: What it should look like? How should it behave?” he explains. “We spent a year and a half figuring out what it should look like and that's not an exaggeration." But although it was “dauntingly complex” for the team to spend time detailing and modelling the design and physics of this imaginary world, their efforts certainly paid off, both in the believability of the environment itself and in the convincing way the scenes of destruction take place near the end of the movie. You can read more about how ILM went about creating Cybertron in our interview: Behind the scenes on Transformers VFX. Lesson learned: Crafting an entirely new world from scratch can’t be rushed. It takes time, effort and a willingness to deal with mind-numbing levels of complexity, not to mention developing a technical setup that can efficiently handle all that data. View the full article
-
There are all kinds of exciting developments happening in the world of web development. You can pick up the skills you need to take part in the new wave of development with the help of the Learn to Code 2017 Bundle, on sale now for a price you choose! No matter which area of web design you're interested in, the Learn to Code Bundle will give you the know-how you need to be a talented developer with the skills to succeed. It's packed with dozens of hours of actionable content from 10 professionally-taught courses on everything from Python to Ruby on Rails to Java. Boost your skills so you can create great works online for fun or get a promotion and add some more income. The courses in the Learn to Code 2017 Bundle usually retail for $1,573 altogether. Right now, you can pick the price you pay for the whole bundle. Beat the average price to unlock it all or get onto the leaderboard. The price is up to you but you can't go wrong, so grab it today! This great deal comes courtesy of the Creative Bloq Deals store – a creative marketplace that's dedicated to ensuring you save money on the items that improve your design life. We all like a special offer or two, particularly with creative tools and design assets often being eye-wateringly expensive. That's why the Creative Bloq Deals store is committed to bringing you useful deals, freebies and giveaways on design assets (logos, templates, icons, fonts, vectors and more), tutorials, e-learning, inspirational items, hardware and more. There are even top competitions like the popular iPad Pro Giveaway. Every day of the working week we feature a new offer, freebie or contest – if you miss one, you can easily find past deals posts on the Deals Staff author page. Plus, you can get in touch with any feedback at: deals@creativebloq.com View the full article
-
The latest version of popular game engine Unreal Engine has the addition of some notable key features, which were highlighted during the 2017 Games Developer Conference (GDC 2017). This makes for a very solid update, with something in there for all types of artists. Since version 4.11, the user experience has become a lot smoother, and this current release builds upon this. One of the most obvious changes is that the experimental features in previous versions have become key components in their own right. The Sequencer cinematic feature has come on in leaps and bounds since earlier revisions, and can be used for creating cut scenes, animatics or even presentations. Until 4.16, Matinee felt like a buggy external plug-in, but it now feels part of the software. The way camera sequences and cuts can be laid out visually is reminiscent of an editing suite, which makes for a far more enjoyable user experience. The new release of Unreal Engine 4 has plenty to offer all types of artists Create photo-real characters For the artist or curious gamer who has always wondered how to create photorealisic characters for games, this release can answer a lot of those questions. Epic Games has kindly released a photo-real character model using the UE4 Skin Shader, along with online documentation to breakdown the processes and techniques used to create photo-real captivating characters. In-VR editor For VR users, the in-VR editor has become one of the main features of the release. Anyone working in this environment knows that when building in VR, it is essential you remain in VR for as long as possible for testing. By being able to access your Content Browser menu and even make edits to Landscape, you can remain in VR to make changes. This saves a lot of time and hassle. The inclusion of subdivision surfaces is fantastic and the way the user can manipulate in VR to make big, bold changes and set dressing is a benefit to the artist. However, whether these tools can offer the dexterity and precise nature required still remains to be seen. However, from a level design standpoint, there are key benefits of blocking out initial layouts to get a true feel for the worlds you want to create, all while immersed in VR. The image Sequencer makes cutting sequences an absolute breeze Preferred game engine This is serious professional grade software that in the past was only accessible in development studios via programmer-written bespoke in-house engines. With so many features and support for outputting to every platform, it becomes obvious why development studios have adopted it as their preferred game engine. Furthermore it is now creeping into film studio pipelines, since it can be additionally customised via open-source C++. With such a large thriving online community, an enormous amount of learning resources with countless free tutorials and samples at your disposal, coupled with the fact you can download it completely free, I cannot see why anyone would not want to give Unreal Engine’s latest release a try. All in all, whether you’re a seasoned professional or an avid enthusiast looking to learn new skills, this is a very comprehensive update with plenty of supporting marketplace material. This article originally appeared in 3D World issue 224. Buy it here. Related articles: Create a game environment in UE4 9 Unreal Engine plugins for artists 8 best 3D tools of 2017 so far View the full article
-
Adobe has launched a series of mini-tutorials to help you get the most out of your Creative Cloud subscription. The Creative Coffee Break series aims to teach you new skills and show you how to push the limits of what you can create with your Adobe tools. Each video lasts under two minutes – which means you can easily grab a cup of coffee, take a mini break from work, and learn a new trick to improve your work. Subscribe to Adobe Creative Cloud hereThe first two tutorials are live now (scroll down to watch), and over the next few weeks Adobe will be rolling out six more bite-sized videos. Each is presented by an exciting up-and-coming creative, and will reveal a new technique or trick you can use in Adobe's flagship Creative Cloud programmes. There are Creative Coffee Break tutorials for InDesign, Lightroom, Illustrator, Adobe Stock (Adobe's impressive library of stock images), After Effects, Photoshop, and Premiere Pro. The first tutorial is presented by Ron Timehin, who shows you how to colour-grade video content in Adobe Premiere Pro. Watch it below. The second video comes from fine art and fashion photographer Adam Bird, and gives a rapid-fire look at how to retouch images in Adobe Photoshop using the Clone tool. You may feel like you know exactly what you're doing with your daily creative tools but trust us: there's plenty to learn! So, fire up your favourite app and try out some of their tips now. View the full article
-
When drawing pet portraits, the task is to not only create a drawing that’s pleasing to the eye, but one that captures the personality of that particular animal, and not just any dog. This sweet dog is Poppy, and she was drawn from a reference photo from her humans. In the video below, you'll see how this dog drawing came together, and underneath the video you can read step-by-step instructions to guide you through how to draw your own dog portrait. The paper used here is Italian Fabriano Hot Pressed watercolour paper, and the pencils are a variety of Derwent, Steadler Mars Lumigraph and Faber Castell 2B, 4B and 6B pencils. Faber Castell’s Putty eraser and a Helix battery-operated pencil sharpener complete the drawing kit we used here. Now let's get started. How to draw and paint - 100 pro tips and tutorials01. Get the initial drawing right Don't press too hard when creating your initial sketchArtists use a variety of different techniques to achieve their initial drawing. These include using a grid method, sketching, tracing and using projectors. However you get your initial drawing on paper, the key is to take your time and don’t press too hard. This initial sketch was made with a 2B clutch pencil. Make sure your outline drawing is correct before adding tone. 02. Start adding the tone You can add tone across the whole portrait at once, or do it an area at a timeOnce you're happy with the initial drawing, start to add detail and tone. Here a 4B Faber Castell pencil helped to build it up. It’s possible to work across the entire portrait at once and build up, or to work on single areas at a time. We're taking the latter approach in this portrait, starting with the eyes to bring the dog alive from the outset. 03. Get the eyes right Make the eyes come alive and the rest will followThe eyes are key, because it’s the first place that anyone will look. They must have the illusion of being shiny and alive, so it’s imperative to take your time in this area. Try to look at your reference photo and then back to your drawing constantly as you work. Leave the white of the paper for highlights and white fur. Build out from the eyes into the fur, still using the 4B to shade. Shade over the white patches of fur lightly, knocking back any areas that are overly bright. 04. Move on to the ears Dogs' ears are often silkier than the rest of their furThe ears are great fun to shade, as you're dealing with a different texture to the rest of the dog. Poppy's ears are silky smooth with a few light hairs on top. Pay attention to the direction you shade in, to match the undulations of the dog's ears. Here we worked outwards, beginning nearest the head and shading out to the tips of the ears. 05. Build darker tones Add some darker tones with a 6B pencilNow slowly build up the layers, starting to employ the 6B pencil, to achieve some darker tones. You don’t need the ears to be completely finished at this stage, as you can check back on these and all of the parts once the main part of the dog's face is done. It'll be easier to judge later how much darker they need to be compared to the rest of the portrait. 07. Tackle the fur Keep pencils sharp to define rough strands of furNow build up the layers gradually on the top of the dog's head. Here we used a 4B Faber Castell pencil for the darker fur, keeping it sharp. Again, work in the direction of the fur, shading the darker areas in between the lighter flecks. Use a putty eraser, moulded to a point, to lift off any unwanted tones. 07. Shade the dog's face As you fill in more of the dog's face, you can see which areas need moreContinue the same kind of fur texture as you work through each area of the dog's face, keeping your pencils sharp. With more surface area filled, here we could see that more tone needed to be added across Poppy’s forehead and ears. We worked back into those areas with a Faber Castell 6B and the Steadler Mars Lumigraph 4B. The Lumigraph creates a darker tone. 08. Draw a wet nose Use a light pressure to shade the noseFor the dog's wet nose, block the entire area in with a 4B pencil, using less pressure than before. Poppy’s muzzle is much lighter in tone. To convey the delicate shape of her mouth area, we shaded between the white hairs on her upper lip. If you cover too many lighter hairs, just use a putty eraser to bring them back. 09. Bring all the elements together Make sure the tones all work togetherAt this point you job is to balance tones across the dog's whole face and ears, making sure the tones work overall. Using the 4B Steadler Mars Lumigraph, we started to add some darker tones into the nose, nostrils and darker fur. We softened the transitions and shading over areas using the Derwent HB pencil to pull everything together. 10. Know when to put down the pencil If you can see the real dog's character, your portrait is doneTake your time shading the collar to make sure it’s correctly drawn, noting the highlights and shadows in the reference photograph. Keep the fur tones fairly light as you move down the chest to the edge of the drawing, so that it fades off nicely. Knowing when you are finished with a portrait is tricky. Stand back, look at it with fresh eyes and compare it with your photo. If you feel you’ve captured the dog in your reference photo, then you’ve achieved your goal. This article originally appeared in Paint & Draw issue 8. Buy it here. You might also like these related articles: How to draw a face How to hold a pencil correctly How to get started with oil painting View the full article
-
In a show of bold ultra-minimalism and anti-branding, Taylor Swift – who is arguably as much a brand as a musician – recently wiped all her social media accounts clear of all images and statuses. Every last one. The effect was remarkable, generating a buzz among devoted fans before she finally announced a new album, Reputation. So could this radical approach, a brand cleanse, be a tactic for other brands to try? Previously, all of Swift's platforms were accompanied by the message 'born in 1989', which kept her image consistent across the internet without having to write 'official' anywhere on the page. By clearing her profiles, Swift not only marked the start of a new stage of her career, but also whipped up a frenzy of media speculation and public attention in the process. Swift isn't the first big name to have purged her social media accounts – she follows in the footsteps of the likes of Radiohead and The 1975. A cleared slate creates mystery In terms of rebranding, allowing a short amount of time for a mysterious void between two looks seems to be a successful move for musicians hoping to generate a buzz. Radiohead teased fans with a clean slate before an album launchBack in 2016, melancholy music makers Radiohead pulled a similar stunt in the build up to the launch of their latest album, A Moon Shaped Pool. Mysterious leaflets quoting the line 'We know where you live' from upcoming single Burn The Witch were also distributed to fans across the UK to make anticipation levels max out. Meanwhile, Kerouac-quoting rockers The 1975 took more of an arty approach in 2015. As well as the band members appearing to quit social media, front man Matthew Healy posted a cryptic comic strip on Twitter and Instagram just before the blackout. Lines in the comic about 'killing rockstars' resulted in the band's followers going into meltdown, wondering just what it was up to. As it turns out, the band members returned online the next day with white and light pink cover images and profile pictures, and the whole situation was revealed to be a publicity stunt a few months before the release of the album I Like It When You Sleep, For You Are So Beautiful Yet So Unaware Of It. What separates Taylor Swift from these other profile purges is that she's got the whole process down to a slick art. While Radiohead was building on a five-year absence to help breed rumours, and The 1975 left it a few months before launching an album, Swift brought the turnaround down to just a handful of days. In fact, it wasn't long until she started Tweeting teasers of snake GIFs (above) and unveiling the cover art for her new album. The whole project came to a head this morning with the release of her new single 'Look What You Made Me Do' and an accompanying animated lyric music video. And in the place of 'born in 1989' there's an appropriately self-aware rebranded bio to herald the release of Reputation: 'The old Taylor can't come to the phone right now.' Silence can make a rebrand feel like a new launch This lyric from Swift's new single underlines how self-aware the rebrand isTaking the time to clear the decks before announcing a rebrand is a technique brands could do well to exploit on social media, according to Computer Arts magazine's editor and chair of the Brand Impact Awards judges, Nick Carson. "Sometimes, silence can be deafening – and that applies to visual noise as well as sound," he explains. "When it comes to brand standout, we're bombarded with stimuli, and nowhere is this more true than on the infinite treadmill of social media." "To wipe the slate clean and start again, like Taylor Swift did recently, is a brave move that resets the clock, and leaves fans hungry and expectant. There could be lessons there for any designer working in branding, as starting from scratch like this effectively turns a rebrand into a new launch." Aptly named Brandless sells products in ultra minimal packaging This radical promotion method isn't suitable for everyone, and we don't want our Twitter feed to become too desolate a place to scroll through. But we could see creative ways for big names to make the most of a purposeful lack of branding on social media, just as we have with some ultra-minimal packaging designs. Think of it as a type of digital minimalism. How much of a company or brand name could you take away and still come across as recognisable and engaging? Related articles: How to challenge brand stereotypes How to craft a brand voice 20 websites that use minimalism beautifully View the full article
-
CSS Grid Layout is growing in browser support every day and we can ship CSS Grid to production. The quick adoption of CSS Grid has been truly remarkable. Before we get to making a responsive portfolio site layout with CSS Grid, let’s clear a couple things up first: CSS Grid is not a replacement for Flexbox. It’s not even a replacement for floats. In fact, you might realise that we’ve been using Flexbox to do things that CSS Grid does much better. But instead of thinking in terms of replacement, we can think in terms of combination. CSS tricks to revolutionise your layoutsImagine a peanut butter and jelly sandwich. Peanut butter and jelly are pretty great on their own, but when they come together, a new thing is born and magic happens. This is what our layout tools are like. They are great at the things they do individually, but when they’re combined, magic happens and we can create new and exciting layouts. In this instance, we’ll make a web development PB&J of our own with CSS Grid and Flexbox. 01. Set up your markup Our layout doesn’t look like much, but the skeleton with our six items is in placeIn this tutorial we're going to use CSS Grid and Flexbox together to create a responsive portfolio layout. Each of these boxes are a different size, some of them span across rows and each box has a title that sits at the bottom. We’ll use some of the great alignment tools that come with Flexbox to make that happen. Let’s start by setting up our markup. We’ll duplicate that list item and everything in it six times so we have items to play with. In case you’re wondering, we’ve decided to use the ul element here because this is a list of entries. Feel free to use whatever feels right to you. Inside of the list item we have a div with the class of .boxes__text-wrapper that will contain the title of the case study and its accompanying description. 02. Write base styles We’ve set our font to something a bit nicer and removed the default margin from headings and paragraphsNow let's set some base styles to work with. We’ve changed the font to be Avenir. We’ll remove margin from our heading and paragraph, and reset the unordered list. We’ll also give each list item some default styles to help us see where each one is. 03. Set up your grid With only three lines, we’ve added a gutter between our Grid items and made them a bit tallerWe want to build our layout for mobile first. Setting up our grid on small screens is as easy as this: Grid will stack our items on top of one another because by default there is only one column. We’ll create some space between each case study by using grid-gap – this lets us add a gutter between rows and columns. Forget adding a margin to columns only to need complex nth-child selectors; gutters only appear between columns or rows, never after or before a column or row.grid-gap is the shorthand of grid-column-gap and grid-row-gap. Usually we’d use the longhand, but we’re going to overwrite both as the browser grows so we’ll use the shorthand. Next, we’ll use grid-auto-rows to tell our grid container the height of new rows. Grid will create new rows to place all of our content. We can control the size of these automatically-created rows with the grid-auto-rows property. We’re using a new function available to us: minmax(). With minmax() we can specify a minimum size and a maximum size. With our code we’re saying that we want our rows to be a minimum of 120px and a maximum of auto. We’re using auto here because we want our rows to grow if the content warrants it. 04. Set up large browser compatibility Our grid is taking shape! We have six columns to work with and less gutter between our grid itemsLet's set up our page so that when our browser is 40em or larger, our grid container has six columns of one fraction each. grid-template-columns is the property we use to tell our grid how many columns should exist. It accepts all the length units we know and love such as rem, em, px, percentages, vw, vh and fr. The fr is a new unit that we get with CSS Grid Layout. With it, we can tell the browser to do maths instead of us – excellent. By telling the browser to create six columns of one fraction, the browser will calculate the width of our grid container and split it into six equal columns. Also, because Grid is smart, it’ll only divide the space left over after calculating the gutter that we specified. 05. Style individual items Coffee makes everything look nicer doesn’t it? Also the subtle gradient makes our title and description stand outOur case studies look a little drab as just grey boxes. Let’s add a background image, get our titles to display at the bottom of these boxes and add a gradient so that our title stands out. This background image was a free image from Unsplash, but feel free to use whichever image you’d like. I’m also bringing Flexbox into the mix to align our text to the bottom of our boxes. You won’t see that yet, but as we place each different box you’ll eventually see it work. 06. Place items on the Grid Grid makes it insanely easy to size our Grid items however we’d like. But this is only the beginningUnfortunately, Grid does not have a way to automatically place items in the grid layout that we saw at the beginning. Fortunately for us, however, Grid does give us the tools to do it manually quite easily. In this tutorial we'll use nth-child to place each list item. In a production website we would advise to use a class that, given the right planning, could make it possible to automate layouts like this in a content-heavy site. Let’s get started with our first item. We’ll be putting all of our placement styles inside of that media query we wrote earlier because we want this layout to happen after our browser is 40em or larger. With nth-child we’re targeting the first list item. CSS Grid lets us easily place our items with grid-column and grid-row. There are many different ways to specify where items should be, but here we are telling our item to start at column line one and span the whole container with -1. Then, with grid-row, we are telling the item to span three rows. How do we know that three rows will be the size we want? Well, we specified the size of these rows with grid-auto-rows a few moments ago, and if we’re not happy with them we can change the minimum size. Let’s place the rest of our items. Isn’t it amazing how much control Grid Layout gives us? With only a few lines of code, we can put together a completely responsive layout that won’t break if any more items are added. Sure, they might look a little wonky because they’ll only take up one grid column and row by default, but it doesn’t break our layout. If we were doing this with floats, and fixed widths and heights, we’d be in a bind if more content were to be added. Our finished layout! Isn’t this amazing? Grid allows us to place our items easily in two dimensionsA quick aside about older browsers OK, it’s time to address the elephant in the room. ‘What about older browsers?’ The answer to this question is the same as it is for any new feature in CSS: use feature queries and embrace the cascade. Feature queries are very well supported, and where they’re not we can place our fallback first. For example, we’d write something along the lines of: Writing our code in this way means that if the browser understands Grid Layout, it’ll use that instead of Flexbox. Also, because we’re embracing the cascade, browsers that don’t understand feature queries will ignore them and already have the information they need. We might need to plan how we write our styles a little more than usual, but by doing it we can create great-looking layouts with sensible fallbacks. Also, as time goes on, there will only be more and more support for CSS Grid. Just think how great it would be to later delete our fallbacks and leave all the Grid-related CSS. As you learn more about Grid, you’ll realise that it does lots of things we do right now with many fewer lines of CSS. This article originally appeared in net magazine issue 294. Buy it here. Read more: A guide to writing better CSS 10 golden rules for responsive SVGs Create responsive forms and tables View the full article
-
This month's hot new tools for illustrators include a variety of digital and traditional tools. Here we've found some of the best pencils, erasers, pen displays and accessories. Plus, we've even found some useful tools for learning how to improve your drawing and illustration techniques. The prices given here are full retail prices, rounded up appropriately. If you're interested in buying any of these illustrating tools, click on the prices to go to Amazon or look around for the best price. 01. Lamicall Tablet Stand The Lamicall stand works with a whole range of devices$70/£57 If you have a tablet for sketching and illustrating on – unless you have a Surface Pro with its own kickstand – it's a good idea to get a stand for it, to help you angle it better. This Lamicall stand works with any devices – we used it with an iPhone 7 and iPad Pro. The base has a low centre of gravity, which gives the stand increased stability. It's also currently on sale for $18.99/£15.99 on Amazon. 02. Derwent graphic pencils This set is a great all-rounder$46/£25 If you're looking for an all-round great pencil set, check out these from Derwent. This set of 24 graphic pencils contains a full range from 9B to 9H. Although the pencils come with a metal holding tin, you're better off getting another case. The metal tin is a bit of a drag to use as the pencils don't always come out easily, and it's often difficult to see which ones you're grabbing. The pencils themselves are great, though. 03. Prismacolor non-photo blue pencil This pencil is perfect for scanning sketches into your computer$4.75/£5.04 If you plan on combining traditional and digital methods, you'll likely start your sketch on paper and then scan it into your computer (see our guide to learn how to transform a pencil sketch in Photoshop). That being the case, it's helpful to use a non-photo blue pencil. This one from Prismacolor is excellent. The lines are nice and bold, yet still soft enough that they're not picked up when scanning. 04. Strathmore 400 Series drawing pad This wirebound notebook works well whatever your drawing tool of choice$14.50/£7.89 This 43.2 x 35.6cm (14 x 17-inch) wirebound notebook works well with pencils, inks, and markers. Whether you plan to scan your drawing or you decide to go hand-drawn with the whole piece on the page, the Strathmore 400 Series Drawing pad is a fine choice. 05. Staedtler Mars plastic erasers Cheap but effective$6.19/£4.83 for four You can't go wrong with Staedtler Mars plastic erasers. Although the Mars plastic erasers tend to leave a few more crumbs than other erasers, they're still top-notch. Besides, you can't beat the price. 06. Wacom Cintiq Pro 13-inch The Cintiq Pro is aimed at newer artists$999.95/£899 Speaking about price, here's a Wacom Cintiq with a price-point that most illustrators can handle. This 'entry-level' Cintiq is perfect for new artists or artists who can't yet afford one of the larger, more robust models. Coming in at just under $1,000/£900 full price, the Wacom Cintiq Pro 13 features HD resolution (1920 x 1080px), the Wacom Pro Pen 2, and multi-touch control. 07. Wacom Express Key Remote Make your workflow more efficient with this remote control$105/£90 If you're looking for a way to enhance your Wacom experience and make your workflow more efficient, check out the Wacom Express Key Remote. The Wacom Express Key Remote offers 17 customisable buttons and a Touch Ring – all of which allow you to set up and assign shortcuts within your creative software applications. 08. Kensington cooling stand This cooling stand is ideal for use with a tablet or laptop$27/£15 Although the Wacom Cintiq Pro 13 comes with a built-in stand, the Kensington SmartFit Easy Riser cooling stand – which is one of the stands recommended by Wacom – adds a nice touch. This stand offers a 50 degree tilt angle and padded inserts to help keep your device in place. As an added bonus, you can use this stand for your laptop, too! 09. Society of Visual Storytelling This site offers top-quality tutorials for artists$14.99 per month SVSLearn offers high-quality tutorials and live webinars for artists and illustrators. If your budget is small and your desire to learn is big, SVSLearn has you covered. (Note: I've been a longtime member of SVSLearn, and I can't recommend it enough.) 10. Strathmore Learning Series Drawing Cartoons Pad $10/£30 Strathmore, Christopher Hart, and other professional artists team up to bring us these super cool art learning drawing pads. The Strathmore 200 Learning Series Drawing Pads include 30 step-by-step lessons, a few pages of tips and tricks, and several blank practice sheets. Also, each lesson has enough room to practice alongside on the same page. This one covers drawing cartoons, but there are many others in the series (as the video above shows). See more on the Strathmore Learning Series website. Read more: How to convey sound in a painting 50 tips that will make you a better illustrator Microsoft Surface Pro review View the full article
-
Having a website or app that provides a service isn't enough. Users want products that are intuitive and easy to use, too. Learn the key to designing engaging website and app user interfaces and experiences with the UI and UX Design Bootcamp. You can get it on sale now for 96% off the full retail price. The UI and UX Design Bootcamp consists of six courses spanning 207 lessons and more than 29 hours of amazing design training taught by pros. Lessons include how to create and run a successful UX project; rapid prototyping with AngularJS and Ionic to build a data-driven mobile app; and how to design UX and UI for Android Marshmallow. This bundle is a can't-miss resource for anyone looking to pick up the principles of engaging and interactive web and app design. No matter what you’re building or what platform you're working with, you’ll learn important concepts to help increase your user base and improve the functionality to keep your visitors coming back. You can get the UI and UX Design Bootcamp on sale right now for just $39 (approx £30). That's a 96% saving off the retail price of $995. You won't find a better offer for a bundle that will improve your website and app design projects, so grab this deal today! This great deal comes courtesy of the Creative Bloq Deals store – a creative marketplace that's dedicated to ensuring you save money on the items that improve your design life. We all like a special offer or two, particularly with creative tools and design assets often being eye-wateringly expensive. That's why the Creative Bloq Deals store is committed to bringing you useful deals, freebies and giveaways on design assets (logos, templates, icons, fonts, vectors and more), tutorials, e-learning, inspirational items, hardware and more. There are even top competitions like the popular iPad Pro Giveaway. Every day of the working week we feature a new offer, freebie or contest – if you miss one, you can easily find past deals posts on the Deals Staff author page. Plus, you can get in touch with any feedback at: deals@creativebloq.com View the full article
-
Finding font pairings that set each other off, don't fight the eye for attention, and harmonise without becoming homogenous and dull is tough for graphic designers. The age-old rule goes as follows: concord or contrast, but don't conflict. But with so many professional typefaces and free fonts to choose from, how do you find two that work in harmony? Here we bring you top font pairing tips, followed by 20 examples of perfect font pairings. Tip 1: Use font superfamilies The easiest way to find perfect font pairings is by using different fonts within the same overarching typeface family. Find a so-called 'superfamily' and you'll have a ready-made range of weights, styles and classifications that are specifically designed to work together. A good superfamily will include serif and a sans serif version of the same typeface: famous examples include Lucida/Lucida Sans and Meta/Meta Sans. Best free fonts for designersTip 2: Pair contrasting typefaces Contrast, as the name implies, is about finding totally different, but still complementary typefaces that are each fit for their intended application. Traditionally, this involves pairing a serif with a sans serif. Typefaces will generally conflict if they are too similar: two ever-so-slightly different serifs or sans serifs rarely creates nice font pairings. As a designer, the important thing is to establish a clear hierarchy. This could be as simple as varying size and weight of the same typeface, but where the typeface varies, that's where careful font pairing is crucial. If you have a display face packed with unique personality, you'll need something more neutral to do the hard work. Tip 3: Pair type sub-categories Of course, 'serif' and 'sans serif' are themselves broad classifications – each split into several sub-categories. Generally speaking, Old Style serifs such as Bembo, Caslon and Garamond will combine well with Humanist sans serifs, such as Gill Sans and Lucida Grande. Meanwhile, Transitional serifs have a stronger contrast between thick and thin strokes – examples include Bookman, Mrs. Eaves, Perpetua and Times. These pair with Geometric sans serifs such as Avant Garde, Avenir, Century Gothic, Eurostile, Futura and Univers. Finally, Modern serifs have an often very dramatic contrast between thick and thin for a more pronounced, stylised effect, as well as a larger x-height. Included in this third sub-category are Bodoni, Didot, New Century Schoolbook and Walbaum. Again, Geometric sans serifs marry best with these. So what does all this actually look like in practice? Here's our a reference list of tried-and-testing font pairings that are guaranteed to avoid conflict. 01. Freight Sans and Freight Text Freight is available in a range of weights and stylesAn example of a superfamily, GarageFonts' Freight is available in a large range of weights and styles, including Sans, Text, Display and Micro versions – giving you a versatile typographic toolkit. 02. Super Grotesk and Minion Pro This match creates a luxurious finishThe ever-popular serifed Minion Pro works perfectly as a headlining font in this luxurious pairing. Coupled with the nimble sans-serif Super Grotesk, these two fonts carry a modern sense of elegance with minimal effort. 03. Kaufmann and NeutraDemi At a dash of handwritten flair with this font pairingThe flowing, handwritten stylings of Kaufmann add a touch of personality to this odd couple. Offsetting the straight and angular sans-serifed NeutraDemi perfectly, these two might not make a likely match, but that doesn't stop them playing off one another beautifully. 04. Brandon Grotesque and Minion Pro Minion Pro is the perfect choice for small textThe reliable Minion Pro makes another appearance, this time playing second fiddle to the bold and attention-grabbing Brandon Grotesque. It's a classic serif and sans-serif font pairing, with both typefaces remaining crisp and easy to scan. 05. Helvetica Neue and Garamond A type match made in heavenA famously harmonious duo, with the ubiquitous Neo-Grotesque sans serif for headlines, and the classic Old Style serif for text. Mix up weights and sizes between the two neutral families to establish hierarchy. 06. Caslon and Myriad 1700s meets late 20th centuryAnother classic font pairing, this time between an 18th century Old Style serif and a late-20th century Humanist sans serif. Myriad is famously used in Apple's corporate communication, as well as in the Rolls Royce logo. 07. Fontin and Fontin Sans These Dutch typefaces are ideal partnersOur second superfamily, Fontin was designed by Dutch foundry exljbris specifically to be used at small sizes, with a loose spacing and tall x-height. Fontin Sans is designed as an ideal partner for it. 08. Minion and Poppl-Laudatio Two typefaces with personality that bond perfectlyAn Old Style serif typeface with personality, Minion was designed in 1990 but inspired by late Renaissance era type. Although technically a sans serif, Poppl-Laudatio's subtle flared details bring out its pronounced serifs. 09. Liberation Serif and Liberation Sans An open source superfamily pairingAnother superfamily, which also includes Sans Narrow and Mono variations, Liberation was intended as an open-source substitute for many commonly used Windows fonts, such as Arial, Times New Roman and Courier New. 10. Trade Gothic Bold and Sabon These readable typefaces combine wellThis pairing is particularly effective when Trade Gothic is used in its Bold weight for headlines, to set off Jan Tschichold's classic Old Style serif face for text. Both typefaces are highly readable, with a tall x-height, and combine well. 11. Scala and Scala Sans A hugely versatile pairingFontFont's superfamily began with the serif version in 1990, followed in '92 by its sans serif companion. With small caps, various ligatures and old-style figures, it's hugely versatile and widely used in publishing. 12. Rockwell Bold and Bembo Bold and attention-grabbing meets calmly neutralOne of the classic slab serifs, Rockwell was designed in the 1930s and has a huge amount of personality and attention-grabbing potential when used bold. The much more conservative serif Bembo is neutral but versatile. 13. Myriad Black and Minion A great combination for clear hierarchyMyriad and Minion have already cropped up in different font pairings earlier in the list, but this combination of the shouty ultra-bold Black version of the former and the text weight of the latter achieves clear hierarchy. 14. Souvenir and Futura Bold Two strong type personalities that work well togetherMixing two strong typographic personalities rarely works, as they end up fighting. Souvenir is softer and more playful than many of its Old Style serif counterparts, while Futura Bold is quirky without being too dominant. 15. Dax Bold and Caslon Caslon's second entry on this listOne of the most versatile Old Style serifs, Caslon also appeared earlier on this list. Its neutrality lets the informal, modern Dax Bold deliver strong personality for a headline without competing for attention. 16. Aviano and Aviano Sans Two tilting typefaces working in harmonyOnly available in all-caps varieties, Aviano has sharp, edgy serifs that give it a distinctive personality – while its sans serif version is smoother. They combine well to create hierarchy between two titling faces. 17. Antique Olive Bold and Chaparral A quite distinctive font pairingInitially designed as an alternative to Helvetica and Univers, Antique Olive has a very tall x-height with short ascenders and descenders that make it highly distinctive in display form. Chaparral has a modern feeling but is a much more neutral slab serif. 18. TheSerif and TheSans These typefaces were made to work togetherThe rather straightforward naming strategy within LucasFonts’ Thesis typeface superfamily makes the foundry's intentions pretty clear: these are totally complementary, and each comes with its own sub-varieties. 19. Renault Light and Apex-New Contemporary sans serif meets authoritative serifAn ideal combination for formal corporate use: both Renault and Apex-New have a very similar ratio of x-height to body height for an effortless partnership between contemporary sans serif and authoritative serif. 20. Calluna and Calluna Sans Calluna was born from experimentationAnother exljbris creation, Calluna was born out of an experiment with adding slab serifs to Museo, giving designer Jos Buivenga the idea of 'serifs with direction'. The result is a highly distinctive text face that later spawned a sans serif companion. You might like these other typography articles: 20 fonts every graphic designer should own How to create your own font 5 fonts created by famous designers and why they work View the full article
-
The idea of a music video is to generate promotion; to give extra air time to an artist in front of a chosen demographic, with the aim of increasing awareness and sales. The MTV Generation saw the creation of numerous animated videos, but as technology became more accessible and the platforms available for showing media grew, the possibilities for animation in music videos increased. The list below has been compiled to show a broad range of the animated music videos that are out there. Not all of them are strictly 'animation' (in the cartoon sense); some are motion graphics, 3D, lo-fi, hand-drawn and so on. And they're in no particular order... 01. Taylor Swift - Look What You Made Me Do (Lyric Video) Released: 2017 Directed by: ODD Taylor Swift marked the start of her musical return with this animated video created by ODD. Featuring images of snakes that have been popping up on Swift's recently cleansed social media profiles, this video continues the long tradition of listeners indulging in rampant speculation as to who the pop phenomenon is referring to. Interestingly, the official title of this animation points out that it's a lyric video. This of course makes sense when you watch it and see each syllable of Swift's lyrics spelled out on screen, but it makes us wonder if there's a more traditional, non-animated video on the way for this song, possibly to tie in with an official album launch. 02. The Killers – Miss Atomic Bomb Released: 2012 Directed by: Warren Fu Director Warren Fu had previously worked with the band on their video for single Runaways, and returned to take charge of this, their second single. Effortlessly fusing the media of animation and stunning live action shots, this animated music video brings a heartbreaking love story to life. Josh Goldstein worked as the producer, with Jeff Pantaleo as executive producer and Shawn Kim as director of photography. Titmouse Studio was responsible for the exceptional animation. 03. Tame Impala – Feels Like We Only Go Backwards Released: 2012 Directed by: Becky Sloan, Joseph Pelling You could say that the inspiration for this animated music video lies somewhere between Peter Gabriel's Sledgehammer and The White Stripes' Seven Nation Army. The amount of work that's clearly gone into it makes it a true work of art. Directors Becky Sloan and Joseph Pelling have a creative chemistry that always produces the best results, whether it's applied to set design, window displays, Christmas cards or TV idents. Feels Like We Only Go Backwards is an absolute delight. 04. Home and Dry – Ghosts Are Dancing Released: 2012 Directed by: Maxime Causeret and Gilles Deschaud This video for Parisian art-rock band Home and Dry is a personal project made mostly using Houdini. The dramatic effect was created by filming a motion capture of the band's lead singer Laure Laffererie's face with two cameras. The effect was then created in 2D using motion vector and 3D lighting. Sadly it doesn't look like the band have put out new music since 2012, but we think this video is still worth a watch. 05. Steven Wilson – The Raven That Refused To Sing Released: 2013 Directed by: Jessica Cope and Simon Cartright Clearly inspired by the work of Russian animator Yuriy Norshteyn (best known for the incredible Tale of Tales) the intense atmosphere of this imaginative and thought-provoking short brings the haunting story of the song to evocative life. The stark and simplistic animation style – based largely on the gentle movements of hand-cut paper models – fits the mood perfectly. 06. The Kleenrz – Sandman Released: 2012 Directed by: Jason Brown and Aya Yamasaki Combining children's television-style cartoon characters with live action, this music video follows the Sandman as he works with his two helper umbrella girls, and reveals what goes on inside the big bag he carries. The action cleverly synchronises with lyrics by The Kleenrz, a collaboration by LA rappers Self Jupiter and Kenny. The beauty of this approach is that it gets you to listen carefully to the lyrics. This is something that can be difficult to achieve with music videos, as often the action distracts from the song itself. 07. Smashing Pumpkins – Tonight, Tonight Released: 1996 Directed by: Jonathan Dayton and Valerie Faris US husband and wife duo Jonathan Dayton and Valerie Faris have directed music videos for the likes of R.E.M. and Paula Abdul, as well as Little Miss Sunshine. They paid homage to silent film director Georges Méliès' A Trip to the Moon for this animated video. To me, this is possibly one of the greatest music videos ever made. 08. Daft Punk – One More Time Released: 2000 Directed by: Kazuhisa Takenouchi The 2003 anime film Interstella 5555: The 5tory of the 5ecret 5tar 5ystem, also directed by Kazuhisa Takenouchi, would be a continuation of the stories told in Daft Punk videos One More Time; Aerodynamic; Digital Love; and Harder, Better, Faster, Stronger. 09. Queens of the Stone Age – Go With The Flow Released: 2003 Directed by: Shynola Shynola are a four-piece collective who have worked with the likes of Beck, Radiohead and Blur, while also producing animation sequences for The IT Crowd and Scott Pilgrim Vs The World. 10. The Cribs – Mirror Kissers Released: 2006 Produced by: Diamond Dogs UK music video directors Diamond Dogs (Olly Williams and Philip Sansom) have directed for the likes of The Hoosiers, Jack Peñate and Maximo Park, and have a very distinct style. The video for Mirror Kissers was shot on a plain white background, then around 2,740 frames were printed, photocopied and manipulated before being edited back together to produce this fascinating video. The concept works very well – it's stylistically spot on. It's not your typical music video as it's laced with blemishes and is rather ugly, all of which actually compliments the track it's supporting. 11. Gorillaz – El Mañana Released: 2006 Directed by: Pete Candeland Pete Candeland boast a huge repertoire of well-known pieces: the BBC's 2008 and 2012 Olympic marketing campaign, the Beatle's RockBand promos, plus numerous music videos for Gorillaz. You couldn't compile a list of animated music videos and not include Gorillaz, a band that was seemingly created for this format. 12. Los Campesinos! – We Throw Parties, You Throw Knives'/'You, Me, Dancing! Released: 2007 Produced by: Monkmus American animator Monkmus has created an array of music videos for the likes of Badly Drawn Boy, Mogwai and Death Cab for Cutie. This double effort for Los Campesinos! stood out the most for me as I love the contrasts and similarities between war and party. The naive style of the illustration is beautiful and reminds me of the tail end of the infamous Dumbo scene with the racing elephants. 13. MGMT – Time To Pretend Released: 2008 Directed by: Ray Tintori American Director Ray Tintori has directed music videos for The Cool Kids and The Killers, as well as MGMT. I love the lo-fi and slightly dystopian look of this video. It's unpolished and very raw around the edges, but also has a very warm psychedelic quality. 14. London Grammar – Hey Now Released: 2014 Directed by: Chris Ullens Chris Ullen's stunningly atmospheric video for London Grammar's Hey Now perfectly reflects the song. For this work Ullen collaborated with string artist Sebastien Preschoux. In the video, balls of string and light dance amongst trees as a forest comes alive in a night time setting. 15. REM – Man Sized Wreath Released: 2008 Directed by: CRUSH inc. Toronto-based CRUSH inc. teamed up with REM to produce this very effective effort. CRUSH inc. have notably worked with IKEA, Budweiser and Nintendo. I'm really intrigued by the many different styles in this video – from low-fi techniques, to 3D modelling via pixelated video games graphics. Normally, this really wouldn't work well together – but strangely enough, here it really does. Next page: Basement Jaxx, Coldplay, The Shins, and more! 16. Basement Jaxx – My Turn Released: 2009 Produced by: Tomek Ducki Tomak Ducki is an animator and designer based in Krakow, Poland. He's had numerous festival screenings and won awards for his distinct style of work. I really appreciate the minimal style of this video; the colours work so well together and give it quite a mystical vibe. 17. Everything Everything – Schoolin' Released: 2010 Directed by: Nicos Livesey London-based freelance illustrator and animator Nicos Livesey produced this fascinating minimalist music video for Everything Everything. I really like the style and pace of this video, and how it tries to capture as many of the lyrics as possible, with brightly coloured, but minimal imagery. 18. Sebastien Tellier – Look Released: 2010 Directed by: Mrzyk & Moriceau This wonderfully creative music video for Sebastien Tellier follows around a female bottom for the duration, but shows the evolution and devolution of everything around her, from clothing, to grass and her skeleton. For a simple outline animation, it's very captivating. Mrzyk & Moriceau's style of capturing a journey is also visible in their video for Air's Sing Sang Sung. 19. Coldplay – Always in my Head Released: 2014 Directed by: Alasdair+Jock Animation duo Alasdair + Jock created the animation for a full 43-minute stream of Coldplay's sixth studio album, Ghost Stories. They used Mila Fürstová's beautiful album artwork – etched angel wings over an ocean – as the basis for their video, and brought it to life using a combination of 3D, 2D cutouts and 2D drawings. A total of 50 individual sections were created before being edited to ensure the line style of the animation exactly replicated that of the album artwork. The result is mesmerising. 20. The Maccabees – No Kind Words Released: 2009 Directed by: Alexander Brown and Orlando Weeks This video features actors Mathew Horne (of Gavin & Stacey fame) and Matthew Baynton (who also starred in the comedy series) in what reminds me of an Alas Smith and Jones conversation piece, laced with pixelated video game visuals – before the camera swings round to a front-on of Mat Horne, complete with neon green visuals tracing his face. Brown has also worked on music videos for James Blake, and Gabrielle Aplin's The Power of Love. 21. Is Tropical – The Greeks Released: 2011 Produced by: Seven This animated music video went on to win at the 2011 UKMVA's for Best Indie/Rock Video – UK and Best Animation in a Video. It's a perfect blend of live action footage of children playing with toy guns, plus animation bringing the guns to life, in a dark-yet-naive video. 22. TOY – Lose My Way Released: 2012 Produced by: Brass Moustache Brass Moustache is an independent film collective based in London. Individually, they are musicians, photographers, illustrators and journalists. This effort for TOY is simply done, but extremely effective – a wide one-shot performance overlaid with a beat-matched psych particle system and sections of the singer/guitarist performing. 23. House Shoes ft. Danny Brown – Sweet Released: 2012 Directed by: RUFFMERCY Russ Murphy/RUFFMERCY has animated and produced numerous videos for the likes of Paul Weller, as well as live loops for Ministry of Sound. RUFFMERCY has a very interesting visual style. This video in particular boasts a trippy flow of melting faces. 24. The Shins – Rifles Spiral Released: 2012 Directed by: Jamie Caliri Jamie Caliri is a Grammy-nominated director who created this very eerie-looking music video for The Shins. The video follows a battle between magicians and a rabbit. I love the aesthetic of this. It's very unpolished and rather Tim Burton-esque, and really nicely blends 2D and 3D elements. 25. Silvery – Horrors Released: 2008 Produced by: Alasdair + Jock Alasdair + Jock met at Edinburgh College of Art and have gone on to produce numerous music videos, win multiple awards and produce sections for 3D feature, A Liar's Autobiography, by Graham Chapman (of Monty Python fame). I love the flow of this video. The simplicity of the moments and the intensity of the aesthetics really go well to compliment each other and the track itself. Next page: the videos that didn't quite make the cut! HONOURABLE MENTIONS (or ones that are in most lists...) Dire Straits – Money For Nothing Released: 1987 Directed by: Steve Barron Peter Gabriel – Sledgehammer Released: 1986 Directed by: Stephen R Johnson Radiohead – Paranoid Android Released: 2007 Directed by: Magnus Carlsson Blur – Coffee & TV Released: 1999 Directed by: Hammer & Tongs White Stripes – Fell In Love With a Girl Released: 2002 Directed by: Michel Gondry Jack Beats – Careless Released: 2012 Directed by: Rob+Rob Also read: The 10 biggest 3D movies of 2017 5 best laptops for video editing in 2017 The best video editing software 2017 View the full article
-
Getting your business card right is perhaps the ultimate test of your typographic skills. With only a small amount of space, it’s a challenge to create something fresh, original and distinctive while still including all the practical information you need to convey. Here we bring you nine business card designs by type and lettering designers that creatives of all stripes can learn from. 01. Jessica Hische Hische’s business cards put a smile on people’s faces at Adobe MaxJessica Hische is a typographer and illustrator working in San Francisco and Brooklyn. Actively involved in the type community (she served on the Type Directors Club board from 2012 to 2015), her clients so far have included Wes Anderson, The United States Postal Service, Tiffany & Co, The New York Times, Penguin Books, Target, Starbucks, American Express, and Wired Magazine. Hische ordered these ‘quickie’ business cards online from Moo’s Luxe line so she could hand them out at the Adobe Max event in LA. It just goes to show that you don’t need to pay for expensive finishes to make an impact. A dash of wit, a utilitarian design and a clear, legible font can be far more effective. 02. Happy Letters The delight is in the detail with this agency’s letterpress cardsHappy Letters is a lettering, calligraphy and graphic design studio based in Madrid. And it announces itself in style with these sumptuous, blind-pressed business cards. The textured white background combines a variety of typographic and illustrative styles that say ‘hello’ in a number of different languages. It’s a lovely touch that you may not even notice at first, but it leaves a positive lasting impression. 03. Adam G Gonzalez’s monochrome business cards are beautiful in their simplicityAdam Gonzalez is a full-time designer with a strong focus on typography and illustration. Based in Los Angeles, his skills include hand lettering and sign painting. These lovely letterpress printed business cards show just how simple a design can be, while still effortlessly communicating the skills and artistic judgement of its maker. 04. Sean Tulgetske Tulgetske’s business cards combine the best of vintage and modern styleSean Tulgetske is a freelance designer based in Michigan. With clients including ESPN, Disney, Pixar, VH1, Target, Southwest Airlines and Nike, his work is strongly focused on hand lettering, type design and illustration. We love the hand-stamped effect used in his business cards, which helps the design evoke both a sense of the retro and a feeling of modernity. 05. Sean McCabe McCabe’s letterpress cards draw on the power of minimalismSean McCabe is a hand lettering artist from San Antonio, Texas, who also runs online training courses and podcasts under the monicker Seanwes. These letterpress cards harness the power of minimalism and white space, conveying his skills far more powerfully than something busy and flashy might have done. 06. Studio Moross These multicoloured business cards suggest, rather than reproduce, Moross's characteristic lettering designsStudio Moross is the creative home of Kate Moross, a London-based art director best known for her colourful, freeform lettering designs. Rather than simply reproduce her crazy letterforms – which might prove a little complex and overpowering for a business card – these cards represent her style in a subtler fashion, through their multiple, bright hues and the artful squiggle running across them. 07. Branding with Type Romanos puts his own fonts front and centre on his business cards Alberto Romanos is founder and type designer of Branding With Type, a Spanish studio that designs bespoke fonts for brands. As such, he needed the type on his business cards (the company’s own Quinta, and Flat Sans for Flat 101) to be front and centre. Then he added a big splash of neon yellow, and put it all through silkscreen and letterpress printing processes. That might sound a bit nuts, but the result is pretty sophisticated, as you can see. 08. Andrew Wolfenden Wolfenden makes white-on-black type work well in these cleverly designed cards Andrew Wolfenden is a freelance graphic artist and designer from Liverpool based in Road Studios who puts a strong focus on typography in his work. Putting small white type on a black background means entering a legibility minefield, but Wolfenden’s smart, geometric design is eminently readable. 09. Erik Spiekermann For Spiekermann, type is all you needErik Spiekermann is one of the world’s most respected names in type design. The co-founder of FontShop, two of his typefaces, FF Meta and ITC Officina, are considered modern classics. Plus he’s been behind the design of brands such as Audi, Bosch, VW, German Railways and Heidelberg Printing. And his business card conveys a powerful message: once you’ve got the typography of your design right, what more do you need? View the full article
-
Digital artists are in for a treat this Bank Holiday weekend as Amazon have got a sale on Wacom and Bamboo gear. That's right, by heading over to Amazon's Shop the Future weekend deals page, artists and illustrators can pick up graphics tablets, pens and gadget cases for less. You'll also find deals on the latest cutting-edge electronics, home, health and beauty as well as food and drink products. Let's dive in and see exactly what's up for grabs for digital artists – and how much you can save. Save 30%: Wacom Intuos Pro Small Graphics Tablet First up is the Wacom Intuos Pro Small Graphics Tablet. Starting at midnight on 25 August and running through until 23:59 on 30 August, this offer sees the popular tablet retailing for just £161.99. That's a 30 per cent discount off the normal RRP. Save 20%: Wacom Intuos Photo Pen and Touch Graphics Tablet, Small - Black Running over the same time is a discount on Wacom's Intuos Photo Pen and Touch Graphics Tablet small black model. Compared to the tablet's regular price, you can save 20 per cent off RRP and snap it up for just £71.99. Save 42%: Bamboo Stylus Duo 3 for Media Tablet/PC - Silver This weekend offer sees a huge 42 per cent coming off the RRP of the smudge-free navigation tool. Perfect for smooth handwriting and compatible with most tablets, smartphones and touch screen PCs, this stylus can be yours for just £17.99. Save 46%: Bamboo Spark Gadget Case - Grey There's 46 per cent off RRP to be saved this weekend on Wacom's grey Bamboo Spark Gadget Case. Up for grabs for just £64.99, this is an ideal opportunity to snap up this tool, which turns handwritten notes into digital assets. View the full article
-
Drawing with charcoal, pastel and chalk is addictive. Maybe it’s because the results are so fast and immediate, or maybe because the look is so dang cool, but people love to learn how to draw with charcoal. Even the great Michelangelo loved drawing with charcoal. How to draw and paint - 100 pro tips and tutorialsWhatever the reasons for charcoal's popularity as a medium, and there are many, these charcoal drawing techniques are used by many artists every day. So let's jump in, to reveal some handy tips and tricks. Check out the video below, then follow the steps to success. Any type of charcoal will do for these tips. Just ask at your local art store and they will guide you (see point nine for a little about different types). If this inspires you to educate yourself further, why not head over to Schoolism.com to discover courses, workshops and more. It’s an amazing way to study with the pros. 01. Concentrate on the essence This image is all about Paul and everything supports or revolves around that main idea or essenceIt’s been said, "The main thing is to keep the main thing the main thing." Artistically speaking, the main thing is called the essence. Remember when creating a piece the primary question to be asking yourself is, "What is this image about?", or "What do I want to say?". Once you settle that – the 'main idea' or the essence – then everything you do from that point on, every move and every detail you put in or leave out, should strengthen the 'main thing' or the essence of the piece. 02. Learn the value of value Learn how to organise lights and darksThe word 'value' gets thrown around a lot in art and can seem confusing. What we mean by 'value' in art is simply a walk from white to black (light to dark) using one to 10. One is the white of the page and 10 is black, so a five, 50% or 'halftone' is a medium grey, halfway between white and black. Make sense? So every image is composed of values (darks or lights) regardless of colour. To help you with this, work from the middle out, keeping your darkest dark (the shadows) no darker than a six or a seven value and your lightest (the light effect or everything in the light) a three or four value. Work your way towards the darks (accents) and your whites (highlights). Think of accents and highlights as twins just living in different neighbourhoods. They are not the most important element of your image. They serve the whole. 03. Use the hierarchy of value You can control the eye using value. Whaaa?It’s safe to say that a successful image is one that quickly reads well and has power to touch you. Using value or tone and assigning different areas of the image to lesser or darker tones can be a very helpful tool. In the image above, based on a photograph by Josiah Bice, the darkest values are used on the subject. Notice the lightest value on his cheek and the darkest value reserved for the mass of his body. Using a hierarchy of value allows you to direct the viewer to what you want them to see first. In this case, it’s Steve smoking his pipe. Everything else becomes less important. He is the essence of the image. 04. Squint Squinting your eyes simplifies thingsSometimes 20/20 vision is not helpful. When we observe whatever we are drawing there is a ton of information going in through the eye gate. And an image filled with needless details cripples the effect of a piece. The goal is to edit and simplify. Squinting our eyes just enough simplifies values and over all helps us to see a simplified version of what we are looking at. Squinting also helps you to see simple shapes very clearly. Nailing those simple shapes helps with the overall essence of the piece. 05. Try thick and thin lines Not all lines are created equalUsing thick and thin lines is an interesting idea and it’s funny how many artists miss this very helpful concept/tool in drawing. In a drawing, if every line has the same width or is drawn using the same exact pressure it looks like a colouring book drawing and can come across as very monotonous and boring. So using thick and thin lines in your drawing can make it so much livelier. So how do you use it, and what do you need to know? The simple rule of thumb is that lines on top of things are thinner since light is hitting them and lines underneath objects can be thicker since there are usually shadows underneath things. That’s it. Wow – that was simple. Check out the various dancing lines and thickness on the dog drawing. Now you know. 06. Use an eraser Sometimes light can be 'erased' outThe cool thing about charcoal is that it’s easy to control it. You can move it around easily. Once you apply charcoal you can remove it or erase out where you don’t desire it. In the picture above, the erased part is marking out where the light is hitting the model's head. 07. Get a few tools You just might need a tool beltThere are many tools of the trade for an artist, and for charcoals there are cool ones to have. The image above shows some great ones: a really small fine line eraser, a kneaded eraser that you can bend and squash, and a hardcore eraser pen for those tough heavy lifting erasing jobs. Make a one-stroke mass of charcoalUsing charcoal or pastels requires us to 'move' or apply the medium, and there are many ways to accomplish this. Your finger is the most obvious, yet can be streaky or too small. A Webril Wipe is a great tool for making a large mass in one stroke. 08. Wear a glove This is an oil-free zoneDid you know that your hand has oils on the surface that can damage the purity of your paper or stock and fight against you? The oils on your hand can even attach to your paper and repel your medium. To stop this problem, wear a glove or place another piece of paper under your hand to protect your artwork. 09. Charcoal pencils These are a good place to startCharcoals come in many forms, from pencils to thick sticks to chunks, and whatever you decide to use is up to you. In the above photo are three good examples of charcoal pencils. Know that they can be messy, so afterward using them you can spray your drawing with a workable fixative to control them. 10. Press on You can fly – just keep on tryingRemember that drawing is difficult and at times frustrating. Stay at it. Creating art is extremely hard to pull off and feeling happy about your progress can take time. Learning and growing is a community project. Reach out and network with a few artists you admire. Be humble and teachable and ask them for insight about your work. Ask 'What are my weaknesses?' and 'Where should I start or what should I focus on?' Ask them to be honest. Those are good questions and a great place to start. The good thing is that everyone has been down in the dumps as well, and even to this day there are really discouraging days full of doubt, and yet days where we can fly! So press on and open your wings and jump and catch the wind! This article originally appeared in Paint and Draw magazine. Subscribe here. Related articles: 7 must-know painting techniques for artists How to get started with oil painting How to use the rule of thirds in art View the full article
-
Heading to college and not kitted out yet? Maybe you're looking for an upgrade. Either way, this handy list of the best laptops for graphic design students will take you one step closer to being perfectly equipped for your university course. (A subscription to Creative Cloud will take you another.) When choosing a laptop for your daily design work, there are many things to consider. One is power versus portability: you need something that’s thin and light enough to throw in your backpack, but also powerful enough to run your suite of creative tools. And you need to decide whether macOS or Windows is right for you. The former used to be the staple of creative professionals, but it really doesn’t matter what platform you use these days. Whatever your preferences, each of the three machines here will give you all the power and performance you need to hit the ground running with your studies. Read on for our pick of the best laptops for graphic design students. Microsoft's Surface Book is an incredible machine – even in its lowest spec option. The fact that you can use it as both a tablet and laptop makes it the ultimate digital sketchbook. Just detach the screen and draw using the included Surface Pen, or buy the innovative Surface Dial for £90 and get an intuitive way of controlling your creative tools. Even better, flip the screen around, reattach it and you can use it to draw at a more natural angle. It’s on offer at £1,299 for the lowest spec at the moment – which is a bargain for such a versatile, powerful creative machine. Read our review of Microsoft Surface Book. The MacBook might not have a lot of ports (one USB-C to be precise). And it might not have the power or screen size of the MacBook Pro. But for £1,249 it’s a great option for designing on the go. A 12-inch screen is at the heart of the MacBook, but you can of course plug it into an external display using an adaptor (via USB-C). And at 2304 x 1440 pixels there’s plenty of real estate. If you’re feeling a little flush, you can configure it with up to 16GB RAM – plenty for all but the most demanding tasks. Light, powerful and utterly stylish, the MacBook is a fantastic option for design students. The Surface Laptop is one of the best laptops for graphic design students. Even the lowest-end model at £949 is powerful enough to run Photoshop and Illustrator on a daily basis, and the fact you can use the optional Surface Pen to draw directly on screen makes it even more appealing. Bear in mind that if you want to run Creative Cloud apps, you’ll need to switch to Windows 10 which is free until early 2018. (The Surface Laptop comes with Windows 10 S – which only enables software from the Windows Store to be installed.) Still, with its sleek looks and fabric keyboard, the Surface Laptop looks great and performs excellently. View the full article
-
Every day at the Association of Illustrators (AOI) we talk money – how to make it and, in particular, how to ask for it. Through those conversations with members and colleagues, what is particularly striking is how many creative freelancers subscribe to the self–fulfilling prophecy of being a person who finds dealing with money just all too awkward and difficult. How to negotiate better feesIf we want a career in the industry we love – indeed, if we want an industry at all – we’ve got to get over this issue now. We’ve got to stop talking about our fees (and contracts) as if they are an area of freelance work that doesn’t benefit from a thorough understanding and a degree of willingness to keep ourselves updated. Licensing know-how Within illustration, artwork is licensed. Licensing is a win-win situation – the client pays for what territory they need (from single country to global), how it is being used (a brochure or billboard, for instance) and for how long (one year, three years, and so on). Budgets – and fees – will vary hugely. Licensing means that the illustrator’s fee is proportionate to the overall investment the commissioner is making. Ren Renwick argues that licensing creative work is a win-win situationFor example, budgets for a print advertising campaign will, by necessity, be far larger than for a social media campaign, and fees will scale as well. While it can be hard outside of the world of global brands to comprehend the scale of budgets involved in commissioning, it can also be easy to assume all commissioners have deeper pockets than they do. Base fees on usage, not time What is key, then, is to price your work correctly and then negotiate either on usage rights or on the fee. And that’s why trying to sell creative work based on a time-related rate (hour/day rate) is not appropriate. It’s not about the time, it’s about the image’s usage Ren Renwick An image for a large campaign might take several days but be worth thousands of dollars, for example, so if priced on a time rate the illustrator could receive a fraction of that. Then again, you might spend a week doing a half-page editorial image, but the fee may be less than what you might charge for a five-day ‘day rate’ job. It’s not about the time, it’s about the image’s usage. Don't be awkward about getting paid If you price your work based on sound calculations, and state the fee with confidence, then there is no awkwardness. It is a transaction. If you simply can’t bring yourself to negotiate your fees and contracts, ask someone to do it for you. Whoever it is – yourself or someone else – they must have the expertise to understand how to price it correctly. This is one of the many benefits of being represented by an agent, but if you are not represented you can always get support from the AOI. The AOI advises on many significant commissions for very large clients, supporting illustrators to price their work appropriately. At the end of the day, why are we doing creative work? An element is the pleasure of course, but it’s also to generate income. And it’s fine to luck out by being paid to do what you love! That doesn’t mean you should waive your fee, or reduce it – it just means you should keep abreast of the business side of work as much as the creative side. This article originally appeared in Computer Arts magazine issue 267. Buy it here. Related articles: 5 top money management tips for freelancers in 2017 Why illustrators should care about copyright Convince clients to commission your crazy ideas View the full article