4 of the best animation showreels to inspire you

Andrew Gordon worked as Pixar's directing animator for seven years, and is now co-director at Illumination McGuff and head of animation at Double Negative. He's worked on films such as The Incredibles, Finding Nemo and Monsters Inc, so it's safe to say he's seen a few demo reels in his time. 

  • 15 pro tips for crafting the perfect showreel

Here, Gordon walks through some stand-out demo reels from the last decade, explaining why each one won its creator either an internship or a job at Pixar… 

01. Stefan Schumacher: Demo reel 2010

“This one was done by Stefan Schumacher, who was one of my interns a few years back,” explains Gordon. “All of the scenes are based on a simple rig that has been modified to be a character. Also, he put sets in and, in general, shows really great acting ideas. Especially in the scene at 00:30…”

02. Allison Rutland: 2009 animation demo reel

“Another reel that I remember being wonderful was this one from Allison Rutland. It’s a professional reel that showed great potential at the time,” Gordon explains. 

“She didn’t have much feature work on her reel, but she did two personal tests that got her a job. The last one on the reel [at 00:50] I think really closed it for her. It’s a great example of believable acting,” he says. Rutland went on to win an Annie for best character animation for her work on 2015 animated film, Inside Out. 

You can watch her 2017 animation showreel here.

03. Cesar Tafova: Animation reel 2016

“There are many rigs out there – many are attached to schools that ‘give them away’ for free as a marketing tool,” says Gordon. “Just know that when you see the same rig over and over from hundreds and hundreds of students, it’s very hard to separate yourself from the pack. 

“This example [at 00:17] shows a good use of changing the scene and character. It has a good hook. It’s the Malclom rig,” he adds. “I see lot of demo reels with this guy. If you’re going to use a rig from a school, come up with a really original design and test.

“Look at the rig as the actor, and you as the director who needs to put him in a costume. Make the scenery and direct the acting to tell a story.”

04: Carlo Vogele: For Sock’s Sake

“Once you get past the work from schools that teach animation by using stock rigs and running you through animation exercises, the stuff that really stands out is the student films from other schools in the world,” says Gordon. “When you see a film that’s well-crafted, it means a lot. This film by Carlo Vogele was one of those you see and, right off the bat, you say: ‘That’s a great idea – using clothing to animate.”

Don’t fall into the trap of being a shot animator. Try to be a storyteller

“It’s so important to remember to be a film-maker and not just try to do exercises that you think will get you into this or that studio – especially when you’re a student. Now’s your time to make films, because not many people out there are going to give you the money to make a film. 

“I was personally hired out of school on a two-minute Flour Sack test that turned into a little story. I saw another student get an internship based off his Flour Sack film and go on to Pixar, then Disney feature animation,” he continues. “You don’t need complex rigs to get noticed. Just great ideas. Many times it’s the story telling, the entertainment value, what you bring to the work… Don’t fall into the trap of being a shot animator. Try to be a storyteller.”

Related articles:

  • Top animation tools for digital artists
  • The dos and don'ts of animation showreels
  • How to get clients on board with animation

Make your online shop look amazing for less

For many designers and illustrators, creating and selling products online can be a rewarding side project that brings in some extra income.

There are many options available, which we'll set out below – but when you're setting up your online shop, it pays to present them professionally.

In an ideal world, everyone would commission a studio photoshoot and art direct their product collection beautifully and consistently. But not everyone has the time or the budget to do so.

Luckily, with some smart and savvy use of premium stock images and a bit of time in Photoshop, you can do your designs justice – for a fraction of the price.

So read on for our guide to the best images to use to sell four common products online, complete with top recommendations from iStock by Getty Images.

Digital assets

Blank monitor on desk with lamp and plant

Click to view image on iStock

Digital wallpapers for desktop, tablet, or mobile are a great place to start, especially for illustrators, as there are no production costs involved.

Depending on your reputation, you're unlikely to be able to charge much for them –but it's a good way to spread your work around.

Blank laptop screen with phone and tablet

Click to view image on iStock

When it comes to presenting them in an online shop, a stylishly shot setup, featuring several blank screens, is a great way to show them off in context.

You simply need to take screen grabs on your various devices, and mock them up on the screens. This image is particularly effective, as it feels part of an aspirational creative work environment.

Prints and posters

Blank poster hanging on brick wall

Click to view image on iStock

When it comes to physical items, prints featuring your artwork are one of the simplest to produce, especially if you go for digital printing, which is much more economical for short runs.

Again, showing off a print in some kind of context is worthwhile here, as it helps potential purchasers imagine it in their own home or studio.

Blank poster hanging in modern studio

Click to view image on iStock

Premium stock images such as the one above, when carefully mocked up with your design, bring your work to life – without the need to splash out on a photoshoot.

If you have the money, high-end techniques such as screenprinting or letterpress will take your prints to the next level – and limited-edition, signed, and numbered versions feel much more collectable.

With more tactile products like these, especially if you're charging a premium, it's definitely worth shooting close-up details to show off the quality.

T-shirts and apparel

Six blank T-shirts in different colours

Click to view image on iStock

The next stage up for designer products is apparel, and one of the most accessible ways of making your designs wearable is to print them on a T-shirt.

At its most basic, this will involve screenprinting onto a blank, generic tee. These can be notoriously difficult to photograph without getting a model involved, and it's your design you're showing off here – not the shirt itself.

Blank T-shirt on mannequin

Click to view image on iStock

A premium stock image gives you the natural shape and feel you need to show off your design to best effect – it will take a little more Photoshop skill to make it look more convincing than a flat print, however.

Of course, if you're going the distance and creating your own range of bespoke merchandise, you'll need to photograph it properly to do it justice – especially if there are unique features to show off.

Books and magazines

Blank book cover

Click to view image on iStock

Any kind of printed publication – whether it's a self-published zine, or a full-blown book – will benefit from an image that shows it in all its physical, tangible glory.

As with T-shirts and prints, if there's a generic size, shape, and aspect ratio involved, premium stock images can be a great way to present a publication in a professional way, without the cost or hassle of shooting it from lots of different angles.

As well as page and cover dimensions, always consider the thickness too, if the spine is in shot. It doesn't have to be identical, but you need to present the product as authentically as possible.

Blank open book showing spread

Click to view image on iStock

Besides the cover, stock images of folded spreads are another great creative shortcut—and with a bit of Photoshop work, look much more appealing than a flat graphic of the page artwork.

If you like the look of all the images above, you're in luck: iStock by Getty Images is offering new customers 12% off all credits by using code 12CBLOQNEW at checkout. If you’re looking for product mock-ups specifically, check out their range here. So go on – give your online shop an overhaul!

Build an animated split-screen landing page

Your landing page is a crucial element in your website layout. It is the first real opportunity you have to introduce your business, or the product you sell, so its design is key. Landing pages are designed with a single focused objective known as a call to action (CTA). The use of colours and images to complement the calls to action and the user experience is a must. 

  • See the working CodePen for this tutorial

In this tutorial, we'll walk through how to build an engaging landing page for a fictional fashion brand. It will be centred around a split-screen design with large images and animated transitions that happen on hover. This page will have two clear call to action buttons and we'll be using HTML, Sass for styling and a touch of vanilla JavaScript that uses the ES6 syntax. 

01. Get set up

Click the icon in the top right to enlarge the image

If you're using CodePen, make sure the CSS is set to 'SCSS' in the Pen settings. You can make this change by clicking on the settings tab, choose 'CSS' and change the CSS Preprocessor to SCSS in the drop-down options. 

Then we can begin adding in our HTML. We're going to wrap a section called 'left' and a section called 'right' within a container class, with both sections given a class of 'screen'.

02. Finish the HTML

Click the icon in the top right to enlarge the image

To finalise our HTML, we will add in a title for each section using an h1 tag. Underneath that we will need to add in a button, which would link to another page if this was a real-world project. We will give this a class of button to keep things nice and simple.

03. Explore Sass variables

The one thing we all love about Sass is the use of variables. Even though native CSS variables are getting more support, we will keep things safe by using Sass. We will put these at the top of our .scss, and you can choose whatever colours you want, but using rgba values will give us more flexibility.

04. Adjust body styling

Firstly, we will clear all default padding and margin to the body and then set the font family to Open Sans. This will only affect the button, so it doesn't matter too much what font we use. Then we will set the width and height to 100% and make sure that anything that overflows on the X axis gets hidden.

05. Style the section titles

It’s time to pick a Google font for the section titles – we’ve chosen Playfair Display. Then using translateX we can make sure the section titles are always centred on the X axis.

06. Make the CTAs stand out

Our buttons will act as our calls to action, so these need to be big, bold and positioned where they are easy to click. Both buttons will have a white border and an interesting transition effect. The default styles for both buttons will be the same, however we will change their colours on hover.

The main buttons will have a nice simple hover effect and we will use the Sass variables we specified for the colour, which will be a similar colour to the background of the page.

07. Set the container background and screens

Click the icon in the top right to enlarge the image

The container class will act as our page wrapper and we will set the position of this to relative, simply because we want to position the screens to absolute positioning. We will give the container a default background colour, but of course this won't be seen because we will be setting different colours to both screen backgrounds.

08. Add background images

Both the left and right sections will display an image, and you can find royalty-free stock images from websites such as Unsplash, Pixabay or Pexels (which I've used in this tutorial). To make things easier, I've used a free image hosting and sharing service called imgbb that we can link to in our CSS.

The right-hand side of the page will also display a background image using imgbb, and we will set the background colour to pink. Again, we set the background size to cover. This will allow us to cover the entire containing element, which in our case is the .screen class.

09. Add transitions and hover effects

The animation speed for our hover effect on both screens will be controlled by a transition that holds the value of our variable $animateSpeed, which is 1000ms (one second). Then we'll finish off by giving the animation some easing, which is an ease in and out that will help to give us a smoother animation.

What we want to happen now is that when you hover over the left screen, there will be a class added to that section using JavaScript (which we will write in a later step). When this class is added, then that screen will stretch to whatever the width of the variable we specified – which will be 75%, and then the right side will be set to the smaller width variable (25%).

This works exactly the same as the left side, where a new class will be added on mouse hover using JavaScript, and the right screen will stretch out accordingly. We also need to make sure the z-index is set to 2 so the CTA button becomes more prominent.

10. Move into JavaScript

We will be using a touch of vanilla JavaScript to help us add and remove CSS classes and we will also be using some of the new ES6 features. The first thing we need to do is to declare some constant variables. 

Because we will be using document more than once, we will set a constant variable called doc and store the document within that so we can keep the word 'document' nice and short.

Now we need to set three more constants that will store the .right, .left and .container selectors. The reason we are using constants is because we know we don't want to change the value of these, so using a constants makes sense. With these now set, we can go ahead and add some mouse events to them.

Using the left constant variable we declared in the last step, we can now add an event listener to it. This event will be the mouseenter event and instead of using a callback function, we will use another ES6 feature called Arrow Functions' ( () => ).

11. Add and remove a class

In the last step, our event listener added a mouseenter event that targets the main container class and adds a new class called hover-left to the left section element. With this called added, we now need to remove it when we hover off it. We'll do this by using the mouseleave event and the .remove() method.

Up until now we have done everything on the left screen. Now we will finish off the JavaScript and add and remove classes on the right section elements. Again we have used the arrow function syntax here to keep everything looking nice and tidy.

12. Make it responsive

Click the icon in the top right to enlarge the image

No project – no matter how big or small – should avoid being made responsive. So, in this step we will add some media queries to our CSS, and make this small project as adaptive to mobile devices as best we can. It's worth checking out the original CodePen to see how this works.

We've made sure that when the width of our page gets down to 800px, the font and buttons will reduce in size. So, to finish things off we want to target the height too and make sure our buttons move down the page when the page height gets below 700px.

Web design event Generate London returns on 19-21 September 2018, offering a packed schedule of industry-leading speakers, a full day of workshops and valuable networking opportunities – don’t miss it. Get your Generate ticket now.

This article was originally published in net magazine issue 305. Subscribe now.  

Read more:

  • 5 sensational new websites to be inspired by
  • Create an animated 3D text effect
  • 19 great parallax scrolling websites

Streamline your workflow with this versatile tool

One of the first things you should do when setting out to achieve a goal is to map out how you want to get there. You might think it's as straightforward as getting from point A to point B, but you never know what might change along the way. 

That's when Timelinr Personal Plan can help. 

This handy project planning tool allows you to put together high-level roadmaps that loop in all your team members and stakeholders. Know exactly which tasks are still at hand, which resources need to be allocated, and a whole lot more. Best of all, you get to have it for life for just $49.99.

Related articles:

  • Top tips for nailing project management
  • How to discover a brand's USP
  • The 22 best business card designs

Master large-scale environments in 3ds Max

The aim of this piece was to produce a piece of 3D art that's ready to go straight from the frame buffer, with little or no post-production. Zagreb-based Studio Niskota (now Polymachine) created the project as a test bed for their no-post pipeline, and all the assets are modelled and textured with such detail that they could be used for a close-up render – despite ending up hundreds or thousands of metres from the camera in the final shot. 

  • How to create epic environment designs

Scenes on this scale containing hundreds of thousands of detailed assets can put a burden on your renderer, and working with billions of polygons in the viewport in a way that enables fast iteration is nearly impossible. Enter Forest Pack and RailClone by iToo Software, two of the most popular plugins for 3ds Max that specialise in instancing almost limitless geometry while maintaining a fully procedural workflow. 

Forest Pack enables users to scatter hundreds of thousands of objects, each with millions of polygons, while a point-cloud display mode and several optimisation features keep the viewports fast. RailClone shares Forest Pack's instancing capability but uses parametric arrays instead of scattering algorithms to distribute, manipulate and deform geometry.

In this tutorial we'll illustrate how these two tools were used to create Studio Niskota's scene, and share some invaluable tips along the way for anyone planning to create large-scale environments.

01. Model the foreground terrain

3ds Max is perfect for modelling landscapes quickly

The landscape is probably the biggest contributor to the overall balance of the image, so it's always a good place to start. There are many excellent dedicated landscape modelling applications on the market, but for speed nothing can beat poly modelling in 3ds Max. 

At this early stage, try to create the landscape in a way that encourages experimentation by maintaining good edge flow, using as few edges as possible to define the basic shapes and only then adding a TurboSmooth or OpenSubDiv modifier to add refinements.

02. Use placeholder geometry

Simple placeholders can help you work out your camera angles

Once you have the terrain roughed out, add placeholder geometry for the major elements to help work out which camera angles you plan to use. In this scene, the landscape was modelled with a lake in the foreground and a flat section to showcase the architecture in the mid-ground, which gives way to rolling tree-lined hills in the distance.

03. Split up the terrain

Make your life easier by breaking the terrain up into manageable chunks

It's tempting to model a landscape as one large surface, but when your scene is measured in kilometres, that's not always a sensible approach. If you only model the sides of the hills facing the camera you significantly reduce the number of trees and objects scattered later on, speeding up render times. You can use the same approach to add scan data that fills in the background.

04. Add the buildings

Make sure to get some variety into your buildings

With the composition worked out, you can create the buildings. Poly modelling is used throughout for the building structure, which is then populated with a mixture of high-quality stock and bespoke models. For believable renders, it's important to add subtle variation. For example, you can use the RandomByElement modifier with multi-sub object materials to randomise the textures.

05. Keep everything parametric

Parametric models will be easier to update if you need to 

For this project we want to retain the ability to experiment, so it's important to make sure that anything we add is easy to update. One way to achieve this is to make models parametric. For example, tucked away in the trees in the final render is a power line that we'll create using the RailClone plugin. RailClone also instances geometry automatically, so even though the object ended up barely visible in the final render, you'll have a reusable high-quality asset that's easy to edit and suitable for close-ups in future projects. 

06. Create the power lines

Use RailClone to make the power lines

Draw a spline across the background of the terrain to define the path. Create a new RailClone object, open the graph editor and create a one-dimensional array by adding an L1S Generator. Wire the pylon geometry to the Generator's Start, End and Evenly inputs. Wire the cable geometry to the Default input and change the Default Mode so the cables are scaled to fit between the pylons.

07. Create the boardwalk

You can also use RailClone to build the boardwalk

The boardwalk is also created with RailClone. Draw a spline above the terrain to describe the centre of the path. Several plank models are distributed along the spline using a one-dimensional array with a Randomise operator. A second one-dimensional generator distributes the posts at evenly spaced intervals. The Generator's Mirror and Y Offset options are used to copy and move the array to both sides of the path, and a Surface node is added to both generators so that the boardwalk follows the topology of the landscape. 

08. Add variation to procedural objects

Randomise your planks to give them a more natural look

Just like the building's cladding, this boardwalk mustn't look too perfect. Add some chaos to the planks using the transform randomisation features found in the Segment node's settings. You should also randomise the textures used on each plank, but instead of using a modifier, you can use RailClone Color which retains full instancing and has other advanced options.

09. Source plants and other assets

Randomise rotation and scale of your vegetation to keep things natural-looking

The vegetation used in the scene comes from a mixture of library models and bespoke plants created using SpeedTree. Landscape artists often ask themselves how many plant models they need to create believable variation. It's not really the number but the differences between the models that's important. You can hide a lot of repetition by simply randomising rotation and scale. Ideally, you should only include additional variations of a plant species if they look sufficiently different to justify the extra resources.

10. Scatter the trees

Bring in your trees as a new Forest Pack object

After you've added the main compositional elements, it's usual to work from large to small elements. The trees occupy the largest area, so create those first by adding a new Forest Pack object that uses the terrain as a surface. Add the tree models to the geometry list and enable Rotation and Scale randomisation. A scale range between 50 and 150 per cent will disguise repetition effectively.

11. Remove trees from the scatter

Get rid of trees that are where they shouldn’t be

The trees are also scattered inside the buildings, on the boardwalk and in the lake. Draw closed splines from the top view and add them to the Forest Pack object's Areas list. Set the mode to Exclude and the items inside the splines will be removed. Remove trees from under the power lines by adding the spline used by the RailClone object to the Areas list and increasing Thickness.

12. Create grass patches

Bring in grass and small plants as Forest Pack objects

Small plants and ground-cover vegetation are normally modelled as individual plants. If we were to scatter individual plants in this scene, it would take over 6.5 million of them to fill the desired area. The solution is to use two Forest Pack objects, one to create a small patch of grass, and a second to distribute the patch on the terrain. To create a patch, use a small circular spline one metre or more in diameter as an Area to scatter grass with Forest Pack. Use the area's Density Falloff to thin out the scatter as it approaches the spline.

13. Scatter the patches

Use Translation randomisation to avoid a grid effect

Next, create a second Forest Pack object using the terrain as a surface and add the patch to the Items list. Add Exclude splines to remove grass from inside the buildings, on the lake bed and under the boardwalk, as well as creating clearings. A grid-like appearance can sometimes be visible – to break this up, add Translation randomisation as well as the usual Rotation and Scale.

14. Cull items that aren't visible

Save on rendering time by losing everything that’s not visible to the camera

There's little sense in wasting resources calculating items that aren't seen in the final render. Go to the Camera rollout and enable Limit to Visibility and Auto Assign to Active View to use the current camera to remove items that aren't visible. If you still need some items to be retained for reflections, you can extend the scatter beyond the frustum slightly using Expand.

15. Add layers of ground cover

Mix layers of ground cover for a more realistic look

Realistic ground cover is achieved by mixing several layers of plants to add visual complexity. Using the same optimisation tricks as the grass, create new Forest Pack objects for long grass, dead leaves, sticks and twigs, mushrooms and tall weeds. Create believable interaction between the layers by drawing unique Exclude areas and experimenting with different distribution maps.

16. Place grass around the boardwalk

Add longer grass and weeds where the lawnmower won’t reach

Grass grows taller around the boundaries of objects where it cannot be trampled or cut. Create a new Forest Pack object to add long grass and weeds around the boardwalk. Add the same spline used by the RailClone style to the Forest Pack object's Areas list and set the mode to Include. Increase the Thickness until the grass area is slightly wider than the boardwalk. Then, to remove the grass from under the boardwalk itself, add the same spline again, set mode to Exclude and change Thickness to roughly the width of the planks.

17. Paint the reeds

Use Forest Pack to paint reeds onto the landscape

We can hand-paint areas using Forest Pack. Here we'll create a new Forest object to add reeds. Go to the Areas rollout and add a new Paint area. Click the button to activate Paint mode then click and drag on the terrain. It's important to understand that you're only painting an area – the plugin remains fully parametric so you can adjust geometry, density and randomisation at any time.

18. Add lights to the boardwalk

You can add lights to the boardwalk with Forest Pack…

The final Forest Pack object adds light geometry to cables strung along the boardwalk. In the top view, draw a zigzagging renderable spline between the posts. Divide all the spline segments in half and lower the new vertices slightly to create downward curves as though the cable is affected by gravity. Create a new Forest Pack object and add light geometry and transform randomisation. To array these lights along the spline use Path Distribution mode and set the distance between the lights using the Spacing value.

19. Scatter V-Ray lights

…then scatter them using V-Ray

There are more than 350 lights scattered along the boardwalk. No-one wants to place that many objects manually, but unfortunately Forest Pack can't scatter non-geometric items such as lights. Fortunately there's a workaround. Select the Forest Pack object used to distribute the lights geometry and use Forest Tools to convert it to native instances. You can now use Max's built-in Clone and Align tool to add an instance of a new V-Ray light that matches the position and orientation for each of the bulbs.

20. Manual placement

Add the last few hero objects by hand

Now you can complete the composition by placing hero objects in the mid to foreground. A Forest Pack object can be useful here too. Add all the items you need to the geometry list and add the surface. Enable Custom Edit mode and you'll be able to choose and place items that will have the benefits of using Forest Pack's point-cloud display, randomisation and instancing features.

21. Add the lanterns

Add the foreground lanterns manually, too

The lanterns in the foreground are created using groups that contain geometry and a V-Ray light to illuminate the scene. Manually instance and position the lanterns so that slightly more than half are sat on the water surface and some are drifting into the sky. To add blur to the airborne lanterns, add a short animation and enable Motion Blur in the renderer and camera settings.

22. Ripples in the water

Create ripples with a VRayDistanceTex map

To create ripples where the lanterns touch the water, first model wavy discs and then place them just below the surface, one for each light. Use these to add displacement to the water using a VRayDistanceTex map to create a greyscale output based on the surface's distance to the disc's geometry. To move a lantern, just move the disc to update the displacement automatically.

23. Position lights

Make sure that all your lighting comes from a believable source

Studio Niskota's no-post philosophy applies to lighting too. Pay close attention when lighting the buildings to create a believable mood, with the aim that you could create close-up or even interior renders if needed. Ensure that lights are added where there are fittings so that they originate from a believable source, but feel free to also use invisible lights to add accents. For example you could add lights facing away from the buildings to boost their illumination of the surrounding environment and backlight the nearby trees.

24. Add atmospheric perspective

V-Ray Aerial Perspective will give your scene a sense of depth and scale without huge rendering overheads

Finally we need to create a sense of depth and scale. This effect is commonly added in post using a Z-Depth Pass, but it can be achieved at render time too. Some artists like to use V-Ray Environment Fog to achieve this, but unless you really need volumetric light and shadows you can use V-Ray Aerial Perspective which approximates the same effect but renders more quickly.

This article was originally published in issue 234 of 3D World, the world's best-selling magazine for CG artists. Buy issue 234 here or subscribe to 3D World here.

Related articles:

  • Create an atmospheric game environment
  • 6 expert tips for better 3D renders
  • How to render a photorealistic sky

New Banksy artworks discovered in Paris

Three new pieces of Banksy street art have been discovered in Paris, to join the three we already know about. And while eager Parisians are on the hunt for more, one of the pieces has already been vandalised. 

Banksy's 'blitz' on Paris combines highly politically charged works (many of the new designs take aim at France's tough anti-migrant policy, and president Emmanuel Macron's uncompromising approach to refugees coming into the country), and simpler artworks featuring Banksy's signature rats. Scroll down to see all six Parisian artworks.

Click the icon in the top right of the image to enlarge it

The first of Banksy's trademark rats shows a shifty rodent sporting a Minnie Mouse bow. 

Click the icon in the top right of the image to enlarge it

Many of the rat designs interact with existing architectural features or graffiti in the capital. This one prepares to blow something up.

Click the icon in the top right of the image to enlarge it

A third design shows a rat riding a cork that has been shot from a champagne bottle. 

Click the icon in the top right of the image to enlarge it

The three artworks discovered first take a more overt political angle. Here, a businessman saws of the leg off an obedient dog, before offering the eager pet a bone, with the saw still tucked behind his back. It seems to be a criticism of French politics. 

Click the icon in the top right of the image to enlarge it

This design references the famous portrait of Napoleon crossing the Alps to invade Italy. In it, the General's red cloak has been rearranged to cover his face, effectively blinding him. Napoleon is synonymous with French power and influence. 

Some have noted the similarity between the cloak's arrangement and an Islamic headscarf, and speculated that this design is a comment on the controversial ban on the wearing of the niqāb in France.

Click the icon in the top right of the image to enlarge it

In the final of the six designs, a young black girl sprays a pink patterned wallpaper design over a swastika. This artwork – a reimagining of 2008's Go Flock Yourself – has already been vandalised.

The design is located near the Porte de la Chapelle metro station – the location of Paris’ official refugee centre La Bulle, until it was finally dismantled for good in August 2017. The sleeping bag and teddy bear on the pavement next to the new design suggest this girl is also an immigrant, struggling with racism.

In the above tweet, a French journalist questions whether the vandalism is a deliberate act or ignorance on the part of the vandal. 

Although none of the works have been signed – in line with the rest of Banksy's most recent works – experts say they look genuine.  

Read more:

  • 40 traffic-stopping examples of billboard advertising
  • Adidas mural celebrates young football legend
  • The 40 best free graffiti fonts

10 great examples of graphic design portfolios

When it comes to creating a stunning graphic design portfolio, there are a number of tips you should follow, but there’s no ‘one correct way’ to lay it out. In a way, that’s good; it means you’re free to experiment and showcase your creativity in designing your website. But it can also create a tyranny of choice: with so many possible avenues to go down, it can be difficult to find the right direction for you.

  • The best laptops for graphic design

It can, however, be helpful to look at the graphic design portfolio created by your peers – not only to get inspiration from their work, but to discover the self promotion methods they've used. In fact, even deciding you don’t like something about their portfolio may help you clarify what you want yours to achieve. Why not start with this selection of great graphic design portfolios?

01. Alex Coven

Graphic design portfolio - Alex Coven

Coven uses some simple tricks to make his portfolio distinctive

Alex Coven, in his own words, “wears three hats”, as a freelance graphic designer, letterer and frontend developer based in Chicago, USA. He illustrates those hats literally on the homepage, which is a brilliantly simple way to convey the depth of his skills and experience.

Scroll down on his site to see his work, and across on each one for more information about that project. Clever use of colour overlays again acts as a simple device to keep things distinctive and interesting.

02. Rafael Kfouri

Graphic design portfolio - Rafael Kfouri

This minimal one-page site gives Kfouri’s colourful and impactful visuals room to breathe

Rafael Kfouri is an award-winning graphic designer currently working for AlmapBBDO. He previously worked at  Wieden+Kennedy Portland. 

The one-page portfolio site is a tricky thing to pull off, but Kfouri succeeds well in giving his colourful and impactful visuals – including single images and collages – room to breathe. Giving them almost the entire width of the screen, with just a couple of slim sidebars for context, allows visitors to enjoy and appreciate the wide scope of his work at a leisurely pace.

There’s only the barest of information about each project, and to be honest, we’d like to have seen more. But as a way of showcasing graphic eye-candy smartly and with minimal (if any) clicks needed to get to the goodies, this portfolio offers a lot of inspiration.

03. Heather Shaw

Graphic design portfolio - Heather Shaw

Heather Shaw marshals her work with simplicity and elegance

With almost 20 years' experience in design, Heather Small designs brochures, menus, business cards, books, annual reports, Powerpoint and Keynote presentations, responsive websites, applications… anything her clients need, in short. And her impressive portfolio site marshals all this diverse work with simplicity and elegance. 

  • 8 inspiring digital art portfolios and why they work

Overlaying photos of each project with a block colour provides an element of visual consistency. Meanwhile, the big, bold typography and simple but effective design make it all very easy to navigate.

04. Stefanie Bruckler

Graphic design portfolio - Stefanie Bruckler

There’s a touch of old-fashioned elegance to Stefanie Bruckler’s portfolio

Based in New York, Stefanie Bruckler is an Austrian designer and illustrator with a particular interest in branding and editorial design. Passionate about building cohesive and strong brands as well as typography and packaging, she’s applied a touch of old-fashioned elegance to her website. Its minimalist, grid-based layout, muted colour palette and restrained use of type are all enclosed within a fixed, single-line frame.

05. Peter Komierowsk

Graphic design portfolio - Peter Komierowsk

There are acres of white space in this restrained layout

Peter Komierowski is a visual designer working in Vancouver, British Columbia who specialises in illustration, branding and identity design, and interface design. With many high-profile clients, including The Huffington Post, NBA, Telus, and YouTube, there’s a lot to fit in here. 

Komierowski’s homepage takes a quite radical approach, featuring just a small number of logo designs, surrounded by acres of white space. It’s a strategy born of (justified) confidence in the high quality of his designs, and it works brilliantly.

06. Tobias van Schneider

Graphic design portfolio - Tobias van Schneider

This creative director’s portfolio is strongly type-focused

Tobias van Schneider is a multidisciplinary designer and creative director born in Germany, raised in Austria and currently living and working in New York. Focused on branding and interactive design, he’s had some big-name clients including Red Bull, BMW, Google, Wacom, Sony, Toyota and Ralph Lauren. 

When you’re working at this level, the work tends to be beautifully photographed. Schneider takes full advantage of that, with a portfolio design that contains plenty of beautiful images. Plenty of lovely typography ties everything together – there is an unusually large amount of text here for a graphic design portfolio – and overall this site succeeds in conveying the breadth of Schneider’s experience and the depth of his work.

07. Grant Burke

Graphic design portfolio - Grant Burke

The case studies on this portfolio site reveal just enough information about each project

Grant Burke is a Toronto-based freelance graphic designer and illustrator specialising in logo design, brand identity and illustration. In the past he’s worked both as an in-house designer for large corporations and at an agency. 

Like van Schneider's, Burke's homepage proves that you can use a lot of text in a portfolio, however if you scroll down or click on Portfolio in the top menu you’re greeted by a strong selection of work in a picture-grid format. 

Hover over each square for a brief summary, and click through to a full case study. These serve as a model for sharing the right amount of information about a project on a portfolio site; not too little that it leaves you hanging, not too much that it overwhelms.

08. Alessandro Scarpellini

Graphic design portfolio - Alessandro Scarpellini

There’s a real air of sophistication to this portfolio design

Italian designer Alessandro Scarpellini has worked for a wide range of clients around the world in the fields of art direction, branding and visual identity, magazines and packaging design. He’s also the curator of Visual Journal, an inspirational blog about the best in branding and graphic design, so you’d expect him to know a thing or two about curating great work. And his portfolio doesn’t disappoint. 

There’s a real air of sophistication to its design, which showcases examples of his work in a restrained sideshow and offers a personal biography in bold type below. Comprehensive it is not, but you certainly get a clear sense of this creative’s personality and approach to his design work from this minimalist portfolio.

09. Nicolas Paries

Graphic design portfolio - Nicolas Paries

This portfolio boasts an original layout and some quite spectacular scrolling effects

Nicolas Paries is a young French art director who’s been working since 2008 with premium brands such as Chanel, Lancôme, Dior and Nespresso. The layout of his portfolio site is quite original, and the graphic effects as you scroll down are visually spectacular and hugely impressive. In short, this portfolio website is a real one-off.

10. Jennifer Heintz

Graphic design portfolio - Jennifer Heintz

Heintz’s portfolio site makes great use of colour

Jennifer Heintz is a designer and illustrator living in Boston, USA. A recent graduate who majored in graphic and information design, she’s also creative director of the Northeastern University Political Review.

When you’re a recent graduate, you typically don’t have a huge amount of work to draw on, so careful curation and imaginative presentation become paramount. Heintz’s site scores highly on both, with a great use of colour, delightfully smooth scrolling and a snazzy eye motif. 

These work together to make each individual project much more enticing than it might have seemed on a more cookie-cutter site.

Related articles:

  • 8 portfolio mistakes that drive clients mad
  • 6 rock-solid ways to improve your graphic design portfolio
  • 32 brilliant design portfolios