designblo.gs

About

Hello, and welcome to designblo.gs. The fun toy project by Zach Inglis. Hand picked (and consented by authors) quality design blogs for your consumption.

Have an idea of someone who should be on here?
Submit them!

• Magritte: The Mystery of the Ordinary

  Posted about 21 hours ago by Veerle

  Today I'll write a little bit about one of my favorite painters. It's a Belgian painter called René Magritte (1898–1967), one of the most important Surrealists of the last century. If you are in the US you'll get the chance to see his work. I highly recommend a visit. More after the jump.

  

  La trahison des images (Ceci n’est pas une pipe) / The Treachery of Images (This is Not a Pipe) (1929)

  
  

  Surrealism

  
  

  Surrealism is a literary and artistic movement that was founded in 1924. The term 'surrealism' was coined in 1917 by 'Guillaume Apollinaire' as a response to Picasso designing the sets for the ballet 'Parade'. Surrealism is one of the art movements I like because of the fantasy and mystery that lies within. I'm most intrigued by the paradoxes, and illusions which plays on our common sense and visual perception of reality.

  It is a union that suggests the essential mystery of the world. Art for me is not an end in itself, but a means of evoking that mystery.

   — René Magritte on putting seemingly unrelated objects together in juxtaposition

  

  Les amants (The Lovers) (1928)

  
  

  Tentative de l'Impossible (Attempting the Impossible) (1928)

  
  

  L’assassin menacé (The Menaced Assassin) (1927)

  
  

  Le Model Rouge (The Red Model) (1935)

  
  

  La reproduction interdite (Not to be Reproduced) (1937)

  
  

  La durée poignardée (Time Transfixed) (1938)

  
  

  Reality and dream are blending together. This is why I'm such a big fan of René Magritte, and also because of his unspeakably clean and polished painting technique. Everything looks so real and precise. The details, and shadow & light are so perfect. It almost looks like a photograph.

  Covered faces

  
  

  René Magritte was born in 1898 at 'Lessines', Belgium. His mother committed suicide when Magritte was 13 years old. She jumped in the river 'Sambre' and was found naked with her face covered. This tragedy had a major impact in the life and work of Magritte . Covered faces is a returning element in some of the work that he painted on canvas.

  
  

  

  
  

  Retrospective at MoMA

  
  

  Magritte: The Mystery of the Ordinary 1926-1938. It's the first time that René Magritte gets an exhibition that will solely focus on the breakthrough Surrealist years of his life. I feel that Magritte is the creator of some of the 20th century’s most extraordinary images. The exhibition starts in 1926, when Magritte first aimed to create paintings that would, in his words, “challenge the real world”. The retrospective will feature around 80 paintings, collages, and objects, along with a selection of photographs, periodicals, and some early commercial work. The exhibition starts on September 28 and will run until January 12, 2014 at the sixth floor of the MoMa in New York.

  After New York the exhibition will move to Houston.The dates there are February 14 – June 1, 2014. After that things move to the Art Institute of Chicago from June 29–October 12, 2014.

  
  

  Paintings from: WikiPaintings.org

  
  

  

• The design process of my infographic about women cycling for Grinta!

  Posted 30 days ago by Veerle

  Sometimes I wish all job requests could be like this one. Then again, I'm the last person to complain as I get to do what I love on most days. What I want to say is that some projects just give me such a joy to work on. These favorites of mine usually have an illustration part. One of them was this infographic about women and cycling for Grinta!, a Belgian magazine all about cycling. Today I'll explain the steps I took during the design process, and also share some details on how I created some of the graphs…

  
  

  An image says more than a thousand words

  
  

  There is a first time for everything. Yes you read this right, this is the very first infographic I have ever created. Don't get me wrong, I have created many schematic illustrations over the years, but infographics weren't really around yet. These days, they are hot. I lost count on how many emails I receive these days asking me if I could share an infographic on my blog… After all, they are the perfect way to translate data into something comprehensible and visually attractive.

  
  

  

  
  

  The briefing

  
  

  The briefing for this was fairly straightforward: transform the data gathered from the questionnaire into something visually attractive and fun to look at, and readable on a spread. The result of the questionnaire was a 6 pages PDF file with 14 questions and their multiple choice answers. These were all I needed to get started. I was given carte blanche, but right from the start I already knew exactly which direction I should take in terms of design style.

  The layout

  
  

  The first thing I tried to figure out was the general layout of the page. I was thinking of dividing the spread up into boxes, using a box for each item. So I tried out a few different compositions. By combining different sizes of blocks I was able to create a more attractive layout. This way I give some results a bit more attention than others, and for some of the items more room was needed as well.

  
  

  

  I was also thinking about adding a big title, somewhere in the centre of the page, covering the total width of the spread seemed like a perfect spot. So I made sure to leave enough room for this. I decided to go with the last version, using 4 big boxes at the top, then the title below, and a combination of 5 boxes below on each side, including 3 small ones and 2 big ones. I thought it would be interesting to have the 5 boxes in mirrored version on the other side of the page. At this stage this was of course a bit of guessing work, but it was a good foundation.

  Next was trying to figure out which data item goes into which box, by starting to add the ones that had a lot info to show into the big boxes, and the ones that had "yes/no" answers into the smaller ones. At this moment I just added a few keywords into the box, just to keep an overview of things. This was a fun exercise as it almost felt like I was finishing a puzzle.

  The concept and illustrations

  
  

  Once I got this figured out, I started thinking about the illustration and visualisation of each item. First I did some short brainstorming, writing down cycling related keywords, also gathering images from Google search results. Then I tried linking an idea to each data item. At this point I didn't cover all items, I figured I would also get fresh ideas while working on this, item per item. You see…

  A design process is never like a straight line going from point A to point B.

  There are a lot of curves along the way as you constantly experiment and change things. Sometimes I change so much that there is almost nothing left of the initial concept that I had in my head. There is a certain order in place of the mayor steps you take during this process, but there is a big part that isn't very logical, even chaotic. I guess it's part of the creative brain. It's like trying to explain how inspiration works, there is always a certain unexplainable mystery.

  It usually happens that a lot of ideas come during the process itself. While working on one item, an new idea arises for the next item. This is something that happens a lot to me. Besides, I was also just so eager to get started on the first illustration. Just like a kid that is excited to play with his new toy :)

  Choosing the color palette

  
  

  While I was creating the first illustrations, I also tried to pick a suitable color palette. I wanted this vintage look, but I didn't want to use muted colors. So I thought of a combination of bright colors on a beige background.

  

  While the infographic was getting shape, I realised that the colors I chose weren't 100% to my liking. I wondered if the palette I chose was too narrow, or just not narrow enough. Something just felt wrong to me. Maybe it was in the way I apply the colors to my design. So I tried to figure out some sort of a system to fix this.

  

  First I decided to give the titles and all other text the same color, going for the dark grey. Secondly, I thought it would be a good idea to use red for the highest result, blue for the second highest result and yellow for the other results. It was better already, but it still didn't feel quite right. So I explored other color options and decided to go for a new color palette using this same system of applying the colors. I ended up with the colors shown in the image below:

  

  The graphs and graphics

  
  

  Creating these illustrations was the most fun part of it all, but also the most challenging. There was this item that had a list of answers and since there was so much text to process these, I tried to find a way to present these in an attractive way by creating an icon for each one of them (see item 'Problemen met' witch is Dutch for 'Problems with'). Some where obvious to translate, others weren't, such as 'the position on the bike', 'riding with cleats' or 'riding on cobbles'.

  

  Since each answer was given in percentages, it was easy to enter this data into a chart using Illustrator's Graph Tool. Some questions were answered with yes or no. For these data items I thought a pie graph would be perfect, maybe turning them into rings…

  
  

  

  
  

  Then I ungrouped the pie so it becomes an editable drawing. This way I could transform them into a ring, then copy mirroring and re-coloring the 2nd ring for the other answer.

  
  

  

  
  

  The end result

  
  

  
  

  

  
  

  

  
  

  

  
  

  Hope you enjoyed reading my process. This infographic was created for a special 'girls' edition of the Grinta! magazine. 180 pages with some very good articles like the girl reporters asking questions to Tom Boonen and Louis Talpe. A ride with World Champion Marianne Vos and practical stuff like woman's geometry or not. It's available at news stands from today. See the Grinta web site for more info.

  
  

  

• Fausto Coppi design process & review

  Posted about 1 month ago by Veerle

  I think it's safe to say that Fausto Coppi, along with Eddy Merckx belong in the category of the greatest cyclists of all time. There is a certain mystique surrounding this Italian 'Il Campionissimo'. 53 years after his death he's still interesting enough to write a new book about it. That's exactly what Grinta editor & Coppi fan Frederik Backelandt did.

  

  
  

  Un Uomo solo è al comando della corsa. La sua maglia è biancoceleste, il suo nome è Fausto Coppi.
  — Mario Feretti

  
  

  A man alone is leading the race. His shirt is white and blue, his name is Fausto Coppi.
  — Mario Feretti

  
  

  A childhood dream come true

  
  

  Frederik Backelandt is a true 'Coppiano', that's how they call a Coppi fan and this book project is a childhood dream come true for him. This is the story about a long term project. The linen cover refers to the kind of blue that was also found in Coppi's jersey. This book isn't the ultimate Fausto Coppi biography, but more like an interesting mix of facts, stories and experiences. It has been written with passion and that is noticeable throughout. The book contains 4 chapters:

  Chapter 1

  
  

  Even if you are too young to remember Fausto Coppi, you still have the opportunity to get to know the life and work of Fausto. In chapter one you'll get to know the high and lows. There is a lot to discover. Here are a few things you'll discover: you'll read about the epic rivalry between Coppi and Bartali, and about Fausto's controversial relationship with the White Lady. The second World War, and his tragic death on Saturday morning January 2, 1960.

  
  
  

  Chapter 2

  
  

  In chapter 2 you'll get to know Fausto Coppi through the eyes of others. Frederik talked to 13 people that knew Fausto personally to gather never been told stories. Some of the stories are told by Fiorenzo Magni, Andrea Carrea, Raymond Impanis, Jan Nolten ('the Dutch Coppi') and Raphael Geminiani. Stephan Vanfleteren photographed these folks in his beautiful unique style. There are also a bunch of never been shown pictures that make all this an exciting trip down memory lane.

  
  

  Chapter 3

  
  

  A few weeks ago I was at the Ronde van Vlaanderen centrum listening to Wilfried De Jong. He is such an excellent story teller and writer. You'll notice that in chapter 3 too as Wilfried talks about Fausto's death.

  Chapter 4

  
  

  Chapter 4 of this beautiful book is something special. In this part Frederik gets on his bicycle and does the legendary ride from 1949's Tour of Italy, from Cuneo to Pinerole. In this stage Coppi rode his biggest stunt of his career. On that June 10th he rode an unbelievable 192km alone at the front and won this 254km stage with five Alpine Cols. Coppi had those days when he became one with his bicycle and that June 10th was one of them. I'm not spoiling if Fredrik also became 'the great heron' or not :)

  Saving the best for last — the design process

  
  

  The best part of this beautiful book is its look & feel. Yes the internet is great and exciting, but nothing beats the tactile feedback of paper & the smell of the ink. Some people still care about that craft luckily. Cannibal Publishing are without a doubt leaders in creating the most beautiful sport books you'll find. The question that comes to mind is; how does such an amazing book come to life? I'm happy & honored that I was able to talk to the designer that created this wonderful Fausto Coppi book.

  His name is Tim Bisschop and runs houtkaai zeven and he will guide us through his design process.

  Designing the layout of a book like this one seems like a big undertaking. How do you get started? Can you reveal the mayor steps of this design process?

  
  

  Everything starts with the briefing of the publisher, the photographer and/or the authors. I get to know what the book is about, I receive a piece of the manuscript, possible an overview or Table Of Contents, and most of the photos. We examine together what direction we can go (style, audience, format, paper, special finishes etc). With this information I'm able to kick off the project.

  
  
  

  After doing some research —both in terms of style and content— I start with a first design. I read a piece of text. This way I get an idea of ​​how the pace and structure is built, and I'm looking for a way to translate it typographically.

  
  
  

  The hardest part of this choice - especially with this type of book - is that by using a typeface you are guiding the reader through the book without the reader noticing that he is being supervised. The typography needs to be subtle. I'm not fond of shouting, or spectacular constructions that draw all the attention, and as a result take away the role of the photography.

  
  
  

  To me a thorough upfront study of the typography is most import and very crucial. During this process I especially watch: the proportions, the contrast, the shape, the style, the durability, the tone of the body-text and how the figures look, the cursives and citations. In short, an analysis of the whole font family. I define a font for all elements: titles, body-text, captions, and citations.

  
  
  

  After having chosen the typefaces, I start with the architecture of the book. I create a raster, sometimes on paper, sometimes directly on the computer, where text and photos can live/move. The photos are placed in relation with each other. This happens in consultation with the photographer (in this case Stephan Vanfleteren). Furthermore, I also try to look for other possible combinations e.g. typo-image, image-whitespace, typo-whitespace etc. Gradually the structure and hierarchy between the different elements are evolving.

  
  
  

  Despite the fact that I have created a general form upfront, each page is looked at individually. This is necessary in order to develop a certain rhythm. Otherwise as a reader you would quickly sense that the book has a certain systematic feeling, making it hard to navigate and the risk that it comes across as boring. By designing each page separately you create a certain spontaneity in the lay-out.

  
  
  

  After laying out all pages everything goes back to the authors & editors. They indicate any possible text corrections. After adjustments and approval of the publisher, everything goes to the printer. The cover of the book is usually designed after I have finished creating the inside of the book. I believe you can only design the cover after this previously intensive work.

  How long did the entire design process take?

  
  

  The duration of the whole process depends on the size, complexity, and the type of book. It's obvious that a book with info-graphics, illustration, a lot of text and a complex structure (such as Kleine man Grote Tour) takes longer to complete than a regular reading book (such as Sportduivel). I think on average it takes about 2 to 3 weeks of full-time work.

  Besides the splendid photos, this book is the perfect proof that beautiful typography also makes half the design. It shows that you've chosen all the typefaces with the best care and eye for detail. What are the criteria that you generally take into account when you choose them? Can you also reveal the names of the typefaces?

  
  

  As I mentioned before, the typography needed to be very subtle, as the reader must never be distracted. I would find it rather odd if the typography would play a major role, and grab all the attention. The fonts were chosen with that in mind.

  
  
  

  For this book I chose for Gill Sans and Minion Pro. Gill Sans is perfect for headers. This modern sans serif typeface was originally designed on the basis of classical letters. As a result, this typeface has beautiful curves, classic quotation marks, and a graceful "g" which gives this letter more character than many other sans serif letters. He therefore goes perfectly together with Minion. Minion also gives a nice smooth image in larger text blocks, it has a clean look and shows little gaps.

  
  
  

  Choosing a typeface is of course highly subjective, but I'm convinced that the photography and the subject of this book, can tolerate stylish and timeless fonts. And maybe most importantly, it just reads well!

  
  
  

  For the quotes and the cover I used a script. Normally I'm not a big fan of scripts, but here it worked really well, as I wanted to translate certain aspects of the content of the book in a lyrical way. The script-font also somehow felt very Italian.

  
  

  
  

  

  
  

  Did you have a saying in the dimensions of the book, the choice of paper, the cover, and the finishing etc.? Did the editor involve you in the printing and finishing process as well? If so, what was your experience during this process? Which criteria did influence your choices.

  
  

  The choice of the paper, the finishing, the type of cover,… is usually done in dialogue with the publisher and photographer. Paper is chosen by its color, opacity, thickness,… The tactility of the paper is always tuned to the mood of the book. For "Fausto Coppi" it was OK okay to go for a retro feel. We chose for an off-white paper, namely 'Gardapat Classica'. The dark spots and images also work well on this paper. The black is beautiful deep black and there is also little shining.

  
  
  

  For the cover we opted for a light-blue linen wrapper which refers to the 'celesta' blue cycling-shirts from this period in time. I created the graceful retro letter based on logos of old Italian race-bikes. The wonderful name "Fausto Coppi" also invites for a calligraphic approach, and is beautiful as an icon itself.

  
  
  

  Which technical advice would you give a print designer designing the lay-out of his first book? Which criteria, in your experience, does he/she definitely have to keep in mind (to avoid the most common mistakes)?

  
  

  The design of a book is a creative process under strong time pressure. Therefore, it is important to check beforehand whether your solutions are feasible within a certain time. To achieve a perfect result, it is also convenient to involve the printer during the entire process, because printing technology-wise not everything is possible. Also ask the publisher what is and what is not possible in terms of budget.

  That's it! I hoped you enjoyed this interview and I like to thank Tim for his time & enthusiasm to do this. It's beautiful work proudly produced in Belgium!

  Where to buy?

  
  

  The book can be bought at Cannibal Publishing for €39.95 (delivery charges included). At the moment it is only available in Dutch. Dimension are 28 x 28cm and it has 168 pages. Highly recommended if you love beautiful books like me and are interested in the legendary past of cycling.

  
  

  

• My T-shirt design for Wolf

  Posted about 1 month ago by Veerle

  A while ago I was contacted by Wolf, a Belgian indie brand of T-shirts for kids, asking me if I would be interested in designing a T-shirt for their collection. Their designs are of such high quality and I totally love the vibrant colors. Of course I was honored they asked me and I knew it would be totally fun to do.

  
  

  Geeky Dog

  
  

  While looking into my personal illustration work, the client thought my Geeky Dog would be prefect for a T-shirt. A few years ago I created this fun, imaginative dog character, which I used a couple of times in my personal creations. One of them was for a dribbble rebound game, and before that also for a Christmas card.

  While digging into my old illustrations, I found the sketches from a few years ago when I was trying out different poses and ideas for this Christmas card. I thought maybe one of these would be perfect to use.

  
  

  My preference was the face of the dog at the bottom. The client also liked the one I created on dribbble, so I thought I'll try something out with these two versions.

  Maximum 3 colors

  
  

  Since these T-shirts are all screen-printed, they can only contain just a few colors to make sure the costs don't blow out of proportion. Using only a few colors can also make the design stronger. To me this was a bit challenging because the illustrations of the dog all use more than 4 colors. This took a bit of experimenting.

  First design proposals

  
  
  

  In the end the dog's face won, and I chose to go for these 3 colors:

  
  

  
  
  • White
  
  
  • Pantone 631 U (light blue)
  
  
  • Pantone 7469 U (darker blue)
  
  

  
  

  There was also the question whether I chose the right colors of the T-shirt, since I could choose a different color for the girls version than for the boys. I initially chose red because that was also a color that I used (for the socks) in my initial illustration of the dog. But I figured maybe pink could also work well for the girls. So I tried putting the illustration on a photo of a girl wearing the pink tee. After some consideration we decided pink worked really well.

  
  

  Final designs

  
  

  The only thing left for me to do was making sure the position of the dog was perfect. Just some tweaking of the scarf was needed. After showing the design to the printer the only change was to move up the face just a little as I could only have one color at the last 1.5 cm from the bottom of the tee due to the technical challenge of having to print to the end of the T-shirt.

  
  

  
  
  

  
  

  The finished tees

  
  

  Pre-order now!

  
  

  
  

  Special Offer

  
  

  Pre-order your T-shirt(s) now, and get two beautiful limited edition Geeky Dog post cards (offer while stocks last)!

  
  

  Buy now!

  
  

  Limited edition postcards

  
  

  

• Endless Possibilities

  Posted 3 months ago by Zach Inglis

  We work in an industry of endless possibility and opportunity that we often take for granted. There is a far easier barrier to entry than many fields, and it’s easy to become good at something. Everything is learnable (and there are countless resources available to help us to do), and nothing is unobtainable. We often [...]

• Photoshop Etiquette

  Posted 4 months ago by Veerle

  I like a tidy desk, desktop and environment to function at my best and others like it messy to feel comfortable. If there is one place where everybody should be organized it would be Photoshop. Even if you work alone it is good practice to follow some basic rules to make life a little easier.

  
  

  Be organized and you'll receive good karma

  
  

  Once every full moon I still receive PSD files from other designers that I waste my time on cleaning up their file because I just can't help myself. Why, you ask? Well, I just can't function in a messy unorganized, unnamed document.

  Ever since I work for Fab as their Design Lead I have been delivering Photoshop files for the developers more than ever. The organization of these files is important, as I need to keep in mind that they need to be able to work with them in the most efficient way. Generally speaking, I always try to keep these basic rules in mind:

  
  
  • Keep Layers, effects, masks… as flexible possible: use Smart Objects, vector-shapes, etc.
  
  
  • Give each Layer & Layer Group a logical name
  
  
  • Make sure your Layers & Layer Groups easy to navigate
  
  
  • Use Layer Comps where needed
  
  

  Keep flexibility in mind

  
  

  Keep Layers, effects, masks… as flexible possible. Use Smart Objects, vector-shapes, etc. Think about the fact that an item needs to stay editable, scalable etc. This is very important, especially if you work on designs for iPhone or iPad and you want your design to scale perfectly for Retina. But even in any other situation flexibility is important. If changes need to be made, make sure it's possible, and also in the least possible time.

  Easy to navigate

  
  

  To me it's pure common sense to place the layer group named FOOTER that holds all the layers of the footer, at the bottom of the Layers palette, and the layer group named HEADER containing all the header layers at the top of the Layers palette. Furthermore, before I hand over my Photoshop files, I also make sure to clean out the hidden unnecessary layers where I have tried out stuff which aren't needed anymore in the final approved version.

  Search layers

  
  

  You probably noticed by now that one of the Photoshop CS6 improvements brought us a new feature which allows you to use search for your layers. This feature alone should convince you to name your layers. It's such a powerful tool! Choose a 'Filter Type' by clicking the drop down menu at the top left of the Layers panel and choose from Kind, Name, Effect, Mode, Attribute and/or Color. Then, use the corresponding options that appear to the right of the Filter Type to narrow down the search. The 'light switch' to the right of the Filter options toggles the filtering on and off. Note: when filtering by Kind, you can click on more than one icon at a time in order to narrow down the search. Click an icon again to toggle if off. (source)

  Mark specific Layer Groups with a color

  
  

  In a lot of situations I have to make updates on a file that has already been sent to the developers, and so I have to resent this file with the update in place. This could be something like an icon, button, or some detail that had to be added in a later stage for example. Usually the file contains a lot of Layers and Layer Groups. To help the developers in finding the change or new item I give the Layer Group a color. You can of course use colors for other purposes. You could for example create the habit of coloring the Layer Groups that holds hover states of buttons.

  
  

  
  
  

  
  
  

  
  

  Guides

  
  

  When creating a web layout in Photoshop your document quickly fills up with a lot of guides. It's essential to keep them relevant and useful. Using too many guides will overwhelm others and they probably will turn them off and disregard them. I personally try to stick to gutter, columns and sections when using guides. If I use them for anything else I usually throw those away when handing my files over.

  
  

  
  
  

  
  

  Use Layer Comps

  
  

  I wrote about Layer Comps ages ago on my old blog. I'm not sure, but I believe Layer Comps are underestimated. I use them all the time to show different states of a design. Especially when I work on iPhone and iPad designs they come in pretty handy. The content is usually longer than the screen, and so I use Layer Comps to show the content further down below when the user scrolls down, or when the user taps and item, to show the different state. You can combine a lot of different screens within one Photoshop file in a more organized way, not only for yourself, but also for the developer as he can zap quickly between the difference screens, and states.

  
  

  
  
  

  
  
  

  
  

  Use the lock

  
  

  If you really want to preserve an original state or position use the layer lock. I usually lock the header, background or other elements of the design that can't be changed anymore. By doing so you prevent important layers from being edited and changed by accident.

  There is more…

  
  

  A Guide to Discernible Web Design in Photoshop

  
  

  A great site that everybody should know about is Photoshop Etiquette created by Dan Rose. I've already linked to it long time ago but it got totally relaunched about 4 months ago. I must say that this incarnation is fantastic. Everything is clearly organized and you can click the + sign to expand to see a screenshot and often a link to a good resource as well. This should be a must read for all designers. Next time you receive a mess point the owner to this site and hopefully the next time you receive a new PSD he or she understood the message.

  
  

  
  
  

  

• Why fight?

  Posted 4 months ago by Zach Inglis

  There’s a lot more to my passion than first meets the eye. People ask why I am so fervent in trying to right wrongs. You’ve no doubt seen me stick up for my point of view and whether you agree with it or not is up to you. I am not trying to convince anyone, [...]

• Deconstructing success

  Posted 4 months ago by Zach Inglis

  Up until a few years ago I always thought I was going to die – we all are – but I mean, young. As in late 20s to early 30s. This was not the fruit of paranoia, but from previous discussions of various diagnoses I was given as a child. My mother listed off what [...]

• All about Masks in Photoshop

  Posted 4 months ago by Veerle

  At the beginning of December I shared some Photoshop Layers tricks and shortcuts that I collected over the years. Today I'm doing something similar in a post that is all about masks in Photoshop. Hopefully this post will be as interesting as the layers one. That one worked its way up quite nicely. Enjoy!

  
  

  Tips & shortcuts for (Layer) Masks

  
  

  Targeting the Layer Mask

  
  

  
  
  • Targeting the Layer Mask: "Command (Mac) / Control (Win) + ‘\’ (backslash) targets the layer mask in the Layers panel. Command (Mac) / Control (Win) + 2 targets the layer
  
  

  Create Layer Mask from Transparency

  
  

  
  
  • In order to automatically convert the transparent areas of a layer into a mask, select Layer > Layer Mask > From Transparency.
  
  

  Delicate Mask Clean-Up

  
  

  
  
  • After adding a layer mask to hide portions of a layer, it can sometimes be difficult to determine if there are any small bits of the layer that have been accidentally left behind. In this case, it might be helpful to temporarily add a layer effect such as a bright red stroke ( Layer > Layer Style > Stroke and click the color swatch to choose a vibrant color) . The stroke will now appear around any small areas of the mask that you may need to clean up. When finished, simply remove the layer effect by dragging the "fx" icon on the Layers panel to the Trash icon).
  
  

  Inverting the Quick Mask

  
  

  
  
  • Option (Mac)/ Alt (Win) -click on the Quick Mask icon to invert the selection when entering Quick Mask mode.
  
  

  Quick Mask (Q)

  
  

  
  
  • Double click on the Quick Mask icon to access the Quick Mask Options dialog box to change color, transparency and opacity options.
  
  

  Double Check your Layer Mask

  
  

  
  
  • When working on intricately composited, multi layered documents, it can be useful to check each of the layer masks before finalizing the image. To do this, Option (Mac) / Alt (Win) -click on the mask thumbnail in the Layers panel to display it. With the mask visible, check to see if there are any unwanted awkward transitional areas that might not have been visible in the complex composite (a sharp edge from a selection or gradient for example).
  
  

  Pasting into Masks

  
  

  
  
  • To paste content (from the clipboard) into a Layer mask, Option (Mac)/ Alt (Win) -click the Layer Mask icon on the Layers panel and then select Edit > Paste.

    If you have an active selection in your document (marching ants) and have content on the clipboard, selecting “Paste Into” will paste the content from the clipboard into your selection - and automatically convert the selection into a Layer mask.

  
  

  How to Paste into a Layer Mask in Photoshop CS6

  Masking Selections with the Liquify Filter in Photoshop CS6

  
  

  
  
  • If you have an active selection in your image and choose Filter > Liquify, the Liquify filter will automatically turn the selection into a mask allowing you to manipulate the area within the original selection while masking (or freezing) the unselected area. If you need to manipulate the area outside of the original selection (instead of the inside), in the Liquify dialog, be sure to have the Advanced Options showing and click the “Invert All” button under the Mask Options.
  
  

  Clipping Masks

  
  

  
  
  • Clipping masks are most commonly used when an adjustment needs to be applied to a single layer in a multi-layer document. For example, if you have a triptych of images (each on their own layer) within a single document and need to brighten only one of the images, you can add an adjustment layer and “clip” it so that it only effects that single layer.

    The easiest way to “clip” an adjustment layer to the layer below it is to target the layer that needs the adjustment in the Layers panel, then click the clipping icon at the bottom of the Adjustment panel before adding the adjustment, (or, if you forget, you can click the clipping the icon after adding the adjustment at the bottom of the Adjustment panel). As you make the adjustment, you will notice that the modification is only effecting the layer that the adjustment is “clipped" to.

    Another use of clipping masks is to clip content such as a photo to a shape such as type. In order to do this, put the type layer under the photo layer on the Layer's panel, target the type layer (by clicking in it in the Layer's panel) and select Command-Opt (Mac) / Control-Alt (Win) + G to create a Clipping Mask.

    Or, on the Layers panel, hold the Option (Mac) / Alt (Win) key and position the cursor over the line that separates the two layers in the Layer's panel. When you see the icon switch to a triangle with two overlapping circles -click to create a Clipping Mask.

    You can have multiple layers clipped to a base layer. Visually, you will know that the layers are clipped because the bottom most layer’s name will be underlined in the Layers panel, and the clipped layer(s) will be indented with an arrow pointing downwards towards the base layer.

  
  

  Masking Multiple Layers

  
  

  
  
  • Not only are Layer Groups great for organizing your layers, you can also use them to mask the content of multiple layers at a time. With the Group targeted in the Layers panel, click the Add Pixel (or Vector) Mask icon from the Masks panel. This mask will control the visibility of all layers within the Group.
  
  

  Adding Masks

  
  

  
  
  • To add a mask to a layer, click on the layer or vector mask icon in the Properties panel (or Masks panel, for older Photoshop versions). If you prefer to use the Layers panel “Add Layer Mask” icon, click once to add a layer mask, click again to add a vector mask, or if you want only the vector mask, Command (Mac) / Control (Win) -click the mask icon. To add a layer mask which automatically hides the selection (as oppose to reveals it as it does by default), Option (Mac) / Alt (Win) -click the icon. In Photoshop CS4, you can invert a layer mask using the Invert button in the Masks panel. In CS6 you find this button in the Properties panel.
  
  

  Applying Smart Filters With Independent Masks in Photoshop

  
  

  
  
  • In order to apply multiple filters to a single layer – each with their own filter mask, convert the layer into a smart object (Layer > Smart Objects > Convert to Smart Objects). Apply the first smart filter and paint in the mask as desired. To apply the second filter, choose Layer > Smart Objects > Convert to Smart Object (essentially ‘nesting’ one smart filter within another), apply the second filter and paint in the mask as desired. If you need to edit the settings or mask for the first filter, choose Layer > Smart Object > Edit Contents. This technique is also an excellent way to selectively sharpen and blur an image.
  
  

  

  In the screenshot above, the High Pass filter was applied to the Smart Object (Layer 0) and then masked so that it is limited to sharpening the cactus. Note: If you use the High Pass filter to sharpen an image, you can double-click the small icon to the right of the filter name in the Layers panel and set the blend mode to Overlay or Soft Light to remove the grayish look of the filter

  

  After applying the first smart filter, selecting Layer > Smart Objects > Convert to Smart Object nests the first smart filter and allows the addition of another filter (in this example Oil Paint) with its own Smart Filter mask.

  Convert a Layer or Layer Mask into a Selection

  
  

  
  
  • Command (Mac) / Control (Win) -click on a layer or layer mask thumbnail in the Layers panel to load it as a selection.
  
  

  
  

  In addition:

  
  

  
  
  • Command (Mac) / Control (Win) + Shift to add additional layer and or layer mask to the selection.
  
  
  • Option-Command (Mac) / Alt-Control (Win) to subtract another layer and or layer mask from the selection.
  
  
  • Option-Command (Mac) / Alt-Control (Win) + Shift to create the intersection of two layers and or layer masks.
  
  

  Moving and Duplicating Masks

  
  

  
  
  • Drag a layer or vector mask thumbnail in the Layers panel to move it from one layer to another.
  
  
  • Option (Mac) / Alt (Win) -drag a layer or vector mask thumbnail in the Layers panel to create a copy of the mask.
  
  
  • Option (Mac) / Alt (Win) + Shift -drag to create copy of a layer mask while simultaneously inverting the mask. (Note: this shortcut does not work with a vector mask - in order to invert a vector mask, select the path with the Direct Selection tool and click the “Subtract From Shapes Area” icon in the Options bar.)
  
  

  Photoshop’s Mask Panel – Nondestructive Edge Softening

  
  

  When adding a mask to a layer in Photoshop, instead of guessing at the size of a feather that should be applied (because we know that the feather amount will vary depending on the resolution of the image and the desired softness of the edge that is being feathered), use the non-destructive Feather option on the Properties panel. To access the mask properties, click on the mask icon on the Properties Panel. Now, you can add a feather to soften an edge yet, if the image is resized or other adjustments need to be made at a later time, the feather can be appropriately adjusted.

  And while you’re in the Properties panel, and the focus is on the mask, be sure to check out the non-destructive Density slider to reduce the opacity (density) of the mask.

  TIP: before playing with the ‘feather’ slider, go to the Channels panel and make the one corresponding to your selection visible. By doing this you’ll really see the feathered area.

  The Adjustment Brush - Masking Options

  
  

  
  
  • When using the Adjustment brush, tap "M" to toggle on/off the Auto Mask option (Auto Mask automatically detect edges based on contrast and color to help selectively apply adjustments to a desired area. To view the Mask Overlay tap "Y" to toggle the Overlay on /off. To choose a different color to display as the mask overlay, click the color swatch to the right of the Show Mask option.
  
  

  
  
  

  Temporarily Disabling a Layer Mask

  
  

  Sometimes you need to see what a layer or the image as a whole looks like without the effect your layer mask has on the image. Luckily there’s an easy way to “turn off” the Layer Mask without deleting it or undoing its creation in the History panel.

  Just move the cursor over the Layer Mask, then Shift-click to turn it off temporarily. This will place a red “X” over the mask and allow you to see what the picture would look like without it being used. To turn the mask back on, just Shift-click the mask again.

  Credit

  
  

  Similar credit as in my previous post where I shared 'Photoshop Layers tricks and shortcuts'. Many of these excellent tips I collected over the years by following Julianne Kost's blog. In an application as big as photoshop you are never too old to learn something new.

  
  

  
  

  

  

• State of Crit.io & Announcing HybridConf

  Posted 4 months ago by Zach Inglis

  Crit.io I had intended to get it out last weekend, but unfortunately my partner in design justice was sick. So we’re a little behind schedule. We are doing all we can and hope we can get it out this week. We’ll be releasing to a select few for Alpha so we can fine tune the [...]

• Out and about

  Posted 5 months ago by Zach Inglis

  As all of you know, I’ve been having a YES few months. Where as I have always said no to conferences, podcasts and the like I’ve started to say yes. This started a few months ago when I spoke at Belfast Ruby. I have some controversial opinions on the current state of the web, and I wanted [...]

• Design Confidence

  Posted 5 months ago by Zach Inglis

  Designers are a self-critical bunch. It’s in our nature to critique and we are our own harshest critics. I see it all the time; myself, my friends on Twitter, the people I hold in high regard. It’s a normal aspect of a creative field. Don’t worry! It’s normal. It happens, and it will pass. Grab a [...]

• Web Design Anarchy

  Posted 6 months ago by Zach Inglis

  definition: absence of government and absolute freedom of the individual, regarded as a political ideal. The topic of web designers and speakers came up again yesterday and I spoke more about my views. Why do I do fight so hard? Does it do me any favours? Yes, and no. I get a lot of messages of [...]

• Question everything

  Posted 6 months ago by Zach Inglis

  Often when people share an idea with me, or they say they want to think outside the box for X, Y, or Z, my first answer is “Why?” I always assume the burden of proof to be on the person with the idea. Some people haven’t always liked that approach and have equated my reactions [...]

• Slides from my Belfast Ruby talk

  Posted 6 months ago by Zach Inglis

  I’ve always been adverse to any form of public speaking. When people ask me to speak, I’ve always said no. And so on. I do this because I don’t want to fall into the trap of spending so much time talking about cool things, and not enough time doing cool things. But I’ve been having [...]

• Mosaic photo book

  Posted 6 months ago by Veerle

  People who follow me know that I like to take pictures when I'm out riding my bicycle. It's my way of showing how beautiful my little country really is. That's the reason why Instagram is one of my favorite applications on my iPhone. Having all these lovely memories on your phone or computer is nice, but nothing beats having them on paper. That's where Mosaic comes in.

  
  

  Creating your own photo book

  
  

  The main reason why I didn't print any of my photos yet is that it is cumbersome to find or create something that just feels right. Well that was the excuse until I got introduced to Mosaic.

  What is Mosaic?

  
  

  Mosaic is a nicely designed iPhone application that makes it easy for you to create a photo book of 20 pictures that you select by using the application. It's very fast and easy.

  How is it done?

  
  

  Launch the app and create a new Mosaic. Choose 20 photos from one of the albums on screen. Once you have selected 20 photos, click done and you'll get a screen where you can create the special Mosaic cover. Either you go with what is presented by default, or you shuffle to get the result that you are after. You can swipe the book to preview all the pages you've created. All what is left now is filling in your information and press place order. The app is available for iPhone, iPod touch, and iPad.

  
  

  

  
  

  Fast & beautiful

  
  

  After 4 days you receive your little photo book. The book measures 7 x 7 inch or 17,78 x 17,78 cm — the perfect size in my humble opinion. When it arrives you'll be very impressed with its unique and stunning hard cover design consisting of your own pictures. You'll want to touch it and see what's inside immediately. The paper & print has real quality even from all the Instagram photos that I selected to get printed. The paper is silky smooth like promised, and the colors were just as I would expected them. Must be some great engineering in the background to get this all right.

  
  
  
  
  
  
  
  

  How much?

  
  

  Mosaics are a flat price of $20 + tax & shipping; a fair and honest price for this kind of quality. I was lucky to get to preview the service because it's not available in Europe yet. They're working hard on shipping outside of the U.S. Once they do I'm already eagerly waiting to order another book of the pictures I've snapped during my rides. I've reserved shelf space to get a few of these little photo books :)

  
  

  

• Illustrator’s Isolate Blending feature

  Posted 7 months ago by Veerle

  In my previous Illustrator tutorial, I explained the Knockout Group feature. Today I'll explain the Isolate Blending option which is also located in the Transparency panel.

  
  

  What is this?

  
  

  With the Isolate Blending option you can limit the effect of an object’s blend mode to other objects that are part of the same group. So this helps you create blending effects between specific objects instead of the entire document. This feature comes in handy when objects overlap each other and you would like to keep the result. Especially with layer modes such as Multiply where the colors become way darker as soon as you place the object over a dark background, compared to for example a white background.

  
  

  
  
  

  The result when placing the object on a different background.

  
  

  
  

  In my example above the colored paths each have their own blend mode and opacity value. Some of them have Overlay applied, others have the Darken blend mode. The end result on a white background is what I would like to keep, but as soon as I add a dark background, the blend modes applied to each of the paths is adjusted to that background. To prevent this from happening, we'll use this Isolate Blending feature.

  How to apply this?

  
  

  
  
  

  First group the paths together, then check the Isolate Blending option.

  
  

  
  

  After you have applied the different blend modes to the separate paths, you group them. Then you go to the Transparency panel and check the Isolate Blending option. This will limit the blend mode effect to the paths that are part of the grouped object. So only objects within this group will blend with each other.

  
  

  Good to know…

  
  

  
  
  • Additionally the group itself can also have a blend mode and opacity value applied.
  
  
  • Blending works best in RGB mode. When working in CMYK the result can be totally different.
  
  
  • Using both the Isolate Blending and Knockout Group option can result in nothing happening as one cancels out the other.
  
  

  

• Why the Apple reshuffle could prove Cook’s worth

  Posted 7 months ago by Zach Inglis

  John Gruber wrote a very good piece on the Apple reshuffle. He wrote that Forstall is being pushed out the door, and if Gruber’s assertions that Forstall is behind the hideous designs Apple have done lately are correct then I am cheering this announcement on. Apple’s iOS visuals haven’t changed since 2007 when it was [...]

• Rails Rumble

  Posted 7 months ago by Zach Inglis

  Running the Rumble isn’t easy. We all do it for free, to help the community that we love. When the competition ended, I murmured to myself “Never again.” Weeks of my time that I could have been working, a lot of effort in trying to judges, sponsors, and make sure there are no nasty surprises [...]

• Steve Jobs would have never written this post

  Posted 7 months ago by Zach Inglis

  Every Apple release since Steve Jobs death has come with responses of “Steve Jobs would never stand for this.” as if Steve always released the most excellent and agreeable products and if he had no hand in it. The iPhone wasn’t created in a few months, as I can only imagine a lot of the [...]

• Selling my e-book on Amazon

  Posted 7 months ago by Jon Snook

  After reading Thomas Fuchs’ post, 5 rules to sell thousands of copies of your ebook, and the ensuing Twitter discussion, I decided to share my thoughts on selling my book, SMACSS, on Amazon.

  Had you asked me before I wrote this post whether I would sell on Amazon again, I’d have flat out said no. Having researched and compiled numbers for this post, now I’m not so sure. Let’s dive in to see why.

  Selling on Amazon

  Selling on Amazon is relatively easy. Create a mobi file and upload it. Add a cover photo and a description, set a price, and you’re pretty much set to go.

  It’s that setting of the price that initial ruffled my feathers. See, Amazon is trying to drive down e-book prices by creating an incentive to price the book under $10. Normally, you only get 35% of every book sale but if it’s under $10 then you can get 70% of every sale. Sort of.

  First, if it’s under $10 then you also have to pay a delivery fee. The larger your book is, the larger your fee is. The other catch is that you only get 70% if the book is sold to someone within certain countries. For books sold to people outside of that list, you still only get 35%.

  From the launch of the book in November 2011 up to and including September 2012, I’ve sold 338 books. For those 11 months, 30% of those were sold at the 35% royalty rate. The average royalty per book has been 61.8%.

  

  In my case, pricing the book at $9 on Amazon made sense. I sell the book for $15 on my own site but that includes PDF, ePub, and mobi formats and includes screencasts. On Amazon, you just get the mobi version. I felt this was fair.

  However, let’s assume that I just had the e-book with no other frills. At $9 getting 61.8% from every sale means $5.56 in royalties. I’d have to sell the book for $16 to make just as much at the reduced price point.

  Clearly, it’s better for consumers if I sell for the cheaper price, since I make the same either way.

  Versus self-sold

  One commenter on Twitter figured Amazon would be worth it based on sheer volume of sales. However, that’s not the case. Through self-marketing alone, sales through my own site have far exceeding anything that I’ve sold on Amazon. I’ve sold almost 6 books on my own site for every book sold on Amazon. Every book sold on my own site makes about 96% of the sale price (and sells for a higher price!).

  

  Based on this alone, it really doesn’t make sense to push people to Amazon.

  Pushing to Amazon

  When I first launched the book, I actively encouraged people to buy the book from Amazon. When you went to the purchase page, one of the pricing options was to buy it from Amazon and explained the benefits of doing so. (Namely, price.)

  When I released the print version of the book back in May, I changed the way my site presented pricing and dropped any mention of Amazon from my site. Sales dropped off considerably. Looking at June sales on Amazon.com, they were at the lowest they had ever been.

  Clearly, this demonstrated that pushing people to Amazon was just not worth it.

  No more Amazon?

  It was at this point that I said to myself (and others) that I would never bother selling through Amazon again. Why bother?

  But then I started compiling numbers for this very blog post and I started to see some trends that caught my attention.

  1. Sales on Amazon are climbing

  While overall sales are still down, the trend has been climbing since June. Why is this? It’s hard to say for sure but I’m going to chalk it up to one reason: Reviews. I used to only have one review. It was only 3 stars. Not a glowing review by any means. But in September, I got two more reviews that were definitely more positive. I believe these positive reviews have helped increase sales.

  2. Sales have closely mirrored my own site

  Sure, sales dropped considerably in June on Amazon but having finally compiled numbers from my own site, I realized that sales dropped there, too. Maybe my site wasn’t contributing as heavily to Amazon sales as I originally thought.

  

  In fact, month over month, sales have increased more on Amazon than they have on my own site over the last three months.

  In Review

  My takeaway from all of this is that Amazon may still be a worthwhile addition to sales that may not be taking sales away from my own site (as I originally suspected). However, doing well (or better) on Amazon means having positive reviews to help push sales. This makes sense. (Maybe you’d like to review it!)

  In the end, I’ve made $1882 from Amazon.com since the launch of the book. I’m not about to say no to that! And I’ll continue to sell the book on Amazon for the foreseeable future. More importantly, I’m more likely to recommend Amazon as a viable option for e-book sales as a supplement to regular sales.

  
  
  

  

• Inspiring book cover designs

  Posted 7 months ago by Veerle

  When searching for items that would fit my Inspiration Stream I have been collecting a special collection that deserve a post on their own I think. I'm referring to a fine selection of book cover designs that I'll share with you after the jump.

  
  

  Excellence in book cover design

  
  

  Good book cover design are usually a creative challenge and often some of the hardest things to get just right. I've done two in recent history and if you are interested in the creative process behind those two book covers go here and here. The main purpose of this post is inspiration so I hope you'll enjoy my selection.

  
  

  Oliver Sacks

  
  

  
  

  
  

  
  
  • Title: Oliver Sacks paperback repackage
  
  
  • Designer: Cardon Webb
  
  
  • Art Director: John Gall
  
  
  • Design Firm: Vintage/Anchor
  
  

  The Bauhaus Group

  
  
  

  
  
  • Title: The Bauhaus Group - Six Masters of Modernism
  
  
  • Author: Nicholas Fox Weber
  
  
  • Designer: Peter Mendelsund
  
  

  America

  
  
  

  
  
  • Title: America
  
  
  • Author: Franz Kafka
  
  
  • Designer: Peter Mendelsund
  
  

  Aphorisms

  
  
  

  
  
  • Title: Aphorisms
  
  
  • Author: Franz Kafka
  
  
  • Designer: Peter Mendelsund
  
  

  The Trail

  
  
  

  
  
  • Title: The Trail
  
  
  • Author: Franz Kafka
  
  
  • Designer: Peter Mendelsund
  
  

  Diaries

  
  
  

  
  
  • Title: Diaries
  
  
  • Author: Franz Kafka
  
  
  • Designer: Peter Mendelsund
  
  

  
  

  
  
  

  

  
  

  Gabriel Garci­a Marquez: The Early Years

  
  
  

  
  
  • Title: Gabriel Garci­a Marquez: The Early Years
  
  
  • Author: Ilan Stavans
  
  
  • Designer: Jason Ramirez
  
  
  • Art Director: David Baldeosingh Rotstein
  
  

  Milk

  
  
  

  
  
  • Title: Milk
  
  
  • Author: Anne Mendelson
  
  
  • Designer: Barbara deWilde
  
  

  Ilustrado

  
  
  

  
  
  • Title: Ilustrado
  
  
  • Author: Miguel Syjuco
  
  
  • Designer: gray318
  
  

  Mr. Peanut

  
  
  

  
  
  • Title: Mr. Peanut
  
  
  • Author: Adam Ross
  
  
  • Designer: Peter Mendelsund
  
  

  The Naked Pint

  
  
  

  
  
  • Title: The Naked Pint
  
  
  • Author: Christina Perozzi & Hallie Beaune
  
  
  • Designer: Richard Oriolo
  
  

  An Object of Beauty

  
  
  

  
  
  • Title: An Object of Beauty
  
  
  • Author: Steve Martin
  
  
  • Designer: Darren Booth
  
  

  Tell The Wolves I'm Home

  
  
  

  
  
  • Title: Tell the Wolves I'm Home: A Novel
  
  
  • Author: Carol Rifka Brunt
  
  
  • Designer: Caroline Cunningham
  
  

  Alaska

  
  
  

  
  
  • Title: Alaska
  
  
  • Author: Sue Saliba
  
  
  • Designer: Alilison Colpoys
  
  
  
  

  
  

  

• ‘HTML & CSS, design and build websites’ book review

  Posted 8 months ago by Veerle

  One of the books I've been reading the past couple of weeks is "HTML & CSS, design and build websites" by Jon Duckett. I particularly chose this book because of its beautiful light design, clean layout, and the way things are visually presented, plus it's very well explained too. This book makes learning a dull technical matter like this more pleasant. It's a book for anyone who wants to learn to design and build websites, and needs a starting point.

  

  If you are proficient already this book will be a lightweight, but that's just in terms of content really, because the book counts about 490 pages. After checking out the Table of Contents, I could already tell that each aspect of HTML and CSS would be covered in a logical order. Before jumping right into the coding part, Jon gives us an introduction about the structure of the book, explaining what HTML and CSS is, followed by a brief explanation of how people access the web, and how websites are created. Each chapter starts with a short introduction of the key topics, and ends with a summary of what was covered. Every chapter also contains a well explained practical example page with complete code, and a reference link of where you can find it online.

  The first half of the book is all about HTML, explaining every aspect. In this part of the book, the chapters summary pages are colored blue, and blue is also used as highlight color in the introduction page. The second part of the book is all about CSS, with pink as highlight color for the summary and introduction pages.

  

  The HTML section

  
  

  The very first thing you learn is how HTML is structured, and what elements, tags and attributes are. You'll get a detailed explanation based on an example page, and everything is visually presented to help you better understand the basic components of the HTML markup language. Next, you'll get to see how you create and save your first basic HTML webpage for both Mac and Windows, all documented with photos, explaining each step along the way.

  

  Once you understand these basics, the book continues by going through all of the HTML aspects. Each HTML element is covered, starting with the 'Text' related elements, explaining their semantic information, and structural purpose. Next are 'Lists', 'Links' and 'Images', each with their own chapter. In the chapter of 'Images' you'll also get a lot of basic information on how to save them, which file format to use, info about file size, dimensions, transparency, cropping, things like vector-based versus pixel-based etc. Nearly everything is covered for the beginning user. Then the book continues its list of HTML elements: 'Tables', 'Forms'… The ’Forms’ chapter is a really extended one, as there is a lot to cover. Everything there is to know about forms is explained and demonstrated in a clear and easy to understand language. This helps a lot when you are just starting to wrap your head around it all.

  

  A lot of attention went into the last chapter of the HTML section of the book, about ’Flash, Video & Audio’. It explains how you can add Flash movies into your site, giving you the pros and cons of using Flash, and when to use it and when not…, how to add video and audio to your site, using HTML5 elements. Right before the last chapter of this section, there is a chapter about ’Extra Markup’ explaining the different versions of HTML, identifying and grouping elements, comments, escape characters, meta information and iframes.

  The CSS section

  
  

  Like previously you’ll first start with a full introduction on what CSS is, what it’s used for and how it works. The first chapter also explains the structure of CSS, explaining rules, properties, and values. Furthermore, you’ll learn about internal and external CSS, how CSS rules cascade, and about inheritance. Once that is out of the way, the book covers everything there is to know about 'Color', starting with some color theory background information, info about different types of values (hex, RGB,HSL,…), info about hue, saturation, brightness and contrast, opacity… followed by the CSS properties ’color’ and ’background-color’.

  After 'Color' comes the very extended chapter about ’Text’, explaining all the properties that allow you to control the appearance of text. The book also pays attention to typeface terminology, and gives the reader a brief introduction to basic typography. Furthermore you'll get an overview of the possible techniques you can use to apply a wider choice of typefaces, each with their pros and cons. The different types of units of type sizes, how type scales, and font formats, are also covered. A more technical part for the beginning user is about pseudo-elements, pseudo-classes, and attribute selectors.

  

  The next chapter is about ’Boxes’ starting by explaining the box model in its full detail, how to control the size of a box, everything that is related to borders, padding and margins…, how to show and hide elements using the display and visibility properties, and all other basic aspects that have to do with this very important subject, such as how you can turn a block-level box into inline boxes and vice versa. Next item is all about 'Lists, Tables and Forms' where you learn about specifying bullet point styles, adding borders and backgrounds to tables, and how to change the appearance of form elements, all combined with a handful of tips on do's and dont's.

  A big chapter is spent on the subject of 'Layout' as there is a lot to cover here. This chapter is about controlling the position of elements, where you'll learn all about the different types of positioning and floating… But before you'll go right into the coding part, you'll get introduced by the principles and key concepts of this matter so you get a better understanding of how this all works. Jon will also help you in understanding basic stuff such as the difference between screen sizes and screen resolution, page size, fixed versus liquid layouts,… It's all covered, even very practical information about layout grids, and some basic info on CSS frameworks. The last CSS chapter is about 'Images' where you learn how to control the size and alignment of your images using CSS. You'll learn how you can apply background images to boxes and create rollover images, but you'll also learn how to create gradient backgrounds using CSS3.

  
  

  
  

  HTML5

  
  

  Once you worked your way through everything you need to know about HTML and CSS (to get started), you'll learn about HTML5. It's covered at the end instead of earlier in the book because it makes it easier to understand how you can use HTML5. Structuring the book this way makes sure you understand the basics of what you can do with CSS to control the layout of a page.It's needed because in this chapter you'll learn about the HTML5 layout elements, and how they offer a helpful alternative to the div element. You'll also find out how older browsers recognise these elements.

  Practical information

  
  

  The two last chapters of the book give you a lot of other practical information you need to know to get started. There is a chapter about 'Process & Design' which gives you info on how you can understand your site's audience, info on how to organise information so the user can find what he's looking for, design tips to help you create a more attractive and professional site. You'll learn about sitemaps and get to know a simple technique that helps you build one. Next you'll learn about wireframes and visual hierarchy and tips on how to get your message across. There are a ton of other design related tips and principles explained in this chapter as well. The very last chapter is about SEO, analytics and how to put your site online, introducing you to FTP, domain names and hosting, but keeping the more technical part to the bare minimum, making it all very comprehensible for the beginning or less tech-savy people.

  Conclusion

  
  

  The book is aimed to anyone who wants to learn to design and build websites, or anyone who has a website (maybe using a blogging software, or any form of content management system), and wants more control over the appearance of their pages. The book is really very well structured and explained, both visually and content-wise and complex topics are simplified with the use of infographics. The book covers more than just the coding part, it also explains a lot of basic things you need to know to get a full understanding of the web and web design. It covers nearly everything you need to know to get started, and is full of practical tips and information. The book's approach to learn about HTML and CSS is done in a very logical order, placing HTML5 at the end in a separate chapter. Its clean design, the logical structure & completeness, and easy to read style, is what makes this book stand out in my humble opinion. It makes this book very inviting to read, and for people with an eye for design, attractive to learn about this technical stuff. The fact that it is so complete makes this a perfect book that I will recommend to anyone who is just starting out, or to the print designer that wants an introduction into web design.

  

• Previous Parent

  Posted 8 months ago by Jon Snook

  Plenty of people in the CSS world want a parent selector. It’s complicated and I understand it if browsers didn’t implement it.

  However, something that could work and could be useful is what I call the Previous Parent selector.

  Since CSS is essentially read from right-to-left, and from current element to top element, it should be possible to find a child element of a parent element that has already rendered its children.

  Imagine the following HTML structure:

  <div class="A">
  
  	<label>
  
  	<input>
  
  </div>
  
  <div class="B">
  
  	<div>
  
  		<label>
  
  		<input>
  
  	</div>
  
  </div>
  
  <div class="option">
  
  	<label>
  
  	<input>
  
  </div>

  Ignore the lack of closing tags, as the pedant in you may be so inclined to mention. This is just to get a sense of the document structure.

  How can we effect change on the DIV with the class of option if they’re children of a sibling element? The Previous Parent selector would allow drilling down into previously rendered parents.

  .option { display:block; }
  
  /* clicking on A > input would hide the option */
  
  input:checked <+ div ~ .option { display:none; } 
  
  /* clicking on B > div > input would hide the option */
  
  input:checked <~ div ~ .option { display:none; }

  You’ll notice the use of <+ to indicate that the input:checked should be the immediate child of the DIV. The use of <~ indicates that the input:checked should be a descendant (at any level) of the DIV.

  The fact that the elements need to appear before the current element does limit the effectiveness of this but would allow for more complicated interactions to be expressed in CSS that aren’t currently possible.

  
  
  

  

• Get Jacked

  Posted 8 months ago by Jon Snook

  Jack the Lumberjack was getting a little tired of hanging out on book covers and has decided to expand out into the world of fashion. I don't blame him. He has a face made to adorn the chest of many a geek, male and female. In fact, he has inspired me to grow my own beard all bushy and bold.

  Where might you find Jack? Why, on a United Pixelworker Tee, of course. Get yours before Monday!

  

  
  
  

  

© Copyright to respective blog post authors. Otherwise Zach Inglis of London Made