A Brief History of Type

mesopotamia tablet

Text is never simply text—typography, or the way type is arranged on a layout, has a huge influence over the visual impact of a message, setting the tone and mood for the reader. Type design has a long and fascinating history, and the digital fonts we use today often have incredible origin stories. 

Here we’ll explore a brief history of type and typography, starting with the early serifs engraved on the monuments of Ancient Rome, learning a little about the printing press revolution of the Middle Ages, and looking at the huge impact of 20th Century Modernism and the digital age on typography as we know it today. 

Looking for the perfect font to use in your typography project? You’re sure to find something to fit the bill from the huge range on GraphicRiver or Envato Elements

Typography Before ‘Typography’

Typography is the term used to describe how type is arranged on a layout. For most designers now, this refers to how type is formatted for displaying on a page, product (e.g. packaging), signage, or website. 

Typography as we know it only really came into being with the invention of the printing press (see below), but it actually has deeper origins. Many of the fonts you will see used widely today evolved from much earlier type designs. 

In second century BC Mesopotamia, punches and dies were used to stamp letterforms or glyphs onto seals, which makes it a very early form of printing. There is also evidence that similar ‘printing’ techniques were used in Babylon, Crete, and Ancient Greece. 

mesopotamia early writing
Mesopotamia provides some of the earliest evidence of ‘movable type’, with punches and dies being used to inscribe seals, currency and tablets.

Many of the serif fonts we use now can also trace their roots back to Ancient Roman capital lettering, which was used to inscribe monuments and municipal buildings. Trajan Pro and Times New Roman are two examples of typefaces which owe much of their design heritage to these early Roman type styles.

Gutenberg’s Blackletter Revolution

By the 12th century in Europe, hand-lettering had developed into an incredibly beautiful art form, practiced by monks who created illuminated manuscripts covered in ornate lettering designs. The style of type which was perfected by the monks is now known as blackletter—a Gothic calligraphy script.   

You can check out some beautiful contemporary examples of Gothic fonts in this article:

The downside of this hand-lettering technique was that it was also time-consuming and costly, which made it accessible only to a limited group of people. 

For many type enthusiasts, typography only really came into being with the invention of the printing press. In Germany, a blacksmith named Johannes Gutenberg created a machine that could process movable type, allowing a large number of sheets to be printed using ink and dies. Mimicking the blackletter type style used in hand-lettered manuscripts, Gutenberg developed the first ever typeface: Blackletter

helmswald post
Helmswald Post is a contemporary font inspired by the Blackletter typefaces developed by Gutenberg.

For the first time ever, typography had the potential to be accessible to the masses. Pamphlets and flyers could be reproduced quickly and inexpensively, though it would still take many centuries for books to become a commodity that ordinary people could afford. 

“Flippin’ eck, this Blackletter’s hard to read!”

The sheer blackness of Blackletter never made it the easiest typeface to read, so it was a breath of fresh air when Roman type styles became popularised in the 15th and 16th centuries. 

In 1470 in Venice, Nicolas Jenson designed a highly legible typeface inspired by Ancient Roman type styles. Jenson is one of the earliest Old Style typefaces, which are defined by low contrast between thick and thin strokes. 

jenson
Adobe Jenson is a contemporary refinement of the typeface designed by Nicolas Jenson in the 15th century.

Old Style Roman typefaces are readable and aesthetically pleasing, which led to them becoming the defining typeface style used throughout this period. 

While this renewed legibility was welcome, typesetters were also starting to explore ways of saving space on layouts. Books and other print materials were still not very cheap to produce, so designers focussed on compressing tracking (space between characters) and leading (space between lines). This need for space-saving also led to the development of italic weights. 

While typographers mostly use italics today to create hierarchy and difference in their typesetting, Renaissance-era typographers used slanted type styles to make the most of the limited space they had available.

You Old Romantic: 18th Century Serifs

Roman typefaces remained enduringly popular for a few centuries, and it wasn’t until the 18th Century that some of the most influential type designers quietly revolutionised the serif as we now know it today. 

This was the era of the humanist serifs. It all began with William Caslon, a London-based type designer, who created a more refined version of the Old Style serifs first developed by Jenson some centuries before. Caslon is a romantic and undeniably beautiful typeface, which makes all printed documents of this period appear exceptionally elegant. 

A couple of decades later, in the 1750s, another English type designer, John Baskerville, created what is now known as the first Transitional typeface. Compared to Old Style Caslon, Baskerville is recognised for its thinner serifs and moderately higher contrast between thick and thin strokes. It has a more formal, sombre appearance than Caslon, and remains one of the most popular typefaces for typesetting books today. 

The tide of typographic change was coming thick and fast during the 18th Century, during the Age of Enlightenment. In France, the Didot family designed one of the first Modern serifs, which are defined by very thin serifs and a very high contrast between thick and thin strokes. 

didot

In a similar vein, the Italian typographer Giambattista Bodoni developed typefaces that can also be classified as some of the earliest Modern typefaces. 

Didot and Bodoni are commonly used in luxury advertising and magazine design today, as they are considered to be exceptionally beautiful and chic type styles. 

A Typographic ‘Blip’: The Industrial Revolution 

After all the sophisticated developments in typography during the 18th century, the 19th century was bound to be a little disappointing. This was the era of the Industrial Revolution, and while incredible progress was made in mechanical and industrial fields, typography suffered from a cluttered approach during this time. 

Type was condensed or stretched to fit onto advertising materials like posters and newspapers. An eclectic mix of styles was used to fit every available space, which resulted in an eccentric look that ranged from circus-inspired styling to the letterpress-influenced ‘vintage’ styles popular with hip coffee bars today. 

lawless
Many modern ‘vintage’ fonts, like Lawless, take inspiration from the Industrial Revolution period.

The upside of all this typographic freedom during the 19th century was the development of slab serif, or Egyptian, typefaces. These were punchier, bolder incarnations of existing serif styles, and they still give a lovely antiquated feel to titles in contemporary design. 

Thank Goodness, the Modernists Are Here

After all the clutter of the Industrial period, typography was badly in need of a refresh. Luckily, there were some very forward-thinking chaps who did just that. 

William Caslon (of Caslon fame, see above) had a great-grandson, William Caslon IV, who controversially removed the serifs from one of his traditional typefaces in the early 19th century. The style was too ahead of its time and didn’t take off, and it would be another century before the world was ready for the palette-cleansing simplicity of the sans serif.

The best-known early sans serif is Futura, which was created by German typographer Paul Renner in 1927. Renner was inspired by simple geometric shapes, which gives Futura and its relations their group name—the Geometric Sans typefaces. 

miles sans
Geometric Sans typefaces have an enduring appeal. Miles Sans is a more rounded, friendly interpretation of the style.

At the same time over in England, Eric Gill was approaching the new Modernist mood from a different perspective. He created Gill Sans, which introduced more natural curves and organic forms to the sans serif template. This and other related typefaces are now known as Humanist Sans typefaces. 

gill sans

A few decades later, in the late1950s in Switzerland, another sans serif evolutionary step was made. The Swiss Style, as practiced by a group of designers in the country, was characterised by functional and ultra-legible type design. Helvetica was the star product of this modernist experiment, and it soon came to be used across signage and print design the world over. 

The Influence of the Digital Age

Modernist sans serifs really broke tradition with all the typographic developments that had come before. But there was one final development that would extend the reach of both serifs and sans serifs, as well as typographic formatting, to an as yet unimaginably large audience. 

With the invention of computers in the 20th century, fonts—digital versions of typefaces—became the new currency in typography. Despite the exciting possibilities the digital revolution could hold for type, typography as a discipline seemed for a short while a little out of place. With the limitations of screen technology, many fonts were rendered as primitive Pixel Type, and pixel-inspired styles became the trend-leading typefaces for print design too. 

old computer

As computer technology evolved, the field of typography gradually opened up, making more sophisticated fonts available to all computer users. The downside of this was the overuse of ‘bad’ fonts (*cough*, Comic Sans) by every Tom, Dick and Harry. 

The upside was actually the most revolutionary development in typography, ever—that typeface development could no longer only be accomplished by specialists; but instead anybody with access to vector design software had the potential to design their own fonts. 

Conclusion: From Mesopotamia to Microsoft… and Everything In-Between

Humans have always sought out new and creative ways to communicate with others, and typography is the most visually arresting way that this has been done. 

As we’ve explored here, typography didn’t simply begin with the invention of the printing press, but has a much deeper history, much of which archaeologists and historians are still only just bringing to light. 

Typography’s evolution also won’t stall with the digital age, but in fact has more potential than ever to develop and win over new legions of type enthusiasts.

If this brief history of type has whetted your appetite for more typography-related content, you’re in luck! Check out the tutorials below, which will focus on honing your type skills. 

You can also find the perfect font for your next project over on GraphicRiver or Envato Elements

Source: psd tuts

‘Game Of Thrones’ Is Like A Live-Action ‘Shrek’ & These Screenshots Prove It



Left image via IMDB, right image via HBO

A Game of Thrones fan has noticed similarities between the characters in the show to those from Shrek.

Twitter user @ohmytargaryen has proven to the internet that GoT “is basically… Shrek live-action” by sharing images of various scenes and characters from DreamWorks’ animated franchise against the finale of GoT.

Screenshots of both shows were placed side by side, making apparent the similarities between both animated and live-action characters from their costume designs to appearances.

‘Jamie Lannister’ from GoT looks like ‘Prince Charming’ from Shrek, while ‘Sansa Stark’ and ‘Tyrion Lannister’ boast similar facial expressions with ‘Princess Fiona’ and ‘Lord Farquaad’.

Additionally, ‘Lord Farquaad’ and ‘Tyrion’ are both dwarfs, and both don outfits with exaggerated sleeves. ‘Princess Fiona’ and ‘Sansa’ wear light-colored dresses and bear similar skin tones; ‘Cersei Lannister’ too draws similarities with the ‘Fairy Godmother’ from Shrek.

Other Twitter users have chimed in with their takes on the mirroring characters, with one implying that GoT character ‘Podrick Payne’ looks like ‘Shrek’ when he transforms into a human. Another compares ‘Arya Stark’ with ‘Puss in Boots’.

The tweet has gone viral ever since, raking in over 140,000 likes since time of publishing. Check out some amusing similarities below.

So basically Game of Thrones is a Shrek live action pic.twitter.com/BSk1DRFhjc

— Stark (@ohmytargaryen) April 20, 2019

I'm not kidding. This is real pic.twitter.com/n4CFRozRBD

— Stark (@ohmytargaryen) April 21, 2019

Im- pic.twitter.com/nDaNDdDb00

— farah stark⚔️ (@tiredmeleis) April 21, 2019

Podrick and human Shrek tho pic.twitter.com/KukoE6QsIK

— Christine Le (@christineeeele) April 22, 2019

pic.twitter.com/MXzSQkIeTK

— marta (@martinagaray) April 21, 2019

[via Pretty 52, opening image via IMDB, HBO]
Source: design taxi

garage italia announces e-icon project turning vintage autos into electric cars

the company wants to bring back iconic car spirit, revealing its first refurbished model – a classic fiat 500.

The post garage italia announces e-icon project turning vintage autos into electric cars appeared first on designboom | architecture & design magazine.

Source: designboom

Demystifying JAMstack: An Interview With Phil Hawskworth

Demystifying JAMstack: An Interview With Phil Hawskworth

Demystifying JAMstack: An Interview With Phil Hawskworth

Vitaly Friedman

2019-05-27T13:00:59+02:00
2019-05-27T11:35:56+00:00

Some of you might have heard of JAMstack, and perhaps even about how to switch from WordPress to Hugo, but is JAMstack a viable option for any kind of project?

I spoke with Phil Hawksworth, a front-end engineer who (after 9 years of working at agencies has returned to working on a standalone product) is now focusing on developing strategies for JAMstack technologies to make building for the web simpler, faster, and more secure. Phil will also be co-hosting JAM_stack ldn, a conference dedicated to static site generators, serverless and JAMstack in London, on July 9–10.

Vitaly: So hello and welcome to one of our conversations with our speakers at Smashing Conf and generally nice people. You might remember those times when FTP was a big thing and maybe actually you’re still deploying why FTP is a perfectly safe space so you don’t have to worry about that. But changes are high that you’re not using FTP anymore and instead move to Git based workflows, and probably continuous deployment. All this fancy whistles and bells. And so today I’m very happy to welcome Phil Hawksworth who is actually working at Netlify, Developer relationships [inaudible 00:10:00]. Hello Phil. How are you doing today?

Phil: I’m great, how are you doing Vitaly? It’s nice to see you.

Vitaly: Aw, I’m doing great. It’s always pleasure to see you. You’re like a sunshine streaming Netlify and Jump Stack and everything.

Phil: I try. I’m not even branded up, what a missed opportunity.

Vitaly: That’s okay, that’s okay. But you have to tell me, so that gem or jen or jeet, like, jem? Is it jem?

Phil: Jam. It’s jam. It’s all about the jam.

Vitaly: It’s all jam. So the JAMstack. For developers or designers, actually never heard the term before. If you wanted to maybe sum up what it is and why it’s good and what are the benefits of it in the first place. Why would you ever want to move from your traditional, good old stack to JAMstack. Maybe you could sum it up briefly.

Phil: Let me see if I can try because it’s tempting just to say, JAMstack, the JAM stands for Javascript, APIs and mockup. But that in itself doesn’t really explain very much, just knowing what it stands for. So really, JAMstack is all about a way of deploying and serving websites that don’t rely on an origin server, they don’t rely on requests hitting an active server all the time.

Phil: So you might be more familiar with stacks like the LAMP stack which was Linux, Apache, MySQL, and PHP, that was the kind of stack that was serving your site there. With JAMstack, it gets a bit different because we’ve kind of moved up a level, away from the server and closer to the browser so it’s thinking a lot about getting in a browser as fast as possible and then using technologies in the browser to enhance and augment it later on. So JAMstack is all about pre-rendering sites, getting it into the browser, and then maybe enhancing it, augmenting it, the experience with Javascript running in your browser, maybe making requests to APIs and that kind of thing.

Phil: So that’s the model, trying to get away from having a server that you need to maintain because I know maintaining a server is difficult. I don’t know about you but I’ve got lots of sites that kind of went away when I just turned my back on them for a few years. I needed to upgrade PHP which meant I needed to upgrade the version of Linux which I’ve done once in a blue moon. So maintaining servers is difficult so the idea of the JAMstack is to try and make it as simple as possible to serve sites as static assets and then make the most out of all the APIs and inabilities in the browser to do augmentation and do more things with them there.

Vitaly: Right, makes sense. Well, in fact, we moved to JAMstack 2 years ago or so now.

Phil: Two years?

Vitaly: Yeah, it was quite a journey for us. And of course, we learned a few lessons along the way. But I’m wondering, would you say that essentially every project could benefit somehow from moving or moving some parts of it to JAMstack or like, where do you see its limitations? Is it something that potentially every developer could use in a project or is it something that’s kind of dedicated to a particular group of websites or a group of projects?

Phil: Yeah, I mean, it’s tempting to say, oh yeah, you can use it for everything but I think you should be careful saying that about any technology. You know, you really need to kind of pick the use cases and make sure it’s tailored well. I would say the first instinct when you think about a JAMstack site and maybe think about something which is served as static assets, maybe directly from a CDN. You might think, well that’s only good for sites that don’t change very often, they’re quote on quote, static, they don’t change. But in actual fact, that’s not really the case because so many tools exists now that can reduce the friction in deploying things.

Phil: You can deploy many many times a day, or many times an hour if you want and actually make things feel a lot more dynamic than they might have done before. So some of those use cases where you think they wouldn’t be appropriate; those actually come into the fold as well. The time that it gets challenging, perhaps though, is when we’re creating sites that have many many pages, many hundreds of thousands or many millions of pages because the JAMstack model really makes a lot of sense when you can pre-generate your site so you might be using a static site generator. Those have really in vogue at the moment; those are really really popular.

Phil: But of course, they have to do a piece of work every time they deploy an update so if you have a site, maybe like a newspaper site, that has many millions of pages, the work that is required to re-generate that can be quite, you know, that can take a long time so that’s when you start bumping into some of the limitations of where JAMstack can be, kind of, simply used. You can start to get a bit crafty and start to work around that if, you know, you’re very very crafty but it definitely introduces some challenges.

Phil: One of the things I’m starting to see from a variety of different static site generators like Gatsby for instance or React Static, and also Hugo. The teams behind those static site generators are starting to explore ways that you can do progressive generation of the pages so in other words, you don’t re-deploy the entire site or regenerate the entire site every time something changes but try and find ways to do incremental builds. It’s kind of a challenging problem to overcome but there’s work being done on that at the moment so that will help to try and break down that barrier as well. But, certainly at the moment, finding ways to use a JAMstack site for a website that has many millions of pages or many hundreds of thousands of pages, that’s where it can be a little bit challenging right now.

Vitaly: Oh, that’s interesting. So actually the idea of being then to serve a div of the state that you have and essentially that whatever you have to build, like a new portal has to be kind of paged into it so it’s interesting to see this happening. Because you also, just recently, I think two weeks ago, there was an article by Jason Pamental coming up where the idea was actually very similar where you would actually load the fonts, and then you load the first page that you need and then you load the second and then you actually merge them in a way to create a new font, like also incremental font loading.

Phil: Interesting.

Vitaly: That would be really interesting to explore that.

Phil: Yeah, and it’s not just so much of the loading, it’s the generation-

Vitaly: The generation, the build out.

Phil: Yeah, exactly.

Vitaly: I understand. But what do you think are kind of the common challenges that most developers have? Well, I mean, let me move back first. If you have never worked on JAMstack before and you are very much comfortable and happy with your LAMP stack and you wanted to maybe explore the possibility and advantages like security and performance of JAMstack. How would you actually start? What would you move, what does it mean to workflow change?

Phil: So, the changes to the workflow can actually be quite profound because you are taking away a lot of the infrastructure that you’d normally depend on and say actually we can do away with that and start deploying things directly to a CDN. But in terms of how someone might get started experimenting with this, chances are they might be using some of the aspects of this already. You know, even on kind of traditional ways of building things for the web.

Phil: If you think about how you might build something on the LAMP stack, chances are in your PHP there, you’re doing things like writing a template that grabs data from a data source, in this case, the MySQL database or some kind of database, rendering those things into view and then getting them served. And that’s kind of similar to how static site generators work. They have templates, they grab data from somewhere that might be kind of structured data in files or it might be hitting some kind of database or a content API. Either way, it’s grabbing data, combining that data with templates, generating views and the only difference is that it’s not doing that on demand, it’s doing that ahead of time. So, some of the logical steps in that kind of cognitive steps for a developer might not actually be that huge.

Phil: The biggest change is in thinking about how you deploy things. Because really what you’re deploying is your built, rendered assets entirety every time you want to do a deployment. That starts to bring things like the management of the content and the management of the code all into the same place so that things like the vision control across all of those things together. So it starts to be a slightly different way of thinking about how you might develop and manage sites and the content within it. So there are a few changes there. But the nice thing is, a lot of static site generators can be quite straight forward to start experimenting with and the nice thing is you don’t need a ton of infrastructure to do this. So the nice thing is that you can really start to build things out right on your local machine. You’re running a static site generator right on your machine and you can get a really good sense of what the outcome is going to be without needing to lean on lots of other infrastructure.

Phil: So that kind of first step, the on ramp, can be quite shallow for you to start to say, “well, I’ll try this particular set of tools. I can run them locally.” And you’ll have good confidence that when you deploy the output of that somewhere, that will be exactly the same where you deploy it as it would be locally. That’s one of the things that I love about rendering things that are static because you’re not depending on lots of infrastructure and moving parts to serve them. You can look at them on the static server on your own machine and think, “yeah, this is how it will work when it goes off to a CDN.”

Vitaly: Mm-hmm (affirmative);And also the infrastructure when we look, for example, into the way we build single [inaudible 00:10:07], and there is a huge number of options of what you could do. For the server, for the client, and everything in between.

Phil: Yeah.

Vitaly: And so, I think, in our case because we are kind of building out a skeleton and it’s serving straight through CDI with content and all and enhance with Javascript. It was actually quite reasonable and quite, I wouldn’t say easy but it made sense to move to that kind of set up. Because in the end, it’s just content that leaves on the page. It’s just HTML with a few comment areas and search box and a few other things. But if you’re moving towards really standalone application, maybe even financial application, online banking, this kind of thing. Do you think still that JAMstack would be a good option to consider there if you’re having something that requests a lot of logic? Does it need a server or not?

Phil: Well, I hate to trot out the old phrase, “it depends.” But it kind of does depend a little bit. With that said, there are lots of applications which work just as well being a Javascript application as actually having a service side component to them. I say that with a certain amount of caution because I’m a little bit old school when it comes web development and I really like getting things into the browser as HTML as much as possible and then having a really high watermark from where you progressively enhance from. So I don’t personally like doing everything in Javascript and just shipping an empty body tag and then running everything through Javascript.

Phil: With that said, there are sometimes where that’s perfectly acceptable. If you’re thinking about a certain kind of application which, of course, would heavily depend on Javascript and you know your audience. That can be completely reasonably. There are things that have been shipped recently. I’m thinking actually of something that shipped to Google IO for, as an example, the chrome team put together a game which was very heavily Javascript and that worked beautifully served statically. There are plenty of use cases where that can work.

Phil: Going back to your financial example, I used to work, my very first job actually, was putting numbers on screens for traders to trade off using web technologies and this was before web sockets, it was before Ajax, it was before anything really that was useful to help you do that and it’s kind of challenging but more recently, you would do a lot of that kind of thing in Javascript and that makes perfect sense. You can start to make secure requests to APIs right from the browser. There’s plenty of models now for doing authentication and authorization directly from your browser. So in many ways, this can simplify the stack for financial institutions that want to build some of these things out because the way that they can decouple some of these things can make them much more manageable. So I’d certainly think that the JAMstack model could perfectly work in that scenario as well.

Vitaly: Okay, so maybe coming back now to explore that world of JAMstack and front end. What are you most excited about these days, Phil? If you look at JAMstack and front end in general, is it something that’s really keeps you awake at night where you wake up in the morning hoping that yes, I’m going to work on that someday. One day I will get it done. Do you have [crosstalk 00:13:33]

Phil: Yeah, and this is the kind of thing where your answer can be different day by day because it feels like this world moves so quickly. And that in itself is one of the things that excites me so much. Now that we’re starting to see the browser APIs start to really progress and the kinds of things we can do directly in the browser without having to implement them ourselves. That’s kind of exciting to me. I’m still very much a duffer when it comes to SVGs. I should explain the word duffer, if anyone who’s not English and watching this, it means a fool. It means I’m way behind the curve.

Phil: But I find myself really wanting to do more with SVGs and animations are kinds of things I’m just way behind on and I want to play with that. But things like the browser APIs whether that’s things for offline or for improving performance and particularly at the moment the way the font loading seems to be getting more and more accessible so that we can start to really create things that visually are very rich and closer to what we might want to make with typography. I’m a bit of a nerd for that stuff, I like that kind of stuff so I want to play more and more with that.

Vitaly: So Phil, talking about JAMstack conf in London. Can you also explain in a few words like what is it going to be about, what’s the focus and who is it for and what is your role there? Just behind the scenes, taking care of the content and all. What is your role there?

Phil: So I’ve had the fun part of the job. So I’ve had the opportunity to go out and find speakers and find interesting content so I’m really excited about how the programs come together. We’ve got people like Chris Coia who’s going to talk about empowering front end developers and how much we can do with front end technologies now based on this JAMstack model. We’ve got people like Jake Archibald and Surma from the Google Chrome team who are going to talk about things like performance in the front end and ways that we can really drive very performance experiences either with static hosting or infrastructure or code that runs right in the browser.

Phil: We’re also going to have Yuna Kravitz talking about things to do with CSS and Houdini and all of those kinds of things. And much much more besides. We’ll also be talking about things to do with the cultural change that a JAMstack model can have on your organization and on your projects so it really reaches all over the place. So I’m kind of excited about that. I’ll get the chance also to introduce all of these people because they’ve let me go wild and be the MC as well so that means I get to talk to these people and ask a few questions and those kinds of things. So I think it should be very interesting for anyone who is interested in front end development and also new models of delivering projects on the web in a really efficient way.

Vitaly: Oh, so you do like the spotlight on stage, huh?

Phil: I’m an attention seeker. You should know that by now, Vitaly.

Vitaly: Oh, actually I always thought you were very humble and nice and kind person, apparently I was-

Phil: It’s an act, it’s an act.

Vitaly: Okay, that’s fine. Phil, we’ll meet in a few, oh actually, tomorrow.

Phil: I’ll see you soon for another event but otherwise I’ll see you in July, July the ninth and tenth.

Vitaly: [inaudible 00:16:52] So with this in mind, thank you Phil and signing off. Bye bye everyone.

Phil: See you soon.

That’s A Wrap!

We’re looking forward to welcoming Phil at SmashingConf Toronto 2019, with a live session on JAMstack. We’d love to see you there as well!

Please let us know if you find this series of interviews useful, and whom you’d love us to interview, or what topics you’d like us to cover and we’ll get right to it!

Smashing Editorial
(ra, il)

Source: smashing magazine

cube video captures the ocean’s plastic problem and designer’s solutions in ‘living with plastics’

plastic is a super-material but people rely too heavily on it and think too little about its impact. can designers help combat the issue?

The post cube video captures the ocean’s plastic problem and designer’s solutions in ‘living with plastics’ appeared first on designboom | architecture & design magazine.

Source: designboom

How to Create a Living Galaxy Photo Effect in Adobe Photoshop

Final product image
What You’ll Be Creating

Creating stars, galaxies, and nebulas requires a unique set of techniques, and in this tutorial, we are going to be taking a quick look at a slew of different effects, ultimately creating a being made of the stars themselves!

Like nebulas, we are going to be keeping everything very loose and freeform; it’s all about going with the flow with this one! We are going to do a whole lot of playing with different layer modes and experimenting with the flow of shadows and light, seeing what shapes naturally form as we go.

Follow along with us over on our Envato Tuts+ YouTube Channel:

What You’ll Need

To complete this project, we are using the following resources:

Find more resources on Envato Elements!

1. How to Create a Star Field (Optional)

First, we will start by preparing our space environment! For the base, I have supplied a pre-painted nebula-like texture that’s free to use anytime, anywhere, but also want to walk you through how to create a star field, which is the first step to creating many space-themed images. 

Step 1

Create a new portrait style canvas.

Create a Color Fill layer set to a dark blue #0e101f.

Create a New Layer filled with black, setting it to Screen.

Step 2

Go to Filter > Noise > Add Noise.

Noise Settings

  • Amount: 50%
  • Distribution: Gaussian
  • Monochromatic: Checked 

Step 3

Blur the noise with Filter > Blur > Gaussian Blur.

Gaussian Blur Settings

  • Radius: 0.8 px
noise

Step 4

Open up Image > Adjustments > Levels and slide the three toggles around until you get the desired result. There is no one set of settings, but here’s mine:

Levels Settings 

  • Input Levels: 110, 2, and 197

You can also further adjust the stars using Curves. 

stars

Step 5 (Optional)

If you want to create bigger stars, you can paint them in by hand using a hard round Brush, or you can Duplicate your current star layer and then enlarge the duplicate. 

large stars

2. How to Turn a Texture Into a Background

Next, we will be adding our space texture! Unlike with the stars, I sadly do not have a set method on how to paint nebulas and space backgrounds to share with everyone, but I do have a pre-painted texture to share!

Step 1

Download and place the Space Texture onto the canvas. 

background

Step 2

Create a New Layer above the space texture, setting it to Screen. 

Using a large, soft, round Brush, lightly paint reds #563031 and purples #4e3159 all over the canvas, focusing on the lighter areas of the space background. 

Create another New Layer set to Overlay, and repeat the last step but with white!  

light

Step 3

On many different New Layers set to a mixture of Screen and Color Dodge, paint blobs of purples, oranges, and reds across the space background!

Use a large, soft, round Brush with a very low Flow Rate!

Adjust the Opacity of the different layers if needed. 

I only ended up with three layers, but feel free to go crazy adding as much color as you want! Remember you can always come back and adjust these layers later. 

color

Step 4

Finish up the background with Color Balance, Brightness/Contrast and Curves adjustment layers.

Color Balance Settings 

  • Red: +20
  • Green: +8
  • Blue: +18

Brightness/Contrast Settings

  • Brightness: 58
  • Contrast: 39
  • Blend If: 
settings

Double-click a layer to access the Blend If settings. Hold Alt to separate and move the toggles independently.

Curves Settings 

settings

Group everything, naming the group “Background.”

final

3. How to Create a Vivid Color Grade

All of the layers coming up should be in a group marked “CC” or “Color Correction,” and placed on top; all current and future layers will be placed below this group!

The layers are listed from bottom to top. 

Step 1

Create a Curves adjustment layer. Increase the Red, Green, and Blue curves as well! 

Curves Settings

  • Opacity: 80%
settings
result

Step 2

Create a Color Lookup adjustment layer. 

Color Lookup Settings 

  • 3DLUT: Crisp Warm
  • Opacity: 29%
color lookup

Step 3

Create a second Color Lookup layer. 

Color Lookup Settings 

  • 3DLUT: Fall Colors
  • Layer Mask: Mask on the lower right corner.
color  lookup

Step 4

Create a third Color Lookup layer. 

Color Lookup Settings 

  • 3DLUT: Late Sunset
  • Opacity: 41%
color lookup

Step 5

Create a Selective Color adjustment layer. While you can adjust multiple colors using the same Selective Color layer, I like to dedicate a new selective color layer for each color to give myself more control! 

Selective Color Settings 

  • Colors: Blues
  • Cyan: +40%
  • Magenta: -2%
  • Yellow: +18%
  • Blacks: +27%

Step 6

Create a second Selective Color adjustment layer.

Selective Color Settings 

  • Colors: Reds
  • Cyan: -100%
  • Magenta: +1%
  • Yellow: +41%

Step 7

Create a third Selective Color adjustment layer.

Selective Color Settings 

  • Colors: Magentas
  • Blacks: +100%

Step 8

Create a fourth Selective Color adjustment layer.

Selective Color Settings 

  • Colors: Cyans
  • Cyan: +100%
  • Magenta: -100%
  • Yellow: +100%
  • Blacks: +50%

Group all layers together into a group marked “CC” or “Color Correction” and Lock the group. 

selective color

4. How to Create a Living Galaxy Photo Effect

Now, on to our main event: the man made out of stars! For this, you will have to have a good handle on both layer masks and layer modes.

I highly recommend keeping your groups named and organized in this step as there are quite a few!

Step 1

Download, place and extract our model using your preferred method. Mine is the Pen Tool!

model

Step 2

Create and clip a Gradient Map, Brightness/Contrast and Hue/Saturation adjustment layer into our model.

Gradient Map Settings 

  • Black to White 

Brightness/Contrast Settings 

  • Brightness: -116
  • Contrast: 100

Hue/Saturation Settings

  • Colorize: Checked
  • Hue: 230
  • Saturation: 44
darken model

Step 3

Group the model and his layers, naming the group “face” as this will only be the face of our subject.

Hide the “Face” group for now. 

Step 4

Duplicate the “Model” layer, bringing it outside of the “Face” group. 

Right-Click > Apply Layer Mask if it has a layer mask.

Rename the layer “Shadow Body,” setting it to 60% Opacity.

Fill the layer with black by going to Image > Adjustments > Hue/Saturation 

Hue/saturation settings

  • Lightness: -100
shadow

Step 5

Add a Layer Mask to the “Shadow Body” and mask out the feet and part of the midsection. 

You can also come back and tweak this later!

mask shadow

Step 6 

Turn the “Face” group back on. 

Add a Layer Mask to the “Face” group, filling it with black. 

Mask back in parts of the face and neck. I chose to do this on the left eye and the middle part of the neck, but feel free to experiment!

Remember, again you can come back and tweak this later! 

add face

Step 7

Duplicate the “Face” group, bringing the copy above the original. 

Rename the copied group “Light” and add a Layer Mask.

Change the model inside the “Light” group to Screen.

Reverse the gradient map so that it is White to Black. 

Use a soft round Brush to mask out the model’s shorts, hair, hand, and the left part of the torso. 

add body

Step 8

Create a New Group above your previous groups, naming it “Textures.” 

Create a Selection in the shape of your model by going to the “Shadow Body” layer, holding Control and clicking on the layers icon.  

Once you have a selection, go back to the “Textures” group and add a layer mask. The mask will take the shape of the model. 

Now, every layer you place in this group will be masked as well!

Step 9

Take a copy of the Space Texture and place it in the group, setting it to Color Dodge.

Play with its size and shape until you are happy!

add nebula

Step 10

Download the Nebula – 30 Abstract Design Pack and place texture “27” into the “Textures” group, above the previous texture. 

Set the layer to Color Dodge.  

Adjust the Brightness/Contrast and Hue/Saturation. 

Brightness/Contrast Settings

  • Brightness: -118
  • Contrast: 100

Hue/Saturation 

  • Saturation: -47

Also, mask out any area you think looks too bright or busy!

add texture

Step 11

Repeat the above step with the starlight glowing in the outer space texture, with the texture set to Screen

Place, mask, and adjust it as you see fit. Below are my settings, but I encourage you to experiment!

Brightness/Contrast Settings

  • Brightness: -150
  • Contrast: 100

Hue/Saturation 

  • Hue: -33
  • Saturation: -46
add space

Step 12

Place some stars using the M3 Star Cluster texture in the feet and hands of the model, again using the steps above. 

I set my stars to Lighten, but again feel free to experiment. 

The “Textures” group is now complete!

add stars

Step 13

Repeat step 8, creating a New Group, this time naming it “Body Atmosphere”.

Create a New Layer inside “Body Atmosphere”, setting it to Overlay.

Using a soft round Brush set to black, increase the shadows within our model. 

Create a second New Layer inside of “Body Atmosphere”, this time setting it to Color Dodge.

Paint a bright orange #ff5111 color onto the hands, feet, and left portion of the chest.

add glow

Step 14

Create a New Layer set to Screen, once again making sure it’s in the “Body Atmosphere” group.

Using the same orange as above, paint flowing rivers of light using the Perlin Flow Fields Photoshop Brushes or a soft round brush.

The “Body Atmosphere” group is now complete!

flowing light

Step 15

Repeat step 8 once last time, creating a new group named “Veins.”

Create a New Layer inside the “Veins” group, setting it to Overlay.

Paint lines of light coming from the orange exception on the left side of the chest using a small, soft, round Brush set to white. 

Build the light up slowly, and I encourage you to layer different layers on top of each other! I used three in total. 

veins

Step 16

Create a New Layer inside of the “Veins” group.

Using a very small, 1-2 px hard round Brush, paint white veins coming from the model’s chest and spreading throughout the rest of his body. 

I used a pen tablet for this, so I was able to use Pen Pressure and taper my lines. It also makes it easier to get the jagged line effect. 

If you don’t have a tablet, use a large, soft, round Easer Brush to achieve a similar effect. Paint your line, and then gently erase portions of it. 

You can also try doing long, smooth lines, as I did on the left arm. 

Just experiment and do your best—practice makes perfect! You can also try searching for pre-made vein brushes to help you out.

Once you are happy with your living galaxy, group all of his layers (and groups) together into one big group, naming it “Subject.” 

I also took this time to remove the subject’s left foot by adding a Layer Mask to the group and using the Pen Tool to select and mask it out.  

final

5. How to Create Glowing Eyes in Photoshop

Step 1

Create a New Layer set to Soft Light, placing it below the “Subject” group. 

Using black and white, form the base of the model’s hair. Use and build upon the existing shadows to figure out a good shape. Work with the current lighting, not against it! 

lighting

Step 2

Create a New Layer set to Soft Light and repeat step 1 as many times as you need to, refining the shape more and more. 

Remember, keep your brush to a low Flow Rate to slowly build up shadows, and use as many layers as you need!

Group your layers, naming the group “Hair.”

lighting

Step 3

Create a New Layer, keeping it set to Normal and placing it above the subject. 

Use a hard, round brush to paint three eyes onto the subject’s face—one on each eye and one on his forehead. 

Increase the brightness of the eyes with an Overlay layer if needed. 

eyes

Step 4

Below the eyes and their light, create a New Layer set to Screen.

Paint bright orange #ff7441 smoke coming from the eyes. 

Paint some orange glow as well! Again, use as many layers as you need to get the perfect glow. 

Group all of the eye layers, naming the group “Eyes.”

final

6. How to Add Depth and Detail in Photoshop 

Step 1

Drag and drop another M3 Star Cluster texture above the “Eyes” group, setting it to Screen.

Hit it twice with two Brightness/Contrast image adjustments, using the same settings. 

Brightness/Contrast Settings

  • Brightness: -32
  • Contrast: 100

Add a Layer Mask and mask out any hard edges or unwanted stars. 

stars

Step 2

Take a copy of the Space Texture, setting it to Screen. 

Place the lightest part of the texture over the midsection of the subject. 

Adjust the size and shape as needed, and Mask Out any hard edges and excess texture!

nebula

Step 3

Duplicate the above Space Texture and set it to Lighten. 

Enlarge it significantly and place it in the lower right corner of the canvas. 

Add a Filter > Blur > Gaussian Blur to the texture. The settings will depend on the size of our canvas, so just blur it to your liking!

final

7. How to Add Light, Shadows and Glow in Photoshop

To finish everything up and pull it all together, we are going to add some final touches of light and color, as well as shadows!

Step 1

Using a mixture of Multiply, Overlay, and Soft Light layers, increase the shadows and highlights. 

Use a soft, round brush with a low Flow rate as always when building up light and shadows!

Use as many layers as you see fit, and don’t forget about experimenting with Blend If!

lighting

Step 2

Finally, using a mixture of Screen and Overlay layers, paint areas of bright colored light as well as enhancing the colors that are already present. 

Color pick existing colors such as oranges, blues, and greens! Adjust the Opacity of the layer as needed, and don’t be afraid to go in with very large brushes and eraser brushes. 

final

We’ve Done It!

And there you have it! Some quick space-inspired techniques you can apply to your future works, and remember these are just the jumping-off point! Space is limitless, after all!

So, as always, keep experimenting with different techniques and practicing, and don’t forget to post your version below, along with any questions, comments, or critiques!

conclusion

Looking to learn more? Why not check out the following photo manipulation tutorials:

Source: psd tuts

20 Freshest Web Designs, May 2019

Welcome to our monthly roundup of the freshest web designs, released (or rereleased with significant updates) in the last four weeks.

This month’s selection eschews popular trends in favor of intelligent design that supports brand identity. As always, scrolling plays a big role, but parallax is less dominant than it normally is. Across the board, designers are opting for the less obvious choice, which gives us a rich variety to indulge in. Enjoy!

Playdate

The gaming world is awash with excitement over Playdate, a handheld gaming system due to launch in early 2020. This site does a wonderful job of focusing on the single CTA, and the copy does an awesome job of being exited about the product.

Studio Brave

It’s always a brave decision to open your site with fullscreen video, but in this case it works well—mainly because the work on show is of such a high caliber. Normally custom cursors are a turn off, but this one is fabulous.

40075

40075 is an interactive experience designed to help you discover exciting musical artists from around the globe. Artists profiled include Songhoy Blues, and Gily Yalo. It’s a great way to uncover music you might not have heard yet.

Plein

The site for Plein exudes simplicity, cleanliness, and wellbeing. Selling an innovative range of vitamin films that offer everything from alertness, to an improved immune system, the site is an excellent way to sell an intangible product.

Under

I’ve always been a sucker for a clever logotype, and the mark for Under, the Norwegian underwater restaurant, is one of the best. The site itself exudes the quality of Scandinavian design, proving that it’s simplicity that sells luxury.

Oas

The website for self-proclaimed “Swedish Resort Brand” Oas, does an incredible job of telling the brand’s story, helping it to stand out in a saturated market as one of the labels to watch. Nothing says vacation like palm tree print flip-flops.

Contrast Visuals

Contrast Visuals’ site takes a minimal approach to presenting its portfolio. There’s the simple menu toggling between “work” and “info”, and a native scroll through a very impressive client list of video and film work. Plus I love the animated logo.

Usual

Remember when we all laughed at the idea of brutalism being a thing? Welcome to Usual, a new approach to drinking wine that allows you to purchase single-glass sized bottles via an unusually modernist site for a luxury item.

Sonos

There’s a certain aesthetic, championed by Apple Music, Spotify, and others, that Sonos captures perfectly with its site. When you’re not a leading player in a market, perfecting an established style and making it your own is a superb tactic.

Type By

What designer doesn’t love a type-only site. It’s particularly easy when you’re a type foundry, but you still have to keep users engaged. This site for Type By, works entirely on tap and scroll, but there is something about it that is very compelling.

Golden Hum

Golden Hum is an LA-based sound design agency. Their site is a little difficult to navigate, but keep at it and you’ll be rewarded with some exquisite soundscapes all backed up with some incredible visuals.

PLN Group

The marketing of the PLN Group is a little too PR-speak for many people’s tastes, but there’s a great sense of style about their site, which manages to be both young and interesting, while still mirroring the corporate culture they’re pitching to.

Freakshow Maskerade

There seems to be a trend among newer wines to reject the luxury label and embrace the kind of marketing normally reserved for spirits. Freakshow has developed its own app allowing you to filter your selfies as characters from its labels.

RunHunters

RunHunters is a running app that’s all about exploring new areas, breaking out of your usual routine, and the site reinforces that message by breaking the UI out of the app screens. It’s been done many times, but rarely as effectively.

Keus

Sideways scrolling is a much-maligned approach, but it would be difficult to object to the way it is used on Keus’ site. This site manages to achieve what all good ecommerce sites aim for, an enjoyable way to browse.

Isabel

Isabel is a bar in Denver, Colorado. The site is super-grid orientated, but what’s really eye-catching is the use of blackletter for the branding. Seriously, any site that contributes to reclaiming blackletter is worth 5 minutes of your time.

Timemator

Timemator is an auto-time tracking tool for keeping a record of what you’re working on at any time. Its dark-themed site reminds us of various design apps and for this reason it perfectly pitches itself to its target customers, design professionals.

Seed

The attention grabbing aspect of Seed is the juxtaposition of micro- and macro-photography, but what’s really engaging is the story being told of the ecosystem that each of our bodies is made up of. It’s a positive, and enticing message.

Chapin’s Bayside

This simple site for a restaurant and bar in Dennis, Masschusetts, is packed with lovely details, like the subtle animation on the menu items, and the page transitions. It’s an understated piece of excellent design.

En Font Terrible

Back when the web was young, designers put up pointless sites, that presented interesting but ultimately useless ideas. It was fun. Harking back to that era is En Font Terrible, a site that will auto-generate a font you’ll never use.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

p img {display:inline-block; margin-right:10px;}
.alignleft {float:left;}
p.showcase {clear:both;}
body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

Source: web designer depot

‘shanghai streets’ by cody ellingham captures the city’s historic lane houses

the series depicts the intricate shikumen lane houses that are unique to the city’s oldest districts.

The post ‘shanghai streets’ by cody ellingham captures the city’s historic lane houses appeared first on designboom | architecture & design magazine.

Source: designboom

lenny kravitz’s second collaboration with leica is a vegan snakeskin camera for nomads

for the multifaceted artist, music and photography are two mediums that are destined to capture moments.

The post lenny kravitz’s second collaboration with leica is a vegan snakeskin camera for nomads appeared first on designboom | architecture & design magazine.

Source: designboom

Core: Jump Start Your Website Design

Have you ever started building a project with a user interface kit and wished there were more to it? Core might be the fix to that common problem.

Core is a front-end feature kit packed with essential project building blocks, and you can get it free from Mason. Usability is the key feature of this kit. So many UI kits look great but fail in the actual use department. Not Core. It’s beautiful and usable.

Here’s a look at Core and what it can do for you.

What is Core?

mason core

Core is a UI kit packed with elements that will make it easier to build almost anything. But it’s also a little more than just any old UI kit.

Core is a fully responsive set of tools for React or HTML. Here’s what the developer says about it:

This multipurpose starter kit, with 77 unique components and 230+ unique responsive screens across nine categories, isn’t just a bunch of pretty screens. It’s fully responsive and actually works.

And it does. This tool is packed with practical application. The best part is that the components are easy to use and look at. (Get a feel for them from the demo pages here.)

Core is built by Mason, which touts itself as a “feature-building platform.” The company makes a variety of front-end solutions from registration portals to news feeds to two-factor authentication and more.

Who Should Try It?

mason core

Core is a fully-responsive multipurpose kit. That means it will work with pretty much any design you can cook up for any type of website.

And since it is free to use, there’s no reason not to try it.

The design elements in this “kit” have a style that’s sleek and modern with a classic flair. They won’t start to look old or dated right after you launch a website update. You can combine them with trending elements – such as type or color – without overwhelming the design. These components will fit right in.

Who should try it?

Anyone who wants to jump-start website projects with ready components, including hero sections, content blocks, features, call to action banners, forms, feeds, cards, navigation elements footers and more.

Key Features

mason core

Usability for the front-end developer is at the “core” of this product. The multipurpose kit is packed with elements you can actually use including hundreds of premade responsive screens and 77 individual components in nine categories.

  • Hero Section: Seven options to help grab users as soon as they hit your home page
  • Content Blocks: 10 types of elements that help organize content in a readable and visually-appealing way
  • Features: Highlight key content or products with this element in nine different styles
  • CTA Banners: From small banners to full screen calls to action, create an element from one of 12 options that begs to be clicked
  • Forms: From checkout forms to email signups, this component style has everything you need
  • Feeds: Take the work out of setting up a custom feed with these seven ready-to-use content block styles
  • Cards: Feature content or team members in this trendy and highly usable style with 11 cool options
  • Top Navigation: Create a menu that will help users move around the site with light and dark style options
  • Footers: Streamline your footer to get the right information on every page and in a place that every user can find with ease

Core is a front-end kit and it’s easy to use. That’s the real beauty of this tool.

Pricing

mason core

Mason is offering Core completely free. There’s no reason not to try it out and see if the components work for you.

And there’s really no catch. You aren’t going to get asked to pay for it later. Core is available free with no upsells and no paywalls.

You just have to enter your email address to get started and you can deploy everything free as long as you want to use it.

Conclusion

Core is more robust than many of the other user interface kits I’ve tried and it actually works. The components are designed in a way that will work with your projects and everything is incredibly easy to use.

And since everything is responsive, you don’t end up with a bunch of “screens.” You get a set of working parts that you can use across the design.

Try it out. Core is definitely worth playing with.

Source: design shack