Skip to content
Thrashing Code

Composite Thrashing Code

Adron's success in misadventures of thrashing coding and calamity!

  • About…
    • My Docs
    • Curated Things
    • Contact
  • Events & Speaking
    • Speaker Details
  • Twitch
  • YouTube
  • The Expanse of GraphQL

Tag: graphic design

Windows 8 Logos, Badges & Splash Screens of Riak

As I’ve started working on a Windows 8 project here at Basho, there are a few pieces of collateral that help out to bring some branding and appeal to the application appearance. The first two things to grab if you want build a good looking Riak + Windows 8 application are the assets for design.

  • Basho Design Assets : This includes several transparent images for the Basho & Riak, Riak CS and Riak Enterprise logos. Toward the bottom of the page there are also a number of Bashomen that you can download.
  • Windows 8 Store Design Assets : This page includes a lot of downloadable Photoshop & other design assets for putting together a Windows 8 user interface and experience.
  • Windows 8 Design Guidelines : This page shows how the interactions on Windows 8 are supposed to be used, developed around and what their best use is.
  • Windows 8 UX Patterns : A sampling of UX patterns for Windows 8.

Design Assets

To check out the design assets I’ve put together I’ve created a github repository junction_design_assets. In this repository are all of the Adobe Photoshop *.psd files for each logo, wide logo, small logo, store logo, badge logo and splash screen image for the upcoming application. I’ve also attached an Apache 2.0 license to this for use by others. All of the images created had a transparent background, and are set to display against a black or other dark background.

Here’s a quick intro where all of these design assets go, via Visual Studio 2012. The first step was to create a good splash screen, as defined by the Windows 8 guidelines for images at sizes of 1116x540px, 868x420px and 620x300px.

Setting up the Splash Screen (Click for full size image)
Setting up the Splash Screen (Click for full size image)

A: Open the Package.appmanifest file and the designed that is displayed above will show a screen used for editing the file.

B: In this case I changed the background color to black since I created all of the images to display on a dark background. One can’t get any darker than the darkest black, and this is that black!

C: When you click on the elipsis to upload each of the images it will upload the image to the Assets folder within the project. With that in mind DO NOT manually put the images into the project. Use this screen or you’ll end up with all sorts of headaches.

Also important is the default SplashScreen.png that is put into the Spash screen: text box. Don’t fill this in first, instead click each ellipsis under each splash screen image size and select each image for each size. The odd thing is (one of those completely non-intuitive things) is that the Assets\SplashScreen.png file doesn’t actually exist in the Assets directory, but is instead created somehow through pixie dust magic and added to the project. This will be the same for other sections of the Package.appmanifest file settings and logo images that are to be added. So remember to NOT change this but to instead upload all of the other images required first.

The second step then was to get a good logo as defined by the guidelines at 270x270px, 210x210px, 150x150px and 120x120px. For this I went with the Riak Graphic Logo with images as shown at the different sizes.

Adding the Logo (Click for full size image)
Adding the Logo (Click for full size image)

Next up is the Wide Logo…

Wide Logo (Click for full size image)
Wide Logo (Click for full size image)

The Small Logo…

Small Logo (Click for full size image)
Small Logo (Click for full size image)

…and the Store Logo.

Store Logo (Click for full size image)
Store Logo (Click for full size image)

This is the first step, which is where I’m at so far with this application. The application is also available with an Apache 2.0 license with the code on github. If you’d like to jump into the code and help me build this application please feel free to reach out to me twitter @adron or hit me on Github @adron.

45.522405-122.684155

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • Click to share on LinkedIn (Opens in new window)
  • Click to share on Reddit (Opens in new window)
  • Click to share on Tumblr (Opens in new window)
  • Click to share on Pocket (Opens in new window)

Like this:

Like Loading...
Posted on August 9, 2013September 6, 2013 by AdronPosted in .NET Bits, How-to, Junction Project, Metro UI, Riak, Software ProjectsTagged graphic design, logo, metro ui, riak, riak logo, tablet, tablet application, user experience, user interface, windows 8, windows 8 ui. 6 Comments

Recent Posts

  • Normalization in Relational Databases
  • Relational Database Query Optimization
  • The Keys & Relationships of Relational Databases

Follow Composite Thrashing Code via Email

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 301 other subscribers

Blog Feeds

RSS feed RSS - Posts

RSS feed RSS - Comments

Search Composite Code

Composite Thrashing Code Archive

My Upcoming Events

No upcoming events

Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Our Cookie Policy
 

Loading Comments...
 

You must be logged in to post a comment.

    %d bloggers like this: