Hugoware

The product of a web developer with a little too much caffeine

Posts Tagged ‘Design

Interface Design For Developers – Glossy Buttons

with one comment

In this series each topic will be split into two parts – First, creating the graphics using Photoshop and normally with a screencast. The second part will be a blog post on how to use the newly created graphics in a project — normally websites.

This screencast shows how to create a glossy, reusable button with Photoshop and then make changes to the colors, text and icons it displays. We also discuss adding a reflection to buttons by using a Smart Object. Additionally, we look at how to add text and change the color of the button.

Creating Glossy Buttons

[Watch the screencast]

Resources

Below are resources for the content created in this screencast. You can use the .PSD file to get the finished Photoshop file. You can use the .PNG file to create buttons with a different art program.

[Tutorial PSD file]
[Buttons.png]
[Buttons-No-Shadow.png]

Check back for the next blog post where we discuss how to use the buttons in a website.

Is there a topic you’d like to see covered in this series? Make sure to leave a comment with your ideas!

Advertisements

Written by hugoware

September 6, 2010 at 12:52 am

Interface Design For Developers – Introduction

with 2 comments

Simple is better when it comes to design. Adding a bunch special effects doesn’t automatically make an interface element better. Good design is normally very subtle and involves very few special effects (if any at all)

See what I mean?

However, a hint of gloss or a slight reflection for an interface element can make a plain website much more attractive (no, not System.Reflection, stay with me here…).

Design Tutorials For Developers

If you’ve ever seen my personal websites then you can tell I’m interested both code and graphics. I’m more or less one of those jack of a couple trades, master of none sort of guys.

So, this series of posts we’re going to discuss both how to create attractive interface elements and how to use them in our code – a little bit of both worlds in the same post!

I’ll be using Photoshop for these tutorials but I’ll try and use concepts that apply to other art programs as well. If you don’t have Photoshop then you can download a trial version.

The Tutorials

Below are previews for the tutorials I’ll be releasing the next couple weeks. I’ll also come back and add to this list as more come out.

Shiny 'Web 2.0' style buttons with HTML and CSS

Create a simple 'Post-It' note and then write dynamic text to the image

Extend the 'Post-it' note by creating a photo frame and change the subject dynamically

These should be a good start to but if you have ideas that you’d like to see then leave a comment or send an e-mail my direction.

Written by hugoware

September 3, 2010 at 11:57 pm

Almost Sorta Real Dynamic in .NET

with 8 comments

This post discusses the basics of writing your own dynamic type – If you’re interested in the finished code make sure to download the source.

The new dynamic keyword is a great way to create and modify a dynamic object in your .NET code – For example, check out this bit of code.

dynamic counter = new {
    sent = 0,
    received = 0
};
counter.sent++;

… Oh… wait… That doesn’t actually work…

That’s because even though you have an object declared as dynamic, it is still just the same old object it always was under the hood. Maybe not the dynamic utopia we were expecting. Seems like plain ol’ Reflection with a slightly cleaner syntax.

Bummer…

However, Microsoft was awesome enough to actually allow us to create our own dynamic types by simply inheriting from the DynamicObject class. This post looks at how we can create a semi-dynamic object by handling the binding methods ourselves.

[Source Code: Dynamic.cs]

Our goal is to create an object that we can add, remove and change values on the fly. It ends up being a little easier than we expect. Let’s look at the minimum code we are going to need to get started.

public class SimpleDynamic : DynamicObject {

    //contains the values to use
    private Dictionary<string, object> _Values = new Dictionary<string, object>();

    //handles getting values from our object
    public override void TryGetMember(GetMemberBinder binder, out object result) {
        //...
    }

    //handles assigning values to our object
    public override bool TrySetMember(SetMemberBinder binder, object value) {
        //...
    }

}

Note: If you downloaded the source code above you might be wondering why these examples don’t look the same. The source code is the complete Dynamic class while this post only goes over the basics of using the DynamicObject class.

In order to create our dynamic object we must handle getting and setting values. We can use a simple Dictionary<string,object> to hold our values until we need them.

//handles getting values from our object
public override void TryGetMember(GetMemberBinder binder, out object result) {
    return this._Values.TryGetValue(binder.name, out result);
}

//handles assigning values to our object
public override bool TrySetMember(SetMemberBinder binder, object value) {
    this._Values.Remove(binder.name);
    if (value is object) { this._Values.Add(binder.name, value); }
    return true;
}

Not much code, but now our dynamic object is a little more dynamic than it was before. We can now work with properties a lot easier.

//create the new object
dynamic simple = new SimpleDynamic();

//add and update some values
simple.red = "#f00";
simple.green = "#0f0";
simple.count = 10;
simple.add = new Action<int>(value => simple.count += value);

//and check the values
Console.WriteLine(simple.red); // #f00
Console.WriteLine(simple.green); // #0f0
Console.WriteLine(simple.count); // 10

//invoke methods
simple.add(5);
Console.WriteLine(simple.count); // 15

Of course this class isn’t that helpful since it’s only regular Dictionary without string indexes but it is interesting to see how you can make a ‘dynamic’ object with only a few lines of code.

As for the included source code, it has a few extra features that this class doesn’t have.

  • Use Anonymous Types directly to build out entire objects.
  • Support for the += operator.
  • Enumeration through member names.
  • String indexes (for both single and nested properties).

Here are a few examples the Dynamic.cs class can do.

//create using anonymous types (and nested anonymous types)
dynamic info = new Dynamic(new {
    name = "Hugo",
    age = 30,
    settings = new {
        color = "orange",
        homepage = "website.com"
    }});

//add values using +=
info.create = new { value = false; }
info.nested.value.allowed = 55;

//enumeration of properties
foreach(string prop in info) {
    Console.WriteLine("{0}: {1}", prop, info[prop]);
}

I’d caution against using this a lot in your projects, but it is really interesting to see the kind of control Microsoft has built into the new DynamicObject class.

[Source Code: Dynamic.cs]

Written by hugoware

July 15, 2010 at 12:32 am