Update complete

There hasn’t been a week like this one in a long, long time.

Where I scroll through pages, read up on web design news, sip my ginger-flavored tea, while occasionally pressing the refresh button to load those mighty sluggish sites.

This sure takes me back to the humble beginnings of my web design career.

And it’s good to have weeks like this one: from time to time, you really need to re-evaluate your style, your mojo, your “shizzle” if you will. Crawl out of that cave you’ve been living in and check what the world has been up to. You might find yourself aisle salmoning (the what now?) your way into the realm of passé while the world’s moving on into the opposite direction.

update
Get polishing!

And although there’s nothing wrong with standing out from the crowd…you just might wanna keep yourself in the loop and at least make that decision consciously. Just saying.

__________________________________________________________

Anyhow, I thought this would be the perfect week to not only do my research on all the new stuff that’s going on in the world of web design, but to also catch the opportunity to learn some awesome new tricks: how to create a disintegration effect in Photoshop and how to design a mascot in Illustrator.

I watched this tutorial a while back and I loved it. So I figured, why not give it a try myself.

So this is what happened: I made a tiger explode.

tigerUgh, the drop shadow definitely did not make it better…It’s just a big mess haha.

Sadly I lost my second and third versions – which were slightly better than this festive confetti-sprinkled cat. The trick is not to overdo it on the special effects: you want a disintegration effect, not a teenage mutant ninja tiger.

__________________________________________________________

I also came across this article on why certain companies or brands could benefit from having a mascot, and though mascots can look pretty childish, they can help “humanize” boring-ass tax or insurance companies and give businesses a more personal and memorable appeal to their target audience.

Like, who doesn’t remember Felix the cat from Purina? Heck, back in the day I even had a floppy disk with a Felix animation on it: he would pop up on my screen and chase my mouse all day – and I loved it. Good ol’days.

So I figured: why not check out how to make your own mascot in Illustrator? It’s great for the do-it-yourselvers among us.

bibear

Isn’t he just adorable?

You don’t even need advanced Illustrator skills for this one. Technically it’s just a bunch of circles and a few “recycled” shapes like I like to call ‘em: its legs, arms and eyes are all resized from one shape.

Also keep in mind: the clipping mask and pathfinder are your two best friends. They get you, you get them, they are your beginner go to!

Perhaps I should start writing another tutorial pretty soon!

That’s all for this week…see you in the next one!

Advertenties

Scalpel, please

It’s nearly July…and that means I’ve nearly reached my four month mark at WCB! Although it feels like I’ve been working here for years…!

I’ve learned so much in this short amount of time, it’s hard to believe that four months ago I was actually a web design newbie…

But look at me now! Designing, developing and fixing websites all by myself – with the occasional help from Ivan and Singh of course. Sure feel proud!

_________________________________________________________

This week was also Lise’s birthday, joyeux anniversaire Lise!!  Last Thursday she flew back to France to visit her family, so it’ll be tough without her for the next two weeks – you better bring me a bottle of wine Lise!;)

winecheeseSure could use this right now!

_________________________________________________________

I also learned about something new this week: Woocommerce plugin and how to categorize products.  Woocommerce is a customizable e-commerce plugin that allows you to sell products online – Natt, our former intern, had used it for his Cut&Paste project.

woocommerceThe Woocommerce plugin

The owner of Cut&Paste, an online web shop, had requested a few changes on his website. Since Natt had finished his internship and left WCB a few weeks ago, it was my responsibility to fix up his site. Scalpel, please.

The products on the site needed to be re-categorized, by adding category links to the navigation bar, rather than pages or posts. It sure took me a while to figure that one out. Apparently, with the Woocommerce plugin, content can be displayed and moved through links – pretty handy.

After establishing the new categories, you then re-assign each product to its new category and…that’s it!

_________________________________________________________

Another cool plugin is WPML language switcher: it allows you to change the language of your existing content. For example, our 949 project includes English as well as Thai content – which still needs to be added. The plugin lets you switch languages so that you can add Thai content when the site converts to Thai and English content when the site converts to English. That way Thai-speaking users can navigate through the Thai version of the site and the English-speaking users through the English version!

949-language Right there on top you can change the language of your site.

That’s all for this week. See you in the next one!

Apply and Learn

The work you do while you procrastinate, is the work you should be doing for the rest of your life. 

And for me, that’s designing.

I just love doodling on Illustrator and creating new designs.

But what I love more is learning about new tools and techniques from Tutorials or class with Art.

Last week, Art taught us what to look for when you design a flyer and a few little tricks you can use in Illustrator to get the design you want.

summerparty

This was our creation: a flyer for a summer party. You see those big goopy circles? They may look a little funny now, but they give a nice glowy effect to the design and can be easily created with the gradient tool.

And speaking of gradient tool, I wrote this tutorial a while back on how to make a cool geometric background pattern with different gradients.

Tutorial-step-20Geometric design tutorial

And it’s got over 4500 views on StumbleUpon! That’s pretty awesome!

__________________________________________________________

More exciting news: I finally finished Raja’s Fashions – well, only for the moment. I’ve finished all the pages and they seem to be functioning properly. All the site needs now is a little tweak here and there – or in other words, making it responsive, *sigh* – after all the content has been added.

And as there’s always plenty to do, the agency was quick to assign me with a new task: creating a few easy pages for wowevent. If you want to check how much you learned and improved from when you just started out, take on an easy task and see how fast you can do it. The results: What used to take me a week, I can now fix up in half a day! Just like that I am now able to build 7 pages, style them and add functionality, without getting fussy over my code or lack of skill. An accomplishment indeed.

woweventOne of the pages for wowevent.com

__________________________________________________________

We also welcomed a new team member this week: Atikun, or just “K”. K was our one-time photography teacher, but is now our content specialist and instructor. He will be teaching several courses in our school, and this week he taught us how to use LightRoom – a program I hadn’t even heard of, but it’s apparently great for retouching photographs.

Usually the photographer will try to capture the scenery or subject as best as he can – either by manually adjusting his digital camera or his position and so on. However, sometimes there are factors that cannot be adjusted, like an overly dark scene at sunset. LightRoom is then your go to.

With LightRoom you can adjust lighting, contrast, highlights, texture and a whole lot of other features in photos that need that little editing to make them look better.

lightroomIsn’t LightRoom just magical?

With a few clicks you can make colors pop, backgrounds fade, even skin out and get rid of impurities. It’s also easier to use than Photoshop, although Photoshop has many more features.

And that’s it for this week! Until next time…

Busy Bees

You know those corny gun scenes in old Wild West movies? The wind rolling tumbleweed down the dry desert road, little drops of sweat’s falling on the ground, tension’s building as everyone holds their breath… tumbleweed then BANG! That’s how responsiveness shot and killed me. Isn’t it a little ironic? “Responsive”…? Oh never mind. It’s probably one of the hardest, most frustrating tasks I’ve had to do so far. And even though I’d done a little responsiveness for the 949 project, making the Maya website responsive was of a whole different…caliber *badum tsshhh*. The problem with responsiveness isn’t really about knowing advanced coding or anything, it’s more about understanding the written code; how it was written and why. So when you look at the site from different screens, you can understand why page elements move or get squashed, and then try to fix it. But it’s a pain in the ass when someone else wrote the code. Par example: dear Mr. Singh, who helped build the Maya website, used many, many parent and child elements to the point where I had to write a few lines of code in my responsive file just to target one element…which still would target two or three other elements because they weren’t specified (unless by using nth-child(…)) – no Singh, I’m not judging. maya The Maya website Oh and one more thing: if you make @media changes to different PC screen sizes, it is probably going to affect the mobile versions as well, so make sure you to keep your phone in check while you’re working on responsiveness. If the mobile version needs specific changes, you can target them specifically with a separate media-query. _________________________________________________________ I also learned another cool trick this week: how to set up your ‘work place’ in Photoshop. Whenever you are designing you need to prepare your “canvas” – so to speak. About a month ago I learned from Art, our web designer, how to make grids in Illustrator. This time I did something similar in Photoshop. Like in Illustrator you will need to choose the width of your site, the number of columns and the gutter size. There are tools on the internet which can help you with that. When you’ve found the right column and gutter for your website, copy the image and paste it in your document. Then grab the rulers and place each line over your gutters and columns. To make your columns visible you can create a square over your columns – no need to drag them down just yet. Select your square, then hold alt while you drag the square: a second square will appear! Place the squares over the columns and then press CTRL + SHIFT + ALT + E to merge the squares together. Now you can select the layer as a whole and drag the squares down. You’ll get something like this: grid-photoshop And that’s how you make a basic grid for photoshop. You can reduce the opacity and place a wireframe underneath it and start adding elements to your design. Handy dandy!

Some Come, Some Go

What an eventful week.

From Natt finally completed his six-month internship – hurray! I’m so proud! – to inviting our potentially new intern Kate for a demo day.

I’ve really looked up to Natt and seen him grow at WCB since the moment I joined. Knowing that he started from scratch, like me, and seeing how much he loves what he does and how good he became really motivates me to work hard, build my own career in web design and inspire others as well. So thanks Natt for always helping me out and cracking me up whenever I was pissed at my code!

And to celebrate his great accomplishment, Carl and Taya took us all out for an amazing company dinner! Look at this beautiful cake menu!

cake-menPick your favorite!
__________________________________________________________

This Friday we also invited Kate – a South-African mom of two little goobers – to come in for a demo day. Not only did she break our article-writing record – she was done before lunch! – but she was also very eager to sit with me and see how I build the Raja’s Fashions website. So I figured I’d teach her a thing or two about WordPress and CSS – and test my own knowledge – and to let her help me build a page for the website.

rajas-fashionNot bad huh!
__________________________________________________________

And to top it all off, Taya brought in a masseuse, who gave us all a half hour of heavenly massages!

massageIvan surely enjoys his massage!

We are so spoiled.

WCB After Hours

groupWe are an anomaly among our kind.

Normal people might go out and grab a beer after a long day of work.

We like to draw a holy Singh and perhaps consider starting a t-shirt line.

In other words: We’re a bunch of weirdos.

HolySinghHoly Singh in his final form imprinting his wisdom on us: “What did I tell you…”.

__________________________________________________________

I had asked Art to give us a class on how to create flyers as I want to expand my designing skills into print as well. So this week Lise and I joined his class and learned the basics of making flyers:

  1. Choose the size of your flyer – that’ll usually be an A5.
  2. Do your research: What does the company do? What kind of flyer should it be? We chose to make an ad for Staedtler’s whiteboard markers – just because they were lying around in the office.
  3. Think about the content – usually the company will provide its own content, but if not, you gotta figure out the content before you start designing.
  4. Find inspiration! Scan through sites like pinterest, dribbble, graphicriver etc. and keep step No. 2 in mind.
  5. Start designing on paper.
  6. And then in Illustrator, where you can add images, icons and fonts. Tip: you can find a lot of icons for free on iconfinder or freepik. Save them as an .svg for optimal quality.

staedtlerimgA good start for the Staedtler flyer! And we took our own picture for the header image!

And as you may have noticed, the basics for creating flyers are not that different from those for designing websites!

__________________________________________________________

This week’s photography class was a lot of fun too, our teacher Willem had arranged access to our neighbour’s garden – a beautiful green area, hidden behind their fence – where we could take pictures. This week’s assignment: portraits! So we took a lot of crazy pictures of each other.

But there’s also a lot you need to take in account when taking portraits, like lighting, camera setting, background and subject position!

For example, placing your subject slightly off-center eyes more naturally than exactly in the center.

guardimgHe sure has a soft spot for his stuffed animal!

Placing the subject slightly off-center also adds more dynamic – rather than a static, posed image. And a cute stuffed animal helps the subjects to relax and pose more freely!

It’s also important to place the focus of your camera on the subject’s eyes rather than the nose or any other part of the face – it will create a twinkle in the eyes that results in a livelier look.

Backgrounds should be neutral, or blurred – with a high aperture – to emphasize the subject. This picture is a great example:

girlfrogThe girl and her green frog really pop out from the background.

The gray background is neutral and not too busy; the girl and her green stuffed animal really stand out from the background.

But remember that taking a pretty picture isn’t that hard. The real challenge is to capture the story. A powerful photograph always tells a story.

Taking Pictures, Telling Stories

This week I’ve had the amazing opportunity to sign up for a photography class at WCB, and our first trip was to…Lumpini park – one of my favorite parks because of its beautiful calm and green scenery that just reminds me of my home in Holland.

lumpiniA tattooed man enjoying the beautiful scenery at lumpini park.

Our photography teacher, Willem – who’s Dutch too! – gave us a great lesson on the pillars of photography: Exposure, Focus and Composition. Although these pillars are very important, a good photographer will always try to find a story in the scene he’s about to capture – a powerful image always tells a story.

child-soldierA powerful image of a child soldier.

In the first lesson we discussed Exposure, and in particular ISO, shutter speed and aperture. Now, I had no clue what these terms were. Although I had stumbled upon aperture once or twice, Willem gave us a great explanation and good examples of what Exposure is and what to do when our scene is over- or underexposed. For example, decreasing the camera sensitivity and/or the size of the lens can help normalize an overexposed area due to a large amount of light. When a large area of the scene is filled with bright light, it might also help to change the metering function to, for instance, spot metering and focus on a darker area of the scene to make this area more visible.

All this made quite good sense to me, until we started to discuss aperture in more detail. Whoever thought of this logic was clearly drunk.

Aperture describes the size of the lens, the larger the aperture, the smaller depth of field – or the focal distance from one object to another – and vice versa. Using a small aperture, both objects can be captured in focus, but with a large aperture, only one of the objects will remain in focus while the other falls into the background – pretty cool huh.

eggs

In both images, the focal point is on the quail eggs, but with a larger F. (right) all the objects in the image are in focus, while with a smaller F. (left) the other objects get blurred into the background.

Aperture is measured in F. However, a small aperture is represented by a large F., while a big aperture is measured with a small F. – just why…

__________________________________________________________

This week I also learned a nifty little trick while working on the Raja’s Fashions project. For a while now, I had been trying to figure out how to decrease the opacity of a text box without reducing the opacity of the text itself. I had always thought that you’d need to create a separate div box, give it a background color, reduce its opacity and then move it underneath a text field – which works, but isn’t very handy: whenever I’d adjust the screen size, the text field and the box will behave like two separate elements, scattering all over the place, rather than a united element moving together.

A quick solution: open up your inspect element panel and give your text field a background color – if the given color is in hex, click on the little square and select the α value for the right opacity. The hex value will turn into rgba, and voila a background with decreased opacity but solid text.

Good to know!