Work: Sommerles

4th June 2014

blog_image_sommerles

Sommerles is launched and it’s been so much fun taking part in this project! :D It’s main goal is to promote children in Vestfold, Norway, to read as much as possible in the Summer holidays, and win prizes and take part in weekly challenges. Three months ago, we started making Sommerles a reality and we’ve worked with such pleasant librarians and people (Clare’s Norwegian has also improved). As we are lovers of reading, this project was exactly our cup of tea :D

By making the reading campaign more of a game, we introduced achievements, avatars and levelling up to the site, and leaderboards to compete. The basic ideas was presented by the client themselves, and we built on this to make their dream a reality.

We focused on making a design for children along the theme of viking/norse mythology, an awesome project right? :) After designing the mood board for the project, we planned the design and system behind the site. A lot of management of thousand of books in the system meant Christer was working hard, to make it handle all the data, and make it easy for all the librarians to use the admin area too.

As all children have their own profile, we wanted to add digital achievements to make it more rewarding, and what better avatars than to use norse mythology. We picked icons such as Draupnir (Odin’s ring), Nidhogg (Who gnaws at the roots of Yggdrasil), Mjölnir and the list goes on.

1_icons_large

It’s been three months dedicated work, but every minute has been fun :D We couldn’t have asked for a better project, and a happier client.

↳ See the website here: http://sommerles.no


→ leave a comment

Sommerles

15th May 2014

sommerles

We’ve been a bit quiet the last few months, so we wanted to share a little insight into what has been happening here at Snuti HQ. Since February of this year, we’ve been working hard on making Norway’s first online library game for the summer holidays, by making a responsive website with a viking/norse mythology inspired theme.

It’s almost the end of our 3 month’s development and we were able to show off the website to the librarians in the whole of Vestfold county today. We were very proud to show off sommerles.no as we’ve put a lot of time into creating a design and system that will be inspiration for children and engaging.

Sommerles (Summer reading) is all about inspiring children to read, by making a game out of reading and participating in the library activities. The campaign will start the 1st of June for children in Vestfold and will end on the 1st of September. We’ll be updating the blog to tell you more about this project and the process very soon :)

It’s been such a pleasure to work with the coolest library employees in Norway and creating such a unique and inspiring project together :)


→ leave a comment

Kids & Coding

25th March 2014

template_for_code_snippets
Two weeks ago, we held a lecture at our local library to teach adults how to use a program called Scratch, to help teach children (and grown-ups, because it’s a lot of fun) about computer programming.

Scratch
Scratch is a brilliant flash application, where you can create what you want and let your imagination go wild. Instead of “writing” computer code, you piece it together like Lego, but it uses the same logic and way of thinking as more traditional computer code. You can create animations, applications, games, presentations and even some fancy art! Scratch is a great way to teach children coding and is a brilliant stepping-stone in teaching the importance of computer programming to children.

Why is it so important to teach children computer programming?
“Kids are tech wiz’s” we often hear, but that’s rarely the case. They know how to start the engine and drive the car, but do not understand how the engine works. When they are asked how to fix something on the computer that they have not done before, they find it difficult and can get easily distracted by social media (the easy way out).

Most people these days will take their car to the car mechanic if it breaks down, but it didn’t used to be that way. Up to a couple of decades ago, the majority of people who owned a car, most likely knew how to fix it. As cars developed, they became easier to drive, more comfortable to use, but also more advanced and intricate in their technology. When you open a car bonnet these days, you don’t see the engine any more, you see a fancy plastic surface, and a little label saying “Oil” with an arrow.

The same is happening with computers. As we progress onto using a tablet/computer, we are learning how to push buttons without understanding the underlying technology. Even for a computer-literate parent, we often repair and fix the problem for them, instead of letting them figure it out themselves. In essence, computer literacy is having the ability to tackle problems that you’ve never encountered before.

We are creating a generation of people who know how to use a computer, but don’t have a clue about how they work. Software is becoming more locked down, and when you open the “car bonnet” you only see a label saying “Oil”.

The future
There is one major difference between software and cars and that is the Internet, which offers all of the tools and knowledge you would need to build or understand programs! Understanding how software is made gives one a deeper understanding of the computer’s method of thinking, and will allow you to tackle common computer problems in a new way.

References:
Kids Can’t Use Computers…
Code.org


→ leave a comment

Spring around the corner

10th March 2014

f449d116bcc511e2a07e22000a1f9a28_7

Spring is just around the corner and we are very much looking forward to the greenery coming back. It might be a little bit too early to be expecting a spring in Norway, but let’s be a little optimistic :D We will start going back to our regular routine of regular hiking trips into the forest of Horten, to explore the beautiful scenery with the camera and the two little dogs. With all the snow we’ve had the last 3 months, it will be nice to see the forest come back to life again, even if the photo above is from last year. One of our friends in Norway has spotted the true spring appearing in Norway (http://instagram.com/p/lUHY9TiZJo/)

With more forest walks in Spring, we find it helps a lot when it comes to our inspiration and creativity and we are planning to start a little photography series, here on the blog, all about Nature and Wildlife.

What do you do when your looking for inspiration? Go for walks, run or read? :)


→ 2 comments

Speed up your workflow using Photoshop Generator

3rd March 2014

speedupworkflow

When designing for games or web, you often spend a lot of time exporting files. Slicing your document, saving out different layers and resolutions, is taking your beautiful design apart just to save it!

Basically “Generator” is a Node.js platform which was introduced in Photoshop CC in the September 2013 release. It can run many plugins, as well as write your own, but so far Photoshop CC only comes with one plugin pre-installed called “Image Assets”.

By using “Image Assets”, all you need to do is give a layer or group a file name and it will automatically save it out in the file format you specified.

Here is how:

  1. Have one of your lovely files open, or create a new one.
  2. Go to “File ➝ Generate ➝ Image Assets”. This will only activate the plugin.
  3. Name one of your layers or a group “myLayerName.jpg”.
  4. Now you will find a folder called “myDocumentName-assets” next to your PSD file (or on your desktop if you have not saved your document yet). In there, you will find your layer or group exported as a .jpg!

Note: This plugin will be active on the file until you disable it (repeat step 2).
Tip: All exports are trimmed based on transparent pixels. To avoid this you can create an empty mask on the layer/group and the export will be the size of your mask instead.

But wait, there is more! You can resize, set the quality and do multiple exports, all at once, by following the naming convention below:

[Size] [MyFileName].[FileType&Quality], (repeat)

  1. Size can be written like 200% or 100×200 for pixel accuracy
  2. File types are .png, .jpg and .gif (and .svg in beta)
  3. The file type and quality is written like this:

.png (no quality set, will default to .png32)
.png8
.png24 (Same as PNG-24 in Save for Web, no transparency)
.png32 (Same as PNG-24 in Save for Web, with transparency checked)
.jpg (no quality set, will default to .jpg9)
.jpg7 (number between 1 to 10)
.jpg70% (number between 1-100%)
.gif (no options)
.svg (In beta)

Examples:

Background.jpg10
↳ Will result in a full quality jpeg.

600x200 banner.png
↳ Will resize and stretch to fit “banner.png”.

Logo@2.png24, 50% Logo Logo.png24
↳ Will result in a 24 bit png “Logo@2.png” file and another one called “Logo.png” at half the size.

Should I still use “Save for web”?
While the Save for web feature is not obsolete, as it has more features, the “Image Assets” plugin most certainly will save everyone a lot of time. We have been doing a bit of testing with the “Image Assets” plugin vs “Save for Web”. It seems that the “Image Assets” plugin is great for prototyping, but “Save for web” will give you full control of which scaling algorithm is used and file options. From our test, the “Image Assets” plugin using the file name .png32 gives the same file sizes as PNG-24 with “Transparency” checked and “Metadata” set to None in “Save for Web”.

Source:
http://blogs.adobe.com/photoshopdotcom/2013/09/introducing-adobe-generator-for-photoshop-cc.html


→ leave a comment