Rss Bot

If you're starting a blog or website, don't forget the all-important 404 page – a standard response code in HTTP telling the user, in effect, that they've clicked on a broken link. It's traditionally been an immense source of frustration. But in recent years, creatives have taken up the challenge of designing bespoke 404 pages that use humour, great UX or beautiful design to at least sweeten the pill of finding out that you're in the wrong place. Done really well, a 404 page can become a mini-ambassador for the website itself. It might even be shared on Twitter or relevant blogs as an example of the site's keenness for customer service or unique approach to design. The 404 error pages we present here have achieved all this and more, so take a look and be inspired to create your own. 01. Cloud Sigma Cloud Sigma is a cloud server and cloud hosting service operating in the US, Europe and Asia-Pacific region. While flexible cloud servers sound useful, they're not exactly fun, which we guess is why the company has had so much fun with its tongue-in-cheek 404 error page. We wonder how long it'll be before this helpful-looking junior developer gets poached by the competition. 02. Bluepath Another website to use humour on its 404 error page is Atlanta-based data strategy consulting firm BluePath. We appreciate the way it keeps its jokes topical, using a data-driven map of reported crimes in Atlanta to illustrate the fact that you're way off the map. "Why? Because it’s a crime you haven’t hired us yet!" is its cheesy punchline. Ah, these whacky data analysts. 03. The Australian Australian national newspaper The Australian, owned by Rupert Murdoch's News Corp Australia, has just redesigned its 404 error page. And what a corker it is. Poking fun at politicians' language, personas and public mess ups, it invites you to select a politician to explain away the error like only a politician can. On point and lots of fun. 04. Kualo Prefer a bit of Pac-Man? SorryHosting company Kualo has been in business for over 15 years – an eternity in internet time – and its 404 page reflects its venerable status, treating you to a game of Kualo-themed Space Invaders. It's not perfect. The key strategy of picking off the fleet's outer edges to slow the invaders' descent doesn't work, for starters. But it is fun, and it can earn you a discount on your hosting deal if you manage to score over 1,000 points. Its inclusion in this article has also inspired US pest control company Pointe Pest Control to include its own Pest Invaders game on its 404 error page, complete with different flying and crawling bugs to spray. As Chloe Zollinger from Pointe says, "Beware, if you choose to play you may be distracted all day!" 05. The Useless Web Index This meerkat-based 404 page is incomparableEven the world's largest index of useless websites can have an off day. And when the Useless Web Index can't find what you're looking for, it's ready with the next best thing: video of meerkats, doing meerkat peering and stuff for your amusement. 06. Waaark Very NSFW; put your headphones on firstFrench studio Waaark's 404 page is nice enough to look at, but it's better to listen to – although maybe not at work. Inspired by Stephen Hawking, the Hitchhiker's Guide to the Galaxy and Portal, it uses a JavaScript text-to-speech tool called meSpeak to subject you to a sweary robotic tirade. 07. Steve Lambert Yep, this is definitely awkwardNew York-based artist Steve Lambert describes this as "the most awkward 404 not found page on the internet", and you know, he may well be right. It features an excruciating piece to camera that just goes on and on. We defy you to get to the end of his video without any part of your body clenching. 08. Dan Woodger Guys, it's a cheeseburger on skates. What's not to love?Some 404 pages are technical masterpieces, and some – specifically Dan Woodger's, which features a drawing of a cheeseburger on roller skates – are not. But while it might not push any technical boundaries, it does give you a clear idea of Dan's style, and encourages you to click through to the rest of his work. 09. Figma Messing with vectors is so much fun when it's not actual workEven though we have a copy of Adobe Illustrator right here, and could play with anchor points and Bézier curves literally any time we want, we're still entranced by Figma's 404 page, in which the big 404 is rendered in vectors that you can reshape to your heart's content. 10. Bloomberg This one is absolutely bonkersBloomberg's 404 page initially looks pretty ordinary, until it suddenly pans out from the 404 error into a bizarre animation involving an off-the-shelf 3D model of a businessman smashing his broken PC into bits. 11. Hot Dot Production Hot Dot's 404 page is seriously addictiveHot Dot Productions has applied its 'where design meets technology' tagline to its impressive 404 page, which features the three numbers made up of hundreds of tiny dots that change direction in response to mouse movements. Seriously cool. 12. Airbnb If you drop ice cream on the floor, clean it up, right?This 404 page from couch-surfing behemoth Airbnb features a delightful animation that holds lessons for us all about the inadvisability of dropping ice cream. It also brings to mind stories about people who have rented out their homes on Airbnb, only to come back to a disaster area. Look, if you drop ice cream on the floor, clean it up, right? 13. Lego Lego can do no wrong in our eyes – we love this cute little tableau for its website's 404 pageLego can do no wrong in our eyes (Have you read our piece on How Lego reinvented itself as a super-brand yet?). We love this cute 404 page, which proves that you don't need a lot of technical-sounding text to get your error message across. 14. Falvey Memorial Library Villanova University's Falvey Memorial Library in Pennsylvania may not have international stardom, but it does have dragons. Created by Laura Bang and Chris Hallberg, this 404 page just makes you smile with its amusing "Careful!" title and clear instructions and options to get you back on track and away from these dangerous beasties (don't worry, they're just beautiful illustrations from a library book). 15. GitHub What better way to appeal to geeks than through a simple Star Wars parody with parallax effect? Coding website GitHub is the home of geeks, and what better way to appeal to geeks than through a simple Star Wars parody with parallax effect when you move your mouse? GitHub also has a nice 500 page for when the server breaks. 16. CSS Ninjas CSS Ninjas is another example of the web design world's love of ninjas The web design world loves ninjas. Falling in with the trend (and, we guess, its name), the 404 page for CSS Ninjas features a clean, simple illustration that reflects the site's general approach to design. 17. Daniel Karcher Film This 404 page employs a beautifully rendered subway station complete with empty train that rolls in As you'd expect for a movie design professional, this website makes excellent use of animation and sound. Its 404 page employs a beautifully rendered video of a subway station, complete with 'missing' and 'lost'-themed movie posters and an empty train that rolls in, which you can click to board. As with many of the examples here, the page diverges from the overall site aesthetic to great effect. 18. MailChimp Don't make the monkey angry...The designers at ultra-hip email newsletter service MailChimp have morphed the company's well-known monkey into a Hulk-type character – complete with animated smoke – to signify a broken link. The style of the 404 page fits the rest of the site design nicely, reflecting the same lighthearted approach that turns an otherwise boring task into something fun and endearing. 19. Emirates When you're an international airline known for chic styling and expectations of high quality, you don't want a sub-par 404 page. Luckily for Emirates, its page ties in beautifully with the rest of its website, nailing its brand voice to a tee and providing ample opportunities to get back on track with ease. Great UX; great customer service. 20. Repair Pal Proving that 404 error pages don't have to be funny to be well done, US auto repair company Repair Pal uses beautiful imagery to brilliant effect. Like the Emirates error page, it also provides large buttons and a search box to help users to find the content they needed nice and quickly – much more user-friendly than the bog standard home page button offered by most. "Stumbling on a 404 page can be a frustrating experience, so we wanted to take a lighter tone from the start," the design team tells us. "The team landed on the nighttime van photograph as a no-brainer to relating back to the automotive nature of the site. We went through a few variations on the text, but our team ultimately went with 'Off The Grid,' as it's easily understood and relates to being out in the wilderness of our website. It also still serves a functional purpose as it provides a few, quick links back to our most popular pages." Next page: More brilliant 404 pages... 21. Everipedia Everipedia is a wiki site that has a vision to become "a pillar of the Internet, by connecting people to information about anything and everything," its executive editor Romi tells us. With its information-sharing purpose in mind, "We thought we could give people a much more relevant user experience by helping people learn about 404 errors if they ever came across one on our site," says Romi, who sent us this GIF to illustrate the 404 error page in action. Telling you everything you need to know about 404 pages, it's pretty meta, and totally in keeping with the site's aims. 22. Tin Sanity This dancing cup and straw screams its way across the page around the text Tin Sanity features an incredible animation of a dancing cup and straw that screams its way across the page around the text: "You just got 404'd". The screaming is accentuated with a drumroll and funky bass soundtrack, all of which leaves an excellent impression. 23. Audiko This 404 page is worth a visit just for the artwork The free ringtone-making service's 404 page features a beautifully rendered illustration of London, including the obligatory red bus and telephone box, as well as Big Ben's Tower, Sherlock Holmes and a hint of Tower Bridge. The site's worth a visit just for the brilliant artwork. 24. Bret Victor This is not a page. It's a picture of something that's not a page. Or is it?Bret Victor's 404 page, inspired of course by René Magritte's iconic painting, The Treachery of Images, confronts the viewer with some challenging philosophical questions. If this is not a page, then what is it? What constitutes a 'page'? Is it a thing that can be truly said to exist? What is the 'this' that this apparent non-page is referring to? Is anything truly real? Makes you think, no? 25. Home Star Runner This 404 page features amusing characters and shouts "404'd" at you Audio can be very effective when used in a 404 capacity. This error page for Home Star Runner, which features amusing characters, downloads and games, shouts "404'd" at you when you first arrive on the page. The hand-drawn illustration fits the rest of the site well in terms of style and theme. 26. Duoh! Duoh uses bright colours and negative space in its 404 Duoh is the collaborative partnership between illustrator Veerle Pieters and partner Geert Leyseele. Their business is based on strong design principles, so you'd expect a well-realised 404 page – and they don't disappoint. In characteristic bright colours and negative space, this page looks and feels in keeping with the rest of the site. 27. Bit.ly Bit.ly's cute creature responds to your mouse movements Link shortening service Bit.ly needs a special URL for its 404 page as bit.ly.com/404 has already been used as a shortened link. The page itself features a cute little creature bobbing up and down in an interactive sea, and responds to your mouse movements. 28. ApartmentHomeLiving Why is a sheep sitting on the lavatory in this 404 error page? This letting agent website's 404 page features a strange interior shot with a sheep sitting on the lavatory. Creative and wacky at the same time, it's a great (if abstract) example of how to do it well. 29. DropBox DropBox has a very simple but effective 404 page featuring an Escher-esque impossible box Replacing the Escher-esque impossible box that adorned its 404 page for years, DropBox has gone for a similarly quirky illustration to represent things all going wrong – the wheels coming off, if you like. It's a nice, simple hand-drawn illustration that gets the message across well, with plenty of helpful navigation links for usibility. 30. Wufoo Wufoo's 404 page is a simple, static affair that uses the branding effectively to convey the messageForm-building tool Wufoo's 404 page is a simple, static affair that uses the branding effectively to convey the message. It's a good example of a clean approach to handling errors. 31. eHarmony Is eHarmony's 404 suggesting you should just get plastered?The last thing you want to find when you're looking for love is that it can't be found, but eHarmony's 404 page softens the blow with this adorable image and a suggestion that you sign up for its dating service. Or maybe it's suggesting that you should just get plastered? That works for us, too. 32. Walk with You Bold typography makes this 404 page come aliveThis simple illustrative design for a site promoting life coaching uses existing assets from the overall site design, including a waterfall, to convey the 404 message. Bold typography makes this page work well. 33. LimpFish No time-wasters, please One of the best examples of a newspaper metaphor, Dave Barton's personal site manages to inject a little humour into its error message. 34. Starbucks Careful, that might stain Starbucks, like Heinz, makes good use of its primary product to illustrate the 404 message. In this instance, the tell-tales signs of a missing coffee cup are used to tell the story. 35. Blizzard Entertainment Blizzard's 404 page is just smashing Video game developer Blizzard takes an original approach to its 404 page that fits in with its general style, using broken glass as a metaphor for the broken link. What makes this example stand out is the clean design aesthetic beneath the glass. 36. NPR Actually, we think you'll find he's called WallyThe US's National Public Radio website's 404 page presents an amusing wiki-style list of missing people or things, from Amelia Earhart to your luggage. 37. CSS-Tricks Don't worry. You can't really rip a hole in the fabric of the internetThe superb tips, tutorials and advice blog CSS-Tricks is loved by all in the web design community because despite its dry subject matter, it manages to exude enthusiasm, humour and personality. And this cheeky 404 page is an excellent example of that. 38. Magnt Magnt's clever 404 page demonstrates a keen sense of wit and a clear call to actionMagnt enables you to create a business card-themed web page in minutes. Its clever 404 page demonstrates the company's keen sense of wit with its Venn diagram showing the two main reasons why you've landed on the site’s error page: “we broke something” and “you can’t type.”. At the same time it also provides a clear call to action to take you where you need to go. Related articles: 11 web design tools you can't live without 20 web designers to follow on Behance The pro's guide to UI design View the full article

As web developers and content creators, we generally spend a lot of time writing text that's wrapped inside HTML code. What if we told you that there's a better way to do it with Markdown? A way in which you were able to focus on the writing and not the code? Markdown is a plain-text, lightweight markup language developed in 2004 by John Gruber and Aaron Swartz. Originally created to make writing XHTML/HTML easier by converting plain-text files into structurally valid HTML or XHTML, Markdown can be used for almost any type of writing: manuscripts, tutorials, notes, web content and more. Although relatively straightforward, Markdown can be a bit intimidating when you first start out. But once you get the hang of it, you'll quickly realise how much time was spent formatting your code instead of typing your content. 01. Choose a Markdown editor When you're working with Markdown for the web, it's important to understand the basic syntax and limitations you may face. Before you begin, you need some type of editor and an interpreter for your site. Alternately, you can convert the Markdown before publishing. You'll need some kind of editor to get startedThere are several editors from which you may choose. Byword is awesome because it offers a wide range of export options, including HTML and PDF. Another great alternative is StackEdit – a free, online Markdown editor. Of course, any plain text editor will work. Jetpack is handy for use with WordPressIf you don't plan to convert your Markdown to HTML, you can get a plugin (or interrupter) for your site. For WordPress, Jetpack has excellent support for Markdown, which allows you to use Markdown directly inside posts and comments – as long as you enable that option. Like any markup language, Markdown has its own syntax. Note: There are a number of different flavours or varieties of Markdown. In this article, we'll only cover the commonly shared syntax. 02. Set up headings In HTML, there are six heading styles: h1, h2, h3, h4, h5 and h6. To recreate these in Markdown, use a series of hashtag symbols (#) – corresponding to the heading number – followed by the heading text. For example, to create an <h1> tag, use one hashtag #; for an <h2> tag, use two hashtags ##; and so on and so forth. Markdown input: HTML output: 03. Mark up paragraphs Paragraphs are represented by the <p> tag in HTML. In Markdown, they're separated by one or more blank lines. Like HTML, whitespace is ignored. So if you add 20 blank lines, you're still only going to have one paragraph. Markdown input: HTML output: 04. Style the line breaks Line breaks, which are represented in HTML with the <br> tag, are added using a single line break, with two spaces at the end of the previous line. Markdown input: HTML output: 05. Mark emphasis There are two ways to added emphasis to your text: Italic (<em> in HTML) or Bold (<strong> in HTML). In Markdown, you accomplish this using one or two asterisks (*). You can also use underscores (_), but I stick with asterisks, because there are other flavours of Markdown that use underscores for other things. Markdown input: HTML output: Note: You can also create bold-italic text using three asterisks: ***Bold and Italic Text***. 06. Create horizontal rules To create a Horizontal Rule (or <hr> in HTML), use a series of three or more dashes ( – ) or equal signs (===). It's your choice which one you prefer, but just make sure you include an empty line above and below. Markdown input: HTML output: 07. Add images and links In HTML, an image is added using the <img> tag and links are added using the <a> tag. In Markdown, images start with an exclamation point (!), followed by square brackets ([]) for the 'alt text', and parentheses (()) for the path to the image. You can also include an optional title inside double quotes (""). With links, it's almost the same, except there is no exclamation point. Markdown input: Note: You can also use reference links and images, but that's not covered here. HTML output: 08. Make lists There are two types of lists in HTML: ordered (<ol>) and unordered (<ul>). With Markdown, use numbers for ordered lists, and asterisks or hyphens (-) for unordered lists. Markdown input: HTML output: 09. Add inline code and code blocks When you're working with code in HTML, you can either include it as an inline element using the <code> tags; or as a pre-formatted text block using the <pre><code> combination. In Markdown, these elements are delimited using either a single backtick on each side (`); or by using a fenced-style, which includes three backticks above and below the code block (```). Markdown input: HTML output: 10. Style up blockquotes Blockquotes are added in HTML using the <blockquote> tag. In Markdown, use the greater than symbol (>) before the line. Markdown input: HTML output: 11. Embed inline HTML There are times when you need to create an HTML element that is not supported; for example, you may need a <table> or <div> tag. If that's the case, you may mix Markdown and HTML, but there are some restrictions. For instance, you cannot include Markdown within block-level HTML tags. Read more: 20 Node.js modules you need to know 12 common JavaScript questions answered 9 of the best resources for learning HTML and CSS View the full article

http://www.zdnet.com/article/wannacry-ransomware-hospitals-were-warned-to-patch-system-to-protect-against-cyber-attack-but-didnt … View the full article

We may be busy gearing up to bring you the best discounts for creatives on Black Friday 2017 at Creative Bloq, but that doesn't mean we've neglected our current deals. For today's daily deal, we've got you a great discount on a course to teach you all about programming with ReactJS. When you interact with a website, it's not often that you see all the gears behind the scenes that are turning with each click. Many of them are powered by JavaScript libraries such as ReactJS. You can learn how to make use of this powerful programming language and use it in your own designs with the ReactJS Programming Bootcamp, on sale now for just $39 (approx £30). The ReactJS Programming Bootcamp contains eight in-depth courses that will teach you how to work with JavaScript and ReactJS to build user interfaces that are responsive and intuitive. Regardless of your programming level, these courses will familiarise you with the concepts you need to know to build for the web and mobile. You’ll get to go hands-on with ReactJS and learn how to build apps and services that people are sure to love interacting with. The ReactJS Programming Bootcamp usually retails for $458, but you can get it on sale now for on sale now for just $39 (approx £30). That’s massive amount of savings for this boot camp that will help you launch your new career or add valuable skills to your resume. About Creative Bloq deals 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. 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 or Offer tag page. Plus, you can get in touch with any feedback at:deals@creativebloq.com. Related articles: The 10 most iconic user interfaces in movie history The pro's guide to UI design How to build a chatbot interface View the full article

Cloud-based communications platform Slack finished patching a severe security hole Thursday affecting portions of its platform that used Security Assertion Markup Language for user authentication. View the full article

Stranger Things fans will probably know that season two of the 80s-styled smash hit is landing on Netflix today. Those of you who are counting down the minutes until you see that retro red lettering lighting up your screen again will be interested to hear that the opening sequence was originally going to look very, very different. The show name is set in ITC Benguiat, created by the legendary typographer of the same name. This retro typeface sits perfectly with the vibe of the show, harking back to the Stephen King novel covers of that era. So it will come as some surprise that originally, the plan was to go for something much more modern. Here are some of the options that didn't make the cut (via Time). This discarded title references Alien This option clearly references the distinctive logo for Alien, created by R/GA co-founder Richard Greenberg. The approach makes sense given the movie's solid links to 80s pop culture – the first film was released in 1979. A heavier weight, but the eerie glow remains A second option uses a typeface with a similar style, but in a heavier weight. The glowing lettering and backwards 'E' help point to the uncanny, eerie mood of the show. This version hints as the interlocked lettering of the final design Another discarded version looks more like something from a Marvel film than a retro horror series, but we can see the beginnings of the interlocked character concept that was carried through to the final design. The actual sequence starts with an extreme close-up on the lettering, so it's initially impossible for viewers to make out what they're looking at. The floating letters eventually slot into place and lock together to reveal the title. The concept was intended to mirror the series' plot. While initial experiments favoured ghostly greys and whites, the final lettering is in bloody red – a perpetual favourite of horror branding, but undeniably effective. The retro vibe is emphasised through the inclusion of glitches and imperfections that make it look like the sequence was made in a pre-digital era (and, of course, echo the moments in the show when the monsters of the Upside-Down approach our world, fairly lights aflicker). To put together the Stranger Things opening credits, show creators Matt and Ross Duffer collaborated with Imaginary Forces. The visual storytelling agency has impeccable pedigree – it's the studio behind the iconic title sequence for Mad Men, and has worked with brands such as Game of Thrones, Transformers and Marvel – so it's no surprise that the title sequence is a winner. [Via Time] Read more: 19 amazing movie title sequences New Stranger Things posters are a nostalgic treat Creating the official retro-style Stranger Things poster View the full article

With shock victories for Brexit in the UK and Trump in the US marking the start of the most volatile period for business many of us will have experienced, it's natural to feel anxious. In our recent article How the web industry is coping in uncertain times, we spoke to agency heads and web experts to get their take on the situation. So, what tips can our experts suggest to help you safeguard your business against whatever fresh hell the world decides to throw at us next? 01. Diversify your clients Putting all your eggs in one basket is a bad idea"Diversify your client list so that if one or some of them go out of business, you don’t," says Harry O’Connor, managing director at VoodooChilli Design. "Also, consider investing into developing an in-house product." Adam Cowley, a small business director with seven years’ experience as a freelance web developer and technical lead, agrees. "Working with smaller businesses or businesses that have customer bases in the UK and don’t rely on trade with the EU (Government, Transport & Infrastructure, ecommerce, SMEs) would certainly help to safeguard future revenue."
 02. Talk it out Stay in touch with clients so you know about problems sooner"Talk and talk often. Talk to your clients, talk to your team, talk to your networks. The more you communicate and build those relationships, the more honesty you will receive," advises Alex Ellis, managing director of Delete. "Then, if and when there are issues on the horizon, you will find out about them quicker and earlier, giving you more time to react." 03. Broaden your horizons The internet has no borders"Start doing business internationally," says Suraj Kika, CEO at Jadu. "The internet has no borders and if it means you get to travel and work with diverse cultures, we recommend it 100 per cent." 04. Stay ahead of the curve Stay ahead of the curve by keeping up with the latest technologies"Keeping up to speed with the latest technologies and the way they are changing customer expectations is paramount," explains Jon Davie, CEO at Zone. "The disconnect between what customers expect and what brands deliver is growing – any digital professional who can help bridge that gap will be well placed to thrive." 05. Let go of the past Moving with the times is your only option"Stop trying to hold on to things – the notion of ‘security’ is both meaningless and outdated," suggests Brown&co co-founder Troy Wade. "Be flexible, try new things, open yourself up to saying yes to the projects you wouldn’t have considered saying yes to before." This article originally appeared in issue 296 of net magazine. Buy it here or subscribe here. Read more: The designer’s guide to Brexit 6 rock-solid ways to improve your graphic design portfolio The secrets of great client relationships View the full article

Want to learn new skills, or refresh the fundamentals of your graphic design knowledge? We’ve previously brought you some great graphic design tutorials, not to mention some amazing free ebooks. But perhaps you’re looking for something a little meatier and more in-depth? We don’t all have the time and money to spend three years doing a university design degree, or even to take an evening class at the local college. But in today’s internet age, it’s possible to do some pretty advanced study of design online, led by academics and other experts. And some courses are actually free! In this post, we round up the best free graphic design courses online, from leading design course providers Coursera, Kadenze and Udemy. However, if there’s a great free course you feel we’ve missed, do let us know on Facebook or Twitter. Coursera courses Coursera is a venture-backed, education-focused technology company founded by professors Andrew Ng and Daphne Koller, which offers online courses from top schools such as Stanford and Yale. And best of all, for some of them you can get the course materials without spending a penny. Be warned, though: you won’t be able to get your work marked, or get a certificate at the end, without paying. But if you just want access to the lectures and associated quizzes, you can get all these for free. To do so, ignore the ‘Free trial’ offer, as that just means you start paying after seven days. Instead, choose ‘Audit this course’, which lets you access the materials for free, with no time limit. (If you’re still confused about how to get the lessons for free, then check out this blog post from Class Central.) 01. Ideas from the History of Graphic Design Louise Sandhaus and Lorraine Wild trace the history of design as a practiceThis California Institute of the Arts course is aimed at beginners entering the field, or students interested in learning more about visual culture and analysis. Taught by Louise Sandhaus and Lorraine Wild, it traces the emergence of design as a recognised practice, explains why things look the way they do, and how designers approach specific design problems in their work. No previous design experience is required to take this course. 02. Graphic Design David Underwood explains the fundamentals of good graphic designTaught by design and media teaching consultant David Underwood, this course from the University of Colorado, Boulder, teaches the essentials of good graphic design. You’ll learn to use contrast, repetition, proximity, and tension in the design of presentation slides, professional reports, business websites and more. You’ll need some presentation software, such as Microsoft PowerPoint or Apple's Keynote, to take the course. 03. Fundamentals of Graphic Design Michael Worthington explains the basics of graphic design, and gets you making thingsIn this California Institute of the Arts course, taught by Counterspace LA founding partner Michael Worthington, you’ll learn the foundational skills of graphic design, including image making, typography, composition and working with colour and shape. This course is not just about listening but doing and making, so it also offers exercises and practical projects. 04. Introduction to Typography Anther Kiley explains how to select and combine typefacesThis course from the California Institute of the Arts explores the characteristics of letterforms, how to select and combine typefaces, and conventions and best practices in setting type. Taught by LA-based graphic designer Anther Kiley, this is not a software course, so a basic working knowledge of and access to Adobe InDesign or similar page layout software will be necessary. Get Adobe Creative CloudKadenze courses Kadenze is a commercial, massive open online course (MOOC) provider that offers courses geared towards art, music and creative technology. It follows a similar model to Coursera, so choose the ‘Audit Course’ option and you’ll get access to the following course materials for free. 05. Graphic Design History: An Introduction Brockett Horne and Ellen Lupton introduce the history of graphic designThis course from Maryland Institute College of Art asks: where did graphic design come from, and where will it go next? This introduction to graphic design history addresses everything from fonts and letterforms to posters and brands. Taught by Brockett Horne and Ellen Lupton, this self-paced course is aimed at beginner level. 06. Introduction to Graphic Illustration Junichi Tsuneoka explains how to turn your drawing skills into a marketable commodityThis course from Cornish College of the Arts, Seattle, helps you to explore the translation, production and distribution of your visual ideas through a series of projects. Taught by Junichi Tsuneoka, its aim is to help you discover new possibilities for your illustration abilities in the market. To take this course you’ll need basic drawing skills, basic digital tool skills such as Adobe Illustrator or Adobe Photoshop, as well as an understanding of fundamental design theory. Udemy courses Udemy is an online learning platform aimed at professional adults. Unlike the other two providers on this list, Udemy is not centred around traditional academic institutions but provides a platform for experts of any kind to create courses which can be offered to the public, both free and paid-for. On top of the 10 of the best free Udemy courses for designers that we found before, we've got these four more great free courses that are aimed more at graphic design beginners. 07. Introduction to Graphic Design Sean Berg answers questions about what design is and what designers doThis beginner-level course by Sean Berg is aimed at helping you understand the fundamentals of good graphic design. He doesn’t appear on screen, so it’s essentially a series of audio lectures accompanied by text-based slides. From the history of communication to the five basic principles of design, this course answers questions such as ‘What is design?’ and ‘What does a designer do?’, and includes exercises to help you observe how design elements are used in the real world. 08. Learn Adobe Photoshop from Scratch Learn how to use Photoshop from scratch in this course from Eduonix Learning SolutionsFrom Eduonix Learning Solutions comes a complete beginners' guide to learning Adobe Photoshop. This practically-focused course, taught by Matthew Brown, starts with basic introduction to the software and then examines features such as selection tools, manipulation tools, creation tools and workspace tools. Along the way you’ll learn some of the fundamental principles of good design and handy tips and tricks to help you get the best out of Photoshop. 09. Logo Design From Concept to Finish Lindsay Marsh shows you how to design a logo in Adobe IllustratorIn this course, Lindsay Marsh takes you through the process of designing a logo in Adobe Illustrator from initial idea to finished files. Rather than talk to the camera, she instructs you over the top of a screen capture of what she’s doing in the software. Along the way, she explains important concepts including font types, weights, styles and how to execute good font hierarchy in design. 10. Professional Logo Design in Adobe Illustrator Learn the fundamentals of logo design and how to create one in IllustratorThis course from Rawson Uddin explains how to identify the components and design techniques behind the most successful logos and how to create your own. Talking over the design process he’s pursuing on-screen, the tutor deconstructs logos in order to explain why and how they work, and offers a methodical approach to creating your own designs in Adobe Illustrator. Related articles: 5 uses for stock images you might not have thought of Best Mac apps to make you more creative 6 rock-solid ways to improve your graphic design portfolio View the full article

With the fidelity of video game CG and film effects growing by the day, the ability to create spectacular environment and landscape art has never been in higher demand. Such images can set the tone of an entire piece. Here we introduce the most creative artists in the field today so you can discover their techniques and learn how to paint landscapes as amazing as theirs. 01. Finnian MacManus MacManus has an ongoing redesign of Dune Finnian MacManus is a concept artist working in the film and game industries. "When designing landscapes I always start with the background history and culture of the area I'm creating," he tells us. "Landscapes and architecture have their own character, expressed by their patterns and shape relationships. I try to accentuate these and push them further than reality. "To create palettes, I rely heavily on reference images that are shot without filters, to get the true colour of a scene from the earth. It's then, by pushing these grounded palettes past reality, that I believe you can create a wonderful and mysterious mood. "I owe a ton of the knowledge I have now to the concept artist John Park. One of the great things he taught me and other students at Brainstorm School was to reinforce our foundational background before starting with 3D and photo texturing. I feel it's very important to have a good knowledge of perspective, design and composition before jumping into the greater challenges that this industry offers." 02. Oscar Gregeborn Gregeborn hopes viewers want to explore his worlds "My work is always approached with the goal of making a spectacle," says freelance artist Oscar Gregeborn. "For me, a successful painting is not one where I receive compliments on my rendering or some other aspect. It's one where the viewer is so drawn to the painting that they feel an urge to explore every part of the world I've created. "Although I equip myself with many different tools and techniques when creating a painting, exploratory colour choices and otherworldly designs are the facets I utilise the most. "When I first started painting, my initial focus was to copy reality. But my good friend Jesper Friis taught me that by bending the rules of reality, you can achieve a far higher visual impact. Remember that the possibilities of art are limitless, so use the tools given to you to create a feast for the eyes!" 03. Maxwell Boas Boas makes sure he has his concept straight before he starts painting As an art director and production designer at DreamWorks Animation, Maxwell Boas has to work fast. "A lot of the time I only have a few hours at my desk to execute an idea," he reveals. "So I've created a habit of being very clear with the concept before I begin to paint. I usually do quick, loose thumbnails and explore rough colour ideas before I start on a piece. There's nothing worse for me than to have invested the time and energy in a painting and not be happy with the concept, composition or lighting idea later on down the road. "I have been fortunate to have worked with the talented production designer Raymond Zibach. He has taught me to ask, 'What is the artistic statement I am trying to make?' Whether it's a bold composition, a unique colour palette or a lighting idea to help stage a character, staying true to that initial idea creates a stronger, more emotional piece of art." 04. Andrey Surnov Surnov feels that landscapes are impactful yet often overlooked Freelance artist Andrey Surnov is particularly interested in developing and imagining environments for online games. "I see them as the most defining aspects of the worlds we're developing," he explains. "Landscapes are powerful storytelling tools, impacting the player with more immediacy than narration or lore, yet their potential is often overlooked or underrated. Character design is too crowded a space, because most young artists seem to gravitate towards it. "The best advice was given to me by my curator: don't compare your pieces with artworks created by more skilled artists who are working in the same style. Instead, be so unique that such comparisons are irrelevant." 05. Jessica Rossier Rossier starts with an existing photograph then transforms it "The imagination of an artist is boundless, I'm sure we all agree," says Jessica Rossier, co-founder of visual development studio Wardenlight. "The immensity of that is something that has excited me for many years, and creating environmental design enabled me to exploit this passion beyond character design. "Each new image I invent seeks to exploit the space in the best way possible, to create ever larger and more impressive environments. "I like playing with scales of magnitude. The photobashing technique is the one I prefer. It involves working with an existing photograph and transforming its shape completely to produce an entirely different creation." 06. Christian Dimitrov Dimitrov hopes his finished work matches the spirit of the original sketch For freelance matte painter and concept artist Christian Dimitrov, finding the balance between the big, epic landscape and the little stories incorporated in it is a big part of his job. "I'm still learning about how to find this balance," he tells us. "I hope I'm achieving the feeling of a different world in my works and that I can engage people with the stories the painting is telling. One of the techniques I use most often is the Quick Selection Tool with Refine Edge option in Photoshop CC. It's a wonderful tool for extracting all kinds of elements, such as clouds, buildings, trees and so on. "One of the best and most profound bits of advice I've had was from Dylan Cole: 'The hardest thing about painting is maintaining the spirit of a sketch in a final illustration.' This kind of analysis opened up my eyes and made me think about design in a new, completely different way. This is something that I continue to learn about and try to be better at." This article originally appeared in ImagineFX magazine. Subscribe here. Related articles: 14 fantasy artists to follow on Instagram Review: Painter 2018 7 must-know painting techniques for artists View the full article

There's something odd going on in graphic design at the moment. In April, Kendrick Lamar released his Damn album, and with it a cover that was... well, pretty damn rubbish. Kasabian followed suit in May by adorning its latest musical offering with a semi-naked old man and some drawn-on tears. The internet exploded with memes and left the aesthetically conscious among us seriously asking: have we entered the era of bad graphic design? 2017 has welcomed the era of bad designThe argument goes that we're so saturated with visuals, what might traditionally be considered 'good' graphic design just gets lost. To stand out (and gain kudos with the millennial market), brands are opting for designs so bad that they're impossible to ignore. Well, Kasabian and Kendrick's efforts look like masterpieces when compared to the latest single cover from Selena Gomez. Wolves, the former Disney child star's collaboration with Marshmello, looks like it has been made by a teenager just taking their first lesson in Photoshop. The 'O' of the title has been turned into a moon, for crying out loud. It's so bad it must be intentional – right? Gomez's Tweet announcing the single offered no clues: In the 'it's just rubbish' camp, we have several convincing arguments. We've already seen movie posters descend into their own design crisis this year. The weirdly proportioned, very obviously cut-out, unrelated floating elements on this latest cover seem to be from the same school of thought. Perhaps this is the horrible result of design by committee at a record company? Then there's the picture of Gomez herself – why is it so grainy and blurry? Surely the star's not lacking in hi-res portrait snaps. And if it's an aesthetic decision, why is the wolf beside her so clear? Marshmello has embraced cheesy design beforeHowever, Marshmello seems like the kind of chap to embrace cheesy design in an ironic way. For those who don't know, that smiley white thing on the cover is the headgear he wears to hide his identity. Surely someone with such a tightly controlled public persona wouldn't let a high-profile single design pass by unchecked. A look through the 'mello's discography reveals he does indeed have a bit of a thing for tacky design. Although it's still not quite on the level of the Wolves cover. And Gomez's back catalogue favours glossy over gaudy every time. The new single is a departure from Gomez's usual styleSo is the Wolves cover the latest example of the trend for wilfully subverting what we consider 'good' design – or is it just rubbish? The jury's still out. Let us know what you think on our Facebook and Twitter pages. Related articles: Five design student stereotypes to avoid 5 outrageous product placements in movies Famous artworks ruined with design by committee View the full article

Graphic designer Vinicius Araújo has brought together his two loves of technology and typography in his latest project 36days Electronics, transforming the biggest gadget brands into Helvetica-styled letters. The project, which Araújo started posting on his Behance page on 13 October, has given the Brazil-based designer a chance to really push his industrial design and motion graphics skills to the limit, all while having a bit of fun. And thanks to using the alphabet as the basis, there's been a structure in place to help him along. Updates are still being published, but enough time has passed for us to now enjoy the whole alphabet with a technological Helvetica twist. The 26 letters in the series capture the essence of famous technology brands by incorporating textures, logos and even buttons associated names including Motorola, Intel and Kodak. Kicking off the series is a letter A decked out with the look and feel of an old Apple Mac. There's even a mouse plugged into the side of the letter to finish off the effect. Explore a selection of our favourite Helvetica-inspired, technology powered letters from the 36days Electronics project by scrolling through the gallery below – just click the left or right arrows to see them all. And remember, you can see all 26 on Araújo's Behance project page. The mathematically minded among you are probably wondering why the project is called 36days Electronics when the alphabet is a whole 10 letters short of the title. Well, that's because Araújo isn't content with just turning the alphabet into hardware. He's also turning numbers into gadgets and gizmos, too. Currently the project is up to number 5 and has seen 3D digits become vending machines and coffee machines. Be sure to keep an eye on the project and catch how all the numbers turn out. Related articles: 55 best free fonts for designers 10 inspired alternatives to Helvetica 12 inspirational industrial designers to follow on Behance View the full article

Creative collaborations can push projects in new directions and bring a uniqueness to your work that it wouldn't have had from you alone. Whether you're an agency working with illustrators for branding projects, a digital artist working with others on packaging design, a VFX specialist joining forces with 3D artists or another creative looking to partner up, the benefits are huge. But there’s a fine art to a successful collaboration. Here are our top tips for ensuring your collaborative projects run smoothly and produce the results you (and your client) had hoped for. 01. Settle on an idea first Kristjana S Williams' style was an ideal match for Design Bridge's concept for this festive packaging For starters, it’s important to know when to approach another creative. Rather than beginning a project with a particular partner in mind, come up with the creative idea for the project first. Then, as your idea takes shape, certain creatives are bound to come to mind. This means you can avoid the awkwardness of approaching someone too soon, only to find that your idea or approach has changed and you no longer need them. For example, when working on the Fortnum & Mason Christmas range, our idea at Design Bridge was to conjure the magic and excitement of everyone coming together around the Christmas table for a sumptuous Fortnum’s feast. I’d seen Kristjana S Williams’ work previously on something I’d received through the post and thought, ‘Yes! She’d be great for this.’ Her eclectic style puts a modern twist on traditional woodblock techniques – perfect for expressing both a traditional and contemporary Fortnum’s Christmas. 02. Welcome collaborators into your team Design Bridge brought Rob Bailey on board to work on these limited edition bottles Bringing distinctive individual styles to your work while ensuring the design is absolutely right for the brand is both fun and challenging. It’s a balancing act, calling for constant communication, so you need to treat the creative partner as part of the team and truly work together. We recently collaborated with Rob Bailey on a limited edition Smirnoff project to celebrate British Pride 2017. I’ve loved his work for years and was inspired by his piece Hey Man, which depicts two figures in a warm, loving embrace. Bailey’s style expressed the ‘Choose Love’ message of the project so well. It was a tight turnaround, so we had to work very closely to make sure that we remained true to both his style and the Smirnoff brand, producing work that would look great on the bottles, too. 03. Make the most of each individual's skills Design Bridge worked with Coralie Bickford-Smith to bring this honey packaging to lifeUnderstanding the complementary skills that a designer and an illustrator bring to a project is also crucial to get the best out of a collaboration. We worked with Coralie Bickford-Smith for our Fortnum & Mason honey range. Her intricate book cover designs were perfect for our creative idea of labels inspired by postage stamps from far-flung corners of the world. I did some initial sketches based on her existing work and the practicalities of designing a label, which she then developed. It was a real labour of love, but working with Bickford-Smith was a dream for me as I collect her book covers. I feel lucky to work on such amazing projects where we can bring an idea to life with the help of talented illustrators that I’ve often admired for years. Each project involves a lot of work, but an open, honest and truly collaborative approach ensures the best results every time. This article originally appeared in Computer Arts issue 270. Buy it here or Subscribe here. [Main photo by rawpixel.com on Unsplash] Related articles: How do you judge your success as a designer? Is it better to be a competitive or collaborative designer? The 18 best tools for online collaboration View the full article

We may be busy gearing up to bring you the best discounts for creatives on Black Friday 2017 at Creative Bloq, but that doesn't mean we've neglected our current deals. For today's daily deal, we've got you a great discount on a course to teach you all about how to promote your services on Facebook. There are more than one billion people on Facebook already, and the network is still growing. That’s a lot of people who you can reach easily if you know how to do it. The 2017 Facebook Ads Certification Course will teach you how to do just that, and you can get it on sale now for 88% off the retail price. Thanks to the growing network and powerful targeting tools, Facebook has become an essential part of any marketing campaign. The social network gives you the capability to reach just about anyone, especially those who may be interested in your product or services. The 2017 Facebook Ads Certification Course will teach you how to make the most of Facebook's marketing tools. Work your way through this course and score a certification to prove your skills. You can get the 2017 Facebook Ads Certification Course on sale for 88% off the retail price. That makes your total just $15 (approx £11). It’s a deal that will pay for itself in time as you reach more people and sell more products, so grab it today. The course promises to teach you: The fundamentals of Facebook marketing and advertising To create core, custom, and lookalike audiences How to deploy Facebook’s objective-driven ad campaigns Advanced applications of Facebook ads About Creative Bloq deals 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. 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 or the Offer tag page. Plus, you can get in touch with any feedback at:deals@creativebloq.com Related articles: Best Mac apps to make you more creative How to make social media work for you The best Black Friday deals 2017 View the full article

Global satellite telecommunications company Inmarsat is warning customers of two critical vulnerabilities that could allow attackers to infiltrate a ship's on-board computer system. View the full article

Save the date! From the makers of 3D Artist, 3D World and ImagineFX comes an exciting, brand-new event – Vertex – for one day only on Tuesday 13 March at Olympia, London. Just like how a vertex connects everything, our event will bring these sister magazines and the CG community together for practical inspiration and a fantastic networking opportunity. This special event assembles experts from every industry and discipline in CG, from games and VFX through to VR, covering character concepting, real-time creation and more. You’ll be able to boost your skills with leading industry artists and learn from the world’s best creative studios no matter which area you specialise in. You’ll get hands-on advice and tips and hear about the newest developments at our top talks, engaging masterclasses and workshops, portfolio review sessions, fascinating evening panel, and unmissable networking event. There’s even a recruitment fair for aspiring and professional artists and an expo area to showcase the latest in technology and software. What’s more, there will be an ‘Ask an Artist’ area to help you troubleshoot your technique woes one-on-one with pro artists. We can’t wait to reveal the amazing speakers we have lined up, so make sure you sign up to our newsletter and keep an eye on our website and social media channels for announcements soon! View the full article

For newcomers to ZBrush, the interface seems very different to other 3D modelling programs, so can be intimidating. If you often find yourself scratching your head and searching the web for training or tutorials on how to accomplish tasks in ZBrush, we're here to help. This image, Metamorphosis of Nyssa, is about the never-ending desire to change who we are, when all the beauty we need is already inside us. This image is inspired by Lois van Baarle, and is deeply influenced by the work of Carlos Ortega Elizalde. Although the final composition was laid out in DAZ Studio to take advantage of the GPU accelerated real-time rendering with photo-realistic results, it also used Cinema 4D for much of the initial modelling, Marvelous Designer for the dress, and ZBrush extensively to refine the details. Just as moving between DAZ Studio and Cinema 4D helps you strike the right balance between detailed modelling and an accurately posed character, moving between DAZ Studio and ZBrush in this case enabled us to adjust the character's hair bit by bit. For greater independent control over the different hair parts, we broke up the hair into several sections, which are all imported into DAZ Studio as separate objects. This way, we could select any hair part we weren't happy with and move it back and forth between DAZ Studio and ZBrush, creating a new morph and making subtle changes until happy. 01. Send objects from DAZ Studio to ZBrush Use the Send to ZBrush option to export from DAZ Studio [Click on the arrows icon to enlarge this image] GoZ (short for GoZBrush) is a dynamic bridge between ZBrush and other 3D packages. With a single click, you can send your object from DAZ Studio to ZBrush for editing. Once you are all done, you can then send it back to DAZ Studio, again with just one click. Select the object you want to adjust on the Scene tab in DAZ Studio. Click File, and then Send to ZBrush. When the GoZ Export Options dialog appears, select Export with Deformations and click Accept. ZBrush will open with a blank canvas. If the LightBox menu appears, you can just click the LightBox button to hide it and get it out of the way. 02. Set up objects in ZBrush Orient your object and bring it fully into view [Click on the arrows icon to enlarge this image] Click and drag on the canvas to add your object. Hold down the Shift key at the same time to snap the object to the correct orientation. Click the Edit button on the tool bar. Note that this is different to Edit on the File menu. Now the object is successfully loaded in ZBrush, click Frame to bring the object to the centre of the canvas and fully into view. 03. Edit the object in ZBrush Use the Move and Move Topological brushes to make adjustments [Click on the arrows icon to enlarge this image] From the Brush menu, use the Move and Move Topological brushes to make any adjustments to my object. Other brushes will work, but keep in mind that drastic changes, especially to the core geometry, may have unintended results back in DAZ Studio. Once done, click on the GoZ button in ZBrush and you'll automatically be taken back to DAZ Studio. 04. Move back into DAZ Studio Back in DAZ Studio, morph your adjustments to taste [Click on the arrows icon to enlarge this image] In DAZ Studio, the GoZ Update Options dialog appears. Choose Update Geometry, select Create Morph, and click Accept. The new morph is now available by clicking the word ZBrush on the Parameters tab. Adjust the Morph slider to your taste. Creating morphs with ZBrush is handy as your adjustments can be as dramatic or a subtle as you want. This article originally appeared in 3D World issue 225. Buy it here. Related articles: The 10 best ZBrush plugins 10 essential ZBrush shortcuts to improve your workflow 30 inspiring examples of 3D art View the full article

Adobe Illustrator CC can sometimes seem like a daunting tool to use if you’re dipping your toe in the graphic design water for the first time. It’s certainly not as forgiving as Photoshop CC – often there is a specific way to achieve a certain task in Illustrator rather than being able to fudge or force your way through it, which is often possible in Photoshop. Get Adobe Creative CloudThe pathfinder panel forms the backbone of all shape building within Illustrator, and once you get your head around this you’ll find it far less daunting. Through the next several steps we’ll run through some essential pathfinder techniques for creating basic graphics and icons, including teardrop shapes, an expand button, a chevron-like pattern, an eye icon and a camera shutter icon. These tips should be useful to both fledgling Ai users and more experienced designers alike. And don't forget, we have 100 amazing Adobe Illustrator tutorials for you on this site, to spark further inspiration and show you how to achieve great designs. 01. Create a simple teardrop shape You can create a teardrop using a circle and a square We'll begin with the basics of the pathfinder tool and how it can be used to create simple shapes from separate drawn vectors. Start by drawing a perfect circle using the ellipse tool by holding shift with 'snap to grid' selected from the view menu. Create the circle to fill four of the larger grid squares and draw a perfect square that fills one of the larger grid squares, as shown above. Select both shapes and use the unite function from the pathfinder to combine both shapes into one vector. Now hit R and rotate the shape to look like a teardrop. 02. Create an expand button Minus a diamond shape from a square to create an expand icon Start by drawing a square, then copy and use the cmd+F shortcut to paste it in place on top of the existing square. Hit R to bring up the rotate tool and rotate the top square by 45 degrees by holding shift. Now with both squares selected, use the 'minus front' pathfinder function to subtract the top square from the bottom one, creating four corner triangles and a simple expand button in the process. 03. Create shapes from strokes Once the stroke is outlined it will function as a shape Use the pen tool with 'Snap to grid' turned on to begin creating some simple vector strokes, in this case a basic arrow shape. Increase the stroke weight to 25 and choose 'Round cap' from the stroke panel. Now holding alt and shift, drag the shape to duplicate it, then hit cmd+D to continue duplicating it a number of times. Select all the shapes and navigate to Object > Path > Outline Stroke. Now the stroke is outlined it will function as a shape, so you can use the pathfinder with other shapes. In the example above we've knocked all the arrows out from a rectangle using the minus function. 04. Create a simple eye icon The area where the two circles overlap will form the eye shape Begin by drawing a perfect circle and then hold alt and shift to drag and duplicate it. The area where the two circles overlap will form the eye shape, so use your judgment here. Next, with both shapes selected use the intersect function to create a shape from the overlapping areas of the circles. Rotate the shape so that it looks like an eye and then use the technique from step 03 to knock out an outlined stroke circle. 05. Create a camera shutter icon Begin by drawing a perfect circle, then add a polygon Now we're going to combine a couple of techniques to create a graphic camera lens icon. Begin by drawing a perfect circle, then draw a polygon using the polygon tool and place it over the top of the circle. With both shapes selected, use the align panel to align the horizontal and vertical centres. Now simply use the minus front pathfinder command to subtract the polygon shape from the circle. Now turn off Snap to grid and horizontal line along the top edge of the pentagon extending beyond the circle bounds. Hit R to bring up the rotate tool and hover over the central grid point of the polygon, hold alt and click. Rotate and duplicate the lines Enter the fraction 360/6, hit the copy button and press OK. Now simply hit cmd+D to duplicate the lines. Repeat the technique shown in step 03 to outline the strokes and then subtract them from the circle to create your camera icon. Read more: The 17 best Adobe Illustrator plugins Create a perfectly geometric logo design in Illustrator 11 places to find logo design inspiration View the full article

http://www.zdnet.com/article/bad-rabbit-ten-things-you-need-to-know-about-the-latest-ransomware-outbreak/ … View the full article

https://blog.cpanel.com/its-been-a-long-road-but-it-will-be-time-to-say-goodbye-soon … View the full article

Researchers warn that hackers have weaponized a vulnerability that could be used in an IOTroop (or Reaper) attack, bringing the likelihood of an attack one step closer. View the full article

The web as we know it, is constantly changing and evolving. What we still can remember as a simple and straightforward medium gained another dimension a few years ago, and it doesn’t look like it’s going to stop there either. For a website builder, what was once part of science-fiction movie visual effects is now possible on a tablet lying on your couch, and there are buildings covered in large-scale interactive installations that are actually just fullscreen Google Chrome windows. Follow the steps below to find out how to create a realistic melting effect with three.js. 01. Set up the three.js scene Go ahead and grab the three.js library and include it in your site. You’ll need to instantiate the WebGLRenderer, the Scene and PerspectiveCamera. After these are instantiated, you will need to render the scene on RequestAnimationFrame. 02. Add lighting to the scene Next, lights need to be added to the 3D scene. In this example, two lights will be used: an ambient light and a point light. The ambient light serves as an overall global colour for the scene, while the point light will emit light that diminishes with distance. This will give the scene some contrast. 03. Load the 3D model Now that the scene has been set up, the 3D model needs to be loaded in. The model can be loaded using any supported format (JSON, OBJ, DAE, etc). Below is an example of loading a DAE model. In this example, it’s very important that the model has enough polygons to perform vertex modifications. The deer skull that’s being used in this example has 3,500 polys. If the poly count is too low, the vertex animations will be too explicit and distorted. 04. Add a bump map Bump maps are perfect for adding depth to your textures at a low cost. Once you’ve created your bump map image, you can implement it by simply applying it to the material like below. Also, you’ll need to adjust the scale of your bump map to fit the scale of your model. 05. Use the vertex animator Throughout his site, Johnny utilises a game extension by Jerome Etienne for three.js that makes it easier to do vertex animations. This extension allows easy access to each vertex of a model at the frame rate, making it straightforward to manipulate vertices using waveforms. The Vertex Animation extension is available via Etienne’s GitHub. We’ll go further into how it’s used in the next steps. Users can interact with the 3D model and view from multiple angles06. Start melting Melting a piece of geometry involves a few overall steps. First, each point is continuously pushed downwards. When a point reaches the ground, it’s pushed outwards using what we’ll call a ‘push vector’. Next, we’ll give the points that gather along the bottom a thickness so the melted geometry isn’t completely flat. In order to achieve this, Johnny has ported code from Skeel Lee’s VFX shader in Houdini and modified it. 07. Start moving the vertices downwards Below is an example usage of using the vertex animator to continuously push a model’s geometry towards the ground. This will push points down at the rate defined by the meltAmount. Remember to also call ‘update’ on your vertex animation in the render cycle. 08. Determine the push vector When a point has reached the ground, it needs to be pushed outwards to achieve a melt effect. The code below is determining which direction in the X and Z axes to push the vertex so that you get a uniform displacement. The conditional ensures that only points that have reached the lowest bounds of the model (the ground) are pushed outwards. 09. Make the melt feel natural The code below uses noise to create randomness in the movement so the melt feels organic. The noise variables can be tweaked to get the effect desired. The noise is then applied to the push vector along with meltAmount and spreadAmount to control the rate and size of the melted pool. This outward vector is finally calculated and then applied to the vertex itself. 10. Give the melted pool thickness The code explained so far will achieve the melt effect, but two things are wrong with it. First, the pool will feel quite flat, because all of the points have melted to the same Y position. Secondly, since they all share the same Y, too many points will be stacked at the same height, which can cause flickering. To avoid this, a thickness is applied at the melt rate: 11. Try it out on other models With the code above, any model with enough polygons can be melted. Download a zip file out the code here and swap out the model with anything you’d like. Have fun! This article originally appeared in Web Designer issue 265. Buy it here. Related articles: Create interactive 3D visuals with three.js The best colour tools for web designers Beware the cutting edge of web design View the full article

Gone are the days when you needed to spend tens of thousands of pounds to buy a camera that can produce professional-standard images – the quality of affordable digital camera kit is now so high that a purchase of between £500 and £4,000 will be more than enough to make your work sing. But that doesn't make it any easier to choose between the models crowding the digital camera market. A top-of-the-range DSLR may seem like a tempting option, but they're bigger than other models and are so brimming with features that they can seem complicated and intimidating to use. If you’re having to think about menus and settings, you won’t be concentrating on more important aspects of composition and lighting. The best cheap camera around may be more than adequate for your needs, while saving you a couple of thousand quid. But if you don't budget enough, you may miss out on vital functions to your vocation such as 4K video or robust casing. Below you'll see our pick of nine fantastic cameras, including DSLRs, cheap compacts, cameras capable of 4K footage and the best phone camera money can buy. Whatever your need it for, whatever your budget, we're confident you'll find the best digital camera from the rundown below with the best prices – whether you're shopping on Black Friday or not. Quite simply, this is the best camera money can buy right now. A quick look at the Nikon D850's specs will tell you why – 45.4MP full-frame sensor, 153-point AF system, 9fps burst shooting speed. The result is a remarkable DSLR that captures absolutely sensational images. There's one significant setback though... the price tag! That said, if you were planning to buy two cameras – one for stills and one for 4K video shoots – the D850 kills both of those birds with one stone. If your budget stretches this far, you've just found the best digital camera overall to buy! Read our sister site TechRadar's Nikon D850 review Yes, you are reading that correctly: the Canon EOS 5D Mark IV has a monumental 30.4MP sensor. Although a high megapixel count isn't the only measure to go by, it's a good start and this Canon DSLR backs it up with an advanced 61-point AF system and 7fps burst shooting. It can take 4K video and has all the features and outputs you'd expect of a market-leading DSLR, but it's the pure image quality that really strikes a chord. If you need to print out examples of your work, you should have no problems producing richly detailed prints at Super A3, while A2 prints are possible, too. Read TechRadar's Canon EOS 5D Mark IV review It's difficult to quite understand how Nikon can make the delightful D3400 so affordable. It certainly doesn't want for image quality, featuring a 24.2MP sensor with a keen eye for detail and full-HD video recording. It adds bluetooth connectivity to its predecessor (another excellent cheap DSLR, the Nikon D3300) and we particularly admire the way its Guide Mode walks you through the camera's oodles of features. A brilliant camera on a budget. Read TechRadar's Nikon D3400 review We often detect a lot of snobbery around compact cameras. It's often simply because they don't look as stylish as DSLRs. But they're a lot more convenient and easy to cart around – not to mention cheaper – than their chunky brethren. So do consider the fantastic Panasonic ZS100 (called the TZ100 if you're living outside the US), which we think is the best compact camera on the market. It still squeezes in a 1-inch 20.1MP sensor, which equates to image quality that's just as good as many mid-range DSLRs can manage. And, frankly, the electronic viewfinder is a lot easier to use than optical where you need to compose your shots quickly. Read TechRadar's Panasonic Lumix ZS100 review / TZ100 review Users of the Sony Cyber-shot WX220 are never going to win throngs of photography awards, but if you need a handy, affordable snapper that produces better images than your phone, then we think this is the best cheap camera out there. For a camera that's quite affordable, you'll be impressed by the 18.2MP sensor, 10x optical zoom and 25-250mm lens. Images are bright and punchy, with decent detail – ideal for sharing online or printing at typical sizes – while it's nice to see Wi-Fi connectivity included as well. Read Techradar's Sony Cyber-shot WX220 review OK movie-makers: time to start paying attention. The Panasonic Lumix GH5 is the camera you need in your life if you want to shoot 4K film, but can't stretch to a full-on video rig. Let's get geeky: the GH5 allows you to shoot Cinema 4K (4096 x 2160) at 60p with a bit rate of 150Mbps with colour subsampling at 4:2:2 and a colour depth of 10-bit – that means beautifully rich graduations and colour information on screen. And because the camera uses the entire width of the chip, framing won't be cropped when you come to upload your footage. The video spec on the GH5 is comprehensive to say the least! Read TechRadar's Panasonic Lumix GH5 review Like the sound of the GH5 but can't stretch to that budget? Well we recommend that you stick to Panasonic Lumix family, but pick up the much more affordable G85 (named the G80 outside the US) instead. It's jam-packed with much of the latest technology, without the eye-watering price tag. If you know your cameras, then you'll know that the likes of live cropping, zebra patterning and focus peaking are all useful additions to a video camera, while the richly detailed stills it takes will appeal to anybody who wants a capable all-rounder, so don't be too put off by that measly sounding 16Mp sensor. Read TechRadar's Panasonic Lumix G85 review / G80 review The EOS Rebel T7i (known as the EOS 800D outside the US) sits at the top of Canon's entry-level EOS DSLR range. It's the ideal purchase if you want an affordable camera that's still got enough features to throw you in to photography. For starters, you can have confidence in the mighty 24.2MP sensor, which is ably supported by excellent autofocus with a 45-point arrangement. The real boon for beginners is the splendidly designed graphical interface that makes navigating the Rebel T7i and making the most of its bountiful features a doddle. It won't take long before you're snapping like a pro! Read TechRadar's Canon EOS Rebel T7i review / Canon EOS 800D review If you're in the market for a new phone and need a handset that's great for instantly sharing your work and videos, then make sure you consider the new Google Pixel 2. An excellent mobile in its own right, it's also just taken the crown of the best camera smartphone you can buy. The 12.2Mp camera is the best part of the Pixel 2 experience. Images are consistently in focus and true-to-life while still looking vibrant, whether that's in normal conditions or in dim light. We love the portrait mode and the 240fps slow motion mode is a nice touch, too. This is currently the best in class camera phone. Read TechRadar's Google Pixel 2 review View the full article

When I received my first tarot deck, I was enchanted by the beautiful artwork and the stories that accompanied every card. It became a source of inspiration for me, and I started creating my own deck: the Blood Moon Tarot. The concept attached to each card is an integral part of the tarot. I find that many decks stick close to the imagery found in the familiar Waite-Smith Tarot, but for my own deck I wanted to explore the meaning of each card, relate the meaning to my own experiences, and then use my experience to create my own symbols and a unique view of the card. 18 watercolour techniques every artist should knowFor this workshop I'll be painting The Emperor. I'll walk you through the steps I take to create the card art. Tarot decks can vary in size; for my own I chose to stick with typical tarot card dimensions – about 3x5 inches. Though I primarily work in watercolour, you'll see that sometimes I incorporate acryla-gouache, ink and crayons. Each card is a new problem to solve, and by staying open to a variety of solutions I've discovered new mediums and painting techniques during the creation of the deck. 01. Decide on the concept Brainstorm some ideas and come up with some concept sketchesEach tarot card has a specific meaning, so my first step is to research interpretations of the card, brainstorm my own ideas and connections to the concept, and create thumbnail sketches. For the Emperor I ended up relating my personal ideas of foundation and protection to oak trees in the forest. He's a solid oak tree growing in the forest: difficult to sway, impossible to move, but a fortress for thousands of creatures that he shelters with strong limbs and tough bark. Each year when autumn turns he lays plans for other leafy strongholds and tucks them away beneath the shells of many acorns. 02. Start with pencil drawing Experiment with your sketches until it starts to feel rightDrawing is a chaotic process for me. I like to keep my sketches messy and loose at first because it gives me a chance to find visual solutions that I may not have initially thought of. I begin with a pencil sketch, which I draw over digitally, then print out and draw over with layers of vellum until I'm satisfied. 03. Prepare value and colour studies Value and colour studies save you having to correct mistakes laterI work primarily in watercolour. Because it's a difficult medium to correct mistakes in, I prepare with colour and value studies. Studies will help me decide on a colour palette, and I can reference my studies during the painting process so I don't deviate too far from my planned intentions for the image. 04. Transfer the drawing Scan your final drawing, print it out then go over the linesWhen I'm ready to start painting, I scan the final drawing and print it out on hotpress watercolour paper. Before I do anything else, I go over the printed linework with pencil, adding more weight to important lines and insuring the image will remain if the printer ink fades. 05. Stretch your watercolour paper Soak the paper and stick it to your boardI soak the paper with water and adhere it to a board using Kraft paper tape, which has water-activated glue on one side of it. I leave space around the drawing because I'll have to cut that tape off later. When the paper is dry I put painter's tape around the drawing, so the illustration will have clean edges. 06. Choose two colours for the underpainting Underpaint the parts of your page that will be darkerNow that the paper is stretched, I thoroughly wet it and chose one or two colours for the underpainting. These first washes are very light and I use them to tone down the white of the page in areas that will have a darker overall value. In lighter areas, such as the buildings and acorn, I keep the paper's white. 07. Make use of liquid frisket Mask out the white areas with liquid frisketOccasionally I use masking fluid when I have a lot of small areas where I want to retain the white of the paper. I make sure the paper is dry before I do this, and I use a tool that will enable me to cover the little details with the fluid. 08. Work wet on wet Spray water on your damp paint to create interesting texturesBefore starting my washes, I wet the paper again. I add many loose layers of paint with a wet brush (wet on wet technique) and I create interesting texture by spraying the damp paint with water. In this step the trees and the leaves start to take shape, but I don't get too detailed. 09. Tackle the details Use a wet brush on dry paper to paint in the detailsHere I use a wet brush on dry paper, layering transparent washes. I add detail to the buildings in the city, the trees and leaves, the Emperor's face and the brooch. I don't go into fine details just yet, but I get it to a point where I feel like the linework needs to be defined. 10. Remove the frisket Wait until your paint's dry before you remove the frisketAgain I wait for the paint to dry completely. I then use an eraser to gently remove the frisket. I don't like to use my fingers to peel it off because I don't want to rub dirt or oils from my hands onto the paper, and it's easier to remove the small spots with an eraser. 11. Ink the lines Ink in the lines if you feel they're getting lostWhen I feel like the linework is getting lost I make a half-and-half mix of sepia and black waterproof ink. I use a very small brush to darken the lines, especially on the face, hands and other delicate details. If I want my lines to be even darker, I'll add more black ink to the mixture. 12. Dry brush details With a dry brush technique you can bring some energy to your paintingFrom here I add energetic lines with my smallest brush using a dry brush technique, which I like because it feels similar to drawing. I add lines around the roots of the city and the acorn – I want it to feel like there's light and life flowing around that area, while other areas in the painting are more stable and still. 13. Add acryla-gouache highlights Add highlights with acryla-gouache and a jelly roll penI use acryla-gouache and a jelly roll pen to bring in highlights on the skin, city and acorn. I also flick the brush to create a small splatter effect with the paint. This looks like dust in the light, and I use the jelly roll pen to make smaller white speckles as well – closer to the acorn and window light. 14. Take a break Step away from your work for a bit so you can come back and see what needs fixingI take a break from the painting and give my eyes a rest. When I return it's easier to spot where adjustments are needed. Acryla-gouache is my go-to for fixing anything that I can't fix with watercolour. I also add light texture by gently using a water-soluble crayon so that it catches on the tooth of the paper. 15. Finish with digital tweaks And you're done!When I'm finished the painting, I remove the white tape and cut away the brown tape with a pair of scissors. To avoid any noise and make it easier to digitally remove dust, I scan the painting at 1,200dpi and make very small adjustments to the colour and value, resize the image, and then I'm done. This article originally appeared in ImagineFX issue 151; buy it here! Related articles: 14 wet-in-wet watercolour painting techniques How to paint magical glowing runes Choose the right paper for your watercolour painting View the full article

We’re excited this month by the announcement of InVision Studio – a screen design tool done the InVision way – which you can sign up to access ahead of general release. Also important is the Web Share API in Chrome 61, Rachel Andrew’s new book, and a new version of Sublime Text. Read on to find out more about these, as well as the usual roundup of useful things to make your life easier. 01. The New CSS Layout Expert advice from web pro Rachel AndrewThis new book by Rachel Andrew is a treat; she's an invited expert to the CSS Working Group, so when you learn from her you can be sure you're getting the best information. A great way to get your head around Grid if you haven't done so already (read her guide to CSS Grid basics). 02. InVision Studio We can't wait to get a look at this new design environmentInVision has built a screen design tool! But it's more than that; it's a 'unified digital product design environment', designed to enable your team to collaborate more effectively. There's a special layout engine to make your designs responsive, an open platform so that users can create add-ons, and much more. It's not out yet, but you can sign up for early access on the site. 03. The Web Share API Mark Muskardin's post demonstrates what the Web Share API can doThe Web Share API is now working in Chrome 61 for Android, which means you can invoke the native sharing capabilities that would previously only be available in native applications. So your users can send something to Dropbox, Slack, Facebook or via email with a couple of taps, instead of having to use copy and paste. This is cool and important because it means we're seeing better integration between the web and mobile devices. Mark Muskardin has a good write up here. 04. Pageclip Make an HTML form the easy way with PageclipPageclip is a server for your HTML forms; use it to place a hosted form anywhere you can put an HTML form or run JavaScript. Results can be received via CSV, email or JSON, and for a single form with up to 1000 submissions, it's free. Use it to capture emails for a newsletter, collect leads for a new product, or setup a contact form for visitors to your site. 05. Essential Image Optimisation Get the low-down on image optimisation from Addy OsmaniIf you can't be bothered to read a whole ebook on this topic, the author, Addy Osmani, has prepared a handy TL;DR to save you time. It states that we should all be compressing our images efficiently, that compression should be automated, and outlines some of the best tools for the job. This is good advice. The ebook itself is concise and interesting – you'll find out how to reduce page bloat and increase conversions with fast-loading, sharp-looking images. For more advice, take a look at our 10 ways to optimise images for better performance. 06. The Startup Way Business advice from Eris RiesThis new book by the author of The Lean Startup is about how any company – even large, established ones – can use the entrepreneurial principles of a startup to improve efficiency, drive growth and modernise. Author Eric outlines a comprehensive framework for entrepreneurial management that business owners can use to drive sustained growth in today's uncertain climate. There are also case studies, insights and tools to help you on your way. 07. URL to PDF Microservice API Convert the target of any URL to a PDFThis API converts any HTML content into PDFs, and you can set it to operate automatically at regular intervals. It's easily deployed to Heroku and has features that even most of the paid-for options lack. 08. doitlive Take the pain out of live presentations in the terminalThis is clever: doitlive is a tool for when you have to do live presentations in the terminal. Typing commands in front of an audience is tricky, and you don't actually want to execute them. doitlive is a kind of demo environment – it reads commands from a file that you've prepared in advance and plays them out in a fake terminal. To make this happen, you just type random characters so it seems like you're live coding! 09. Sublime Text 3.0 Sublime Text is now even more sublimeThe new version of Sublime Text came out this month, and the team have made everything even better. There's a new syntax highlighting engine, automatic indentation is improved, there's a new user interface theme and the whole thing runs faster. There are so many little improvements and together they add up to a faster, smarter way of working. 10. Bubbly-bg Animated bubble backgroundsThis fun and simple tool enables you to create great-looking, configurable, animated backgrounds. A cool little utility that's just 696 bytes gzipped. Related articles: 18 great web design podcasts 12 common JavaScript questions answered Create interactive 3D visuals with three.js View the full article

There's a reason people of all skill levels love WordPress. The platform is malleable and easy to customise – you just need to have the right tools to make your site look good. Give your site the professional look it deserves with a lifetime subscription to Theme Junkie. You can get unlimited access on sale for just $24.99 (approx £19). When you're building your website, you won't find a better platform for it than WordPress. No matter what you want to do with your site, you can make it happen with the help of themes designed by the experts at Theme Junkie. Grab a lifetime subscription and You'll find more than 50 beautifully crafted and totally responsive WordPress themes – with more being added all the time. Get highly optimised themes that can be customised to your heart's content. You can get a lifetime subscription to Theme Junkie’s stash of incredible WordPress themes on sale for only $24.99 (approx £19). That's a savings of 74% off for a lifetime of access to themes that will make your website stand out, so grab this deal today! About Creative Bloq deals 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. 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 or Offer tag page. Plus, you can get in touch with any feedback at:deals@creativebloq.com. Related articles: 25 brilliant WordPress tutorials 10 great WordPress plugins for designers 22 great examples of WordPress websites View the full article