Wednesday 29 May 2013

This 20-Minute Supercut Of Cinematic Video Game References Is A Saga


New Anita Sarkeesian Video Calls Out Gaming's 'Women in Refrigerators'


Saturday 18 May 2013

Oh Hey, It's a Naked Man on a Scooter, Carrying a Crucifix


It's not everyday you see a naked man riding a scooter with giant cross.


Warning: This article has content some readers might find objectionable.


Last month, Kotaku brought word of a Beijing man who ran through the streets nude while carrying a sex doll. Online in China, the images soon went viral, and one Chinese blogger compared the incident to a real-life Temple Run.




This month, the same gentleman returned; however, this time he was carrying a huge crucifix. According to Chinese social networking sites, he was once again spotted in Beijing's Wangjing area, which is known as the city's Koreatown and which also houses many tech companies.


The Chinese media even reported this latest incident by the "Wingjing Streaker". Besides the dash, there was also a buck-naked moped ride. Both with a giant crucifix.



Last night on social networking site Sina Weibo, a man Li Binyuan admitted that he was the Wingjing Streaker. "I've done this about ten times," Li admitted. "So far, only six times have been recorded and put online by spectators."



Photos of the Wangjing Streaker started to go viral in China last month.


Li, a graduate of the prestigious China Central Academy of Fine Arts, works as an artist in China. He's still young and is still trying to make a name for himself. But this isn't necessarily an art project per se—though, it certainly does have elements of performance art.



"At first, it all started because I was bored and this seemed fun," said Li. "Later, it just became something to do." Li said that he had hit a wall with his work and was frustrated. He needed a release, and for him, streaking fulfilled that.


"Every time I finish a run, I always check online to see what people online are saying about me," said Li. "The internet creates such a wonderful way to interact, and I really want to see what others think of this thing I'm doing. It makes conversation online."


Li's art can break the public and private spaces in arresting ways. For example, in 2010, Li had himself filmed on the subway in China as he brushed his teeth, washed his face, and then lathered up to shave his face with a razor. He even brought a bottle of water, a cup, and a bowl so he could gargle and wash up after he finished. All this occurred on a crowded subway. Onlookers either ignored Li or took digipics.



While there's probably no law against brushing your teeth or shaving on a train, public nudity is a crime in China. Li doesn't think what he did was wrong, adding that when people are stressed out, they need to cut loose. A Beijing lawyer named Liu Xiaoyuan is quoted as saying this is illegal, but added that since the incidents occurred at night (and perhaps didn't disturb the peace), criminal charges are unlikely.


After admitting he was the Wangjing Streaker, Li wrote online this was the last time he will run naked in public, saying, "I'm done. Bye-bye."


北京の韓国人街に「十字架を担いだ全裸の男」、深夜街を駆け回る姿が目撃される―中国報道 [新华网]


望京再现男子扛十字架裸奔 [组图]


一号线上 [东方视觉]


Eric Jou contributed to this article.


To contact the author of this post, write to bashcraftATkotaku.com or find him on Twitter @Brian_Ashcraft.


Kotaku East is your slice of Asian internet culture, bringing you the latest talking points from Japan, Korea, China and beyond.


via Kotaku

Friday 17 May 2013

This Model Truck Is a Japanese Arcade...On Wheels!


Spotted by Frankie from Hobby Media , this intersting "Game Box Truck" model is a mobile arcade. For my money, a vehicle with arcade games sure beats an ice cream truck!


Model's art is above, and here is a look at the acutal piece:






The 1/24 scale "Game Box Truck" is priced at 1890 yen (US$18) and will be out this June in Japan.


Check out more on Hobby Media. Links below.


Aoshima Game Center: il camion salagiochi! [Hobby Media]


Aoshima: GameCenter Truck - Fiera di Shizuoka 2013 [Hobby Media]


To contact the author of this post, write to bashcraftATkotaku.com or find him on Twitter @Brian_Ashcraft.


Kotaku East is your slice of Asian internet culture, bringing you the latest talking points from Japan, Korea, China and beyond. Tune in every morning from 4am to 8am.


via Kotaku

Yuko Shimizu's art is like a cooler version of your wildest dreams


You've probably admired the work of award-winning artist Yuko Shimizu before — her art has adorned some covers of Vertigo Comics' The Unwritten as well as some great book covers and illustrations at Tor.com. But when you see a bunch of her gorgeous work all in one place, it's pretty mind-blowing.


Shimizu posted a new portfolio recently over at Behance, showing her work illustrating everything from steampunk to lush fantasy to space opera — and it's all united by a particular design sense as well as bright, thrilling imagery.


Check out some of our favorite images below, and tons more at the links. [Yuko Shimizu at Behance, via Comic Book Resources]



The Melancholy of Mechagirl by Catherynne M. Valente, soon to be published from Viz Media’s inprint HAIKASORU.



Originally commissioned by NPR for a calendar image, later used for FUSE TV advertising and posters.



Genesis by Bernard Beckett published by Rizzoli Romanzo of Italy.



Steampunk! anthology edited by Kelly Link and Gavin J. Grant from Candlewick Press



The Future is Japanese , published from Viz Media’s imprint Haikasoru.



Beauty Belongs To The Flowers, a sci fi novella by Matthew Sanborn Smith, published on tor.com. Art direction: Irene Gallo.


via Kotaku

Wednesday 15 May 2013

Before You Start a Business, List Ten Ways You Differentiate Yourself


Before you pursue a project that you believe is unique, entrepreneur Johnny Earle suggests writing down a list of ten ways in which what you're doing is different from your competition.


While Johnny is talking about starting a business, the concept applies to any area of life where you need to become distinct from a crowd. Whether you're building a product, doing something creative, or pursuing a promotion, it's important to establish how you differentiate yourself, rather than assuming that your way is the exception to the rule. As Johnny puts it:



"In the beginning, it's very important to ask yourself... 'What are ten things that separate me from everybody else who's doing something similar?' Because everything in the world has been done before and it's all about how you recreate it and how you reinvent yourself."



In any competitive market, being different in just one way isn't enough. You may not be bringing a revolutionary shift to the table (and in fact, those are very rare), but take the time to consider how your product is different before you get too invested in something that will get lost in the noise.


Word-of-Mouth: 10 Ways to Stand Out in a Crowded Industry | Inc


Photo by Steven Depolo.


via Lifehacker

Tuesday 14 May 2013

Photoshop’s Role in a Web Design Workflow


The web has undergone some serious changes in recent years and the way in which the web is designed is changing along with it. Photoshop may still be the “go-to” tool for many web designers, but for some, Photoshop is no longer king. In this article, Ian Yates, Editor of Webdesigntuts+ will explain how Photoshop was used in the past, how it can be used in the future, and why.




What is it Good For?


Technically speaking, Photoshop is an application for manipulating imagery (forgive me for stating the obvious there) but it’s also packed with tools for building graphics from scratch. Shape, vector, type, fills and effects, all of these (and more) lend themselves very well to constructing graphic layouts.


Not too long ago, web browsers were incapable of directly generating these kinds of effects themselves, but they could display bitmap images perfectly well. In order to explore graphic design within a browser it was only logical to reach for Photoshop, create your visuals, save them as images and use them within a web page.


Gradients, shadows, patterns, angles; all easy to create with Photoshop’s tools – not too easy to create with anything else.


Building for the web was also relatively complex (far less streamlined than nowadays) so mocking up a layout in Photoshop was always going to be easier and quicker than battling with Dreamweaver. Why wouldn’t you design in a graphics application, get approval from the client, then actually build for the web? Today’s designers have grown up using Photoshop because it offered the quickest way to visualize a hi-fidelity design concept.


photoshop-and-web-design-kuhboomkuhboom.com: Densely textured web designs will have you reaching for the slice tool.

The Legacy of Print Design


Back when the web was an emerging medium there were no “web agencies”, so the task of crafting it fell to print designers. These guys did what was logical; they took their digital print design experience, values, techniques, processes and tools, then applied them to this brave new world. They effectively ported print design to the screen, so the workflow already existed:


photoshop-and-web-design-print-workflow

All that needed altering was the final output. As such, Photoshop witnessed the changes and went along for the ride, further rooting itself as the graphic designer’s best friend.


photoshop-and-web-design-web-workflow



What are its Limitations?


Times they are a-changin’ (as Bob Dylan said). The web is a different place these days and Photoshop’s role in the process of designing for that web is also changing. Why?


A big part of the issue lies in technological advancements which have driven huge change in web design over recent years. We’ve seen the internet grow from a library of static documents to an interactive pool of services and applications. Network providers have spread their fingers into almost every corner of the globe, bandwidth and speed have increased to science fiction-like levels. Internet enabled devices such as smartphones, tablets, even watches, are manufactured affordably and rapidly. All of this has revolutionized the way in which we use the web – and it’s drastically altered our perception of how we should be designing for it.


A Fluid Web


Print designers begin with constraints (the fixed dimensions of a page) then design within them. When first designing for the web this was also a logical starting point; establish a fixed canvas and work inwards. To figure out what those fixed dimensions should be, designers had to make assumptions about end user screen sizes. Very early on 800x600px was most common. Later, 1024x800px was the norm. Working to a grid of 960px made sense because it fit most screens (larger screens were rare, owners of smaller screens would just have to upgrade eventually) and was divisible by a range of column widths.


These assumptions were wrong then (forcing a user to adjust their browsing to your design?!) and are even more so these days. How big is a web page today?


photoshop-and-web-design-brad-frost From Brad Frost’s This is the Web

Back in May 2010 a chap called Ethan Marcotte wrote about a brilliant idea he’d conceived. Taking existing technologies and methods he proposed an approach “Responsive Web Design” which utilized fluid layouts (not fixed), flexible images (which grow and shrink with the layout) and CSS Media Queries (which allow layouts to change depending on the screen size and other factors).


With these ideas the web changed, irreversibly.


Thanks to Ethan’s concepts, web designers have come to realize that they should be thinking from the content outwards, not the page boundaries inwards (though it should be noted that this approach isn’t compulsory). We don’t know how big a web page is, so we need to design our content to fit into whatever boundaries it’s faced with. Think of web content as being like liquid; capable of being poured into all manner of vessels.


photoshop-and-web-design-liquid-content

Herein lies a problem for Photoshop. Photoshop inherently works to fixed boundaries. Shapes, type and objects within its layouts are fixed, whereas web pages increasingly aren’t. Producing a comp to present to a client used to be quickly achieved in Photoshop, but how can you effectively present a fluid layout as a static snapshot?


photoshop-and-web-design-tnw The Next Web as presented by mediaqueri.es

The Problem With Pixels – I


Typography is another great example of print designers trying to force constraints onto end users. Every user’s browser gives them the power to set their default type size; after all, some people prefer smaller lettering, whilst others might prefer an easier reading experience with larger type. By default, browsers usually set type at 16px, so unless a designer states otherwise, or a user alters the default, that’s how big body copy will be.


Print designers, however, have real difficulty in relinquishing this control. “How can you let the user define the size of the type?! Have you any idea what that will do to the rest of the layout?!”


Locking down the font-size within a web design (through CSS) will go a long way in preventing anything unpredictable from happening, but it’s hardly user-friendly. These days, it’s considered best practice to size page elements and typography using ems instead of pixels; relative units of measurement which are based on the default font-size. Therefore if a browser happens to have a different default font size the whole design can flex in response to that.


photoshop-and-web-design-ems

This flexibility, again, highlights the limitations of designing static comps in Photoshop.


The Problem With Pixels – II


Browsers are developing very quickly these days and images are no longer needed for many effects on the web. CSS is capable of producing accurate gradients, curves, skewed objects, shadows, alpha transparency (the list goes on) and this is just as well given the dawn of Retina screens. Retina displays (or more accurately: high pixel density screens) have really thrown a spanner in the works for web designers. Retina screens have twice as many pixels as normal screens, allowing them the luxury of rendering everything super-sharp. Anything pixel-based, however, is simply blown up twice as wide, twice as high, resulting in comparatively lower quality.


photoshop-and-web-design-retina

In order that websites retain their sharpness, designers are having to rely as much as possible on what the browser can render itself. In fact, the recent trend towards “Flat Design” is (in part) a reaction to this purely CSS-based web design.


All this takes an enormous chunk of what Photoshop does (producing bitmaps) out of the equation.


photoshop-and-web-design-flat-ui Designmodo’s Flat UI kit

Performance Based Design


As we’ve mentioned, the web has gone truly global thanks to the spread of mobile devices. It’s forced us to realise that we can’t know the circumstances under which our content is being accessed. We don’t know whether our end user is sitting on the couch with a Kindle, paragliding with an iPhone or running through the Gobi Desert with a MacBook Pro. We don’t know how big their screen is, what their processor is like and, equally, we can’t assume to know how fast their connection is.


We’re starting to realise that performance is a fundamental part of designing for the web. Again, images play a role in this. Every individual asset (be it an image, a script, a document, whatever) which is pulled from a web server is costly.



Instead of keeping files like images and fonts in a folder called “assets”, I’m going to rename the folder “liabilities”.


— Jeremy Keith (@adactio) February 18, 2013



Not only should they be optimized to be as small as possible, but they should also be as few as possible. Browsers are limited in the amount of assets they can simultaneously download, often to just two at any given time. If your web page holds hundreds of individual images they’ll form a bottleneck, ultimately delivering a negative experience to the end user.


This can be helped, by combining image files into single sprites, but (again) retina screens force some kind of backup plan.


Instead, effects are better achieved with CSS, icons can be embedded through web fonts, logos can be implemented as scalable vector graphics, all of which spells the end for the slice tool.


Doubling of Efforts


Back when the web designer’s workflow was effectively the same as print with the internet tacked onto the end, designing layouts in Photoshop was an integral part of the process:



  • Familiar tools meant relatively quick layouts.

  • Presenting static comps to the client was much the same as presenting print layouts.

  • Pixel-precision meant that measurements could be directly applied to the browser equivalent.

  • Actual assets were sliced from layout comps for use in the web page.


These days, with less of the final result relying on assets built in a graphics application, designing a whole layout in Photoshop effectively means doubling your efforts. Build it once to get an idea of what it will look like, then build it for real. Then throw the PSD away because it’s no use to anyone.


Adding to the Toolkit


Adobe were either resisting change, or simply trying to be accomodating, when they introduced a few web design features in CS6. The CSSHat-like CSS output panel enables you to grab code from your visually created page elements. They also made it possible to paste a hex color (copied from the browser) including hashtag (#ffffff for example) into Photoshop’s color picker without throwing an error.


Paragraph styles (a bit like in InDesign) were introduced to give more global control over typography. Lorem Ipsum found its way in as a standard feature and now you can even choose common device dimensions as document presets!


But we’re in denial here – there’s a big blue elephant standing in the corner of the room.


photoshop-and-web-design-elephant



It’s Time for a Modular, Flexible Workflow


What we’re actually looking at here, isn’t an application which fails to fit web design, but a workflow which is no longer appropriate. In fact, even before the web went all fluid and squishy there were fundamental flaws in the Photoshop web design process as we’ve described it. There was a tendancy to create pixel perfect renderings of web pages before building could even begin. And then, because of the obsession with getting everything 100% perfect in Photoshop, there’d be a similar fanaticism for achieving identical results in all browsers. It’s taken us a long time to realise that web pages don’t have to appear identical in all browsers!


One serious issue with aiming for perfection in Photoshop arises when the client gets involved. This workflow makes it all too easy to become stuck in an infinite loop of clients making pixel–pushing suggestions, inevitably losing sight of the big picture.


What’s needed is a more modular approach to web design and Photoshop can absolutely play a part in that. Consider first the planning stage; gathering of information and content, sketching relationships between areas of the website as a whole – a crucial part of this modular process, but best carried out away from Photoshop.


Wireframing takes the process further; laying out rudimentary interface elements, establishing visual relationships, hierarchy and basic interaction. Again, this isn’t a task Photoshop carries out very well, instead making way for applications such as Omnigraffle and Balsamiq, even Illustrator (and there are many more).


Photoshop lends itself far better to aesthetics. It can’t describe layouts fluidly, but it can explore colors, textures, individual element styles, typography, atmosphere and mood. Style Tiles is a concept suggested by Samantha Warren. They’re essentially Photoshop mood boards, but highlight a way of isolating and presenting the aesthetic phase to the client.


The next module in this workflow is prototyping; building basic, but functional layouts for the browser. And no, this isn’t Photoshop’s cup of tea either. In fact, Adobe is busily working on an alternative line of applications to help out here. Their Edge Tools aim to offer a familiar canvas interface, which outputs fluidly for the browser; ideal for rapid prototyping, but still very much a work in progress.


Each of these modular stages takes an aspect of the design process, isolates it and heavily involves the client, giving them plenty of opportunity to sign off on each stage without affecting the others.


Do note that this is a suggested workflow, nothing is written in stone where design is concerned and there’s often more involved than these general stages. Which leads me to my closing point.


photoshop-and-web-design-modular-workflow



Whatever Works!


Any design process is extremely personal and what works for someone else won’t necessarily work for you. There are plenty of people calling for an end to web design in Photoshop, campaigning for a browser-based workflow instead. The fact is, if Photoshop works for you, use it! At the end of the day, we’re designers – if we want to spend hundreds of man hours pushing pixels and polishing our Dribbble portfolio, let’s allow ourselves to luxuriate in that!




Further Reading


Interested in learning more about Photoshop and its relationship with web design? Take a look at the articles below.




via Psdtuts+

Friday 10 May 2013

Gordo encontramos una foto de tu primer cumple ….





Gordo encontramos una foto de tu primer cumple ….


via Tumblr

Write with Cats. Actual Cats.


Helvetica. Arial. Comic Sans (LOL!). These are some of the most famous fonts you can find online and in print. Let's add another worthy contender to that list: Cats. Yes, cats.


As pointed out by Japanese sites Togech and Weekly ASCII , the upper and lower case characters are called "Neko Font" (ねこフォント), which is Japanese for "Cat Font". The two cats that appear in Cat Font are named "Raizou" and "Mondo". They are adorable. The font is created from photos of these two furry friends.


You can write all sorts of things in Cat Font. Here, Japanese Twitter user @KeiichiSennsei wrote, "I love you". Because what better way to say that than writing it in cats?



And here is "I am a cat". Written. In cats.



So you can get a better idea of what Cat Font looks like, here's "A" through "D". Below are also some of the really interesting cat letters:



This is the Cat Font for upper and lower case "I", "R", and "Y". Looks like "R" is a half-cat! And aw, isn't "Y" so cute?


In the link below, you can type your own words in feline typeface, which just might be the purrfect font.


And in case you missed it, here is more of Kotaku's very important cat coverage: from cat cosplay to scary cat photobombs and why cats like sitting on keyboards.


Cat Font [via Togech via Weekly ASCII]


To contact the author of this post, write to bashcraftATkotaku.com or find him on Twitter @Brian_Ashcraft.


Kotaku East is your slice of Asian internet culture, bringing you the latest talking points from Japan, Korea, China and beyond. Tune in every morning from 4am to 8am.


via Kotaku