SilverZine is LIVE!

April 19, 2009, 1:28 am
Filed under: Design, Silverlight, free | Tags: 2, 3, Blend, Design, designer, Expression, graphic, graphics, information, live, resource, Silverlight, silverzine, Tutorial

logodark

Well it’s been pretty quite on AGkDesign.blog, but its for good reason! For the last few weeks, in between some crazy projects I have been working on, I have been slaving away to create SilverZine. It’s an on-line resource for Designers that are working with Silverlight. We hope to add heaps of awesome content over time and create a really great resource to help get people started with Silverlight and provide the more experienced Designers with some ideas and new techniques to try out!

And today I’m very proud to announce that SilverZine is finally live!!!!

Thanks to all the help everyone has given me and don’t forget to drop us a line over at SilverZine sometime

Thanks

Alex

… so thats what I did…

To create this effect just open up Expression Design and create a new document.

Create a oval shape which is much taller than wide. its about 400px high and 25px wide.

Next up, apply a gradient to your oval. We need to set the gradient to Radial

and it needs to go from black to black,

with the second stop of the gradients alpha set to 0%.

Should look at bit like this

Now we need to edit the gradient to create the effect we want by editing the gradient properties.

properties

I’m setting the height of the gradient to about 2.5%. (remeber to unlock the constraints between your height and width of the gradient by clicking the link icon in between them)

Ok now we just need to edit the shape of the oval to cut off half of the gradient.
Use the direct select tool to move the points and splines to create a straight line on one side.

And there you have it, a nice shadow breaker for you sites all made with XAML!

Another cool thing you can do with these shadows is, create a copy of your shadow, flip it and change it to white, this is called the Gina effect as coined by the guys at “from the couch”.

Thanks for reading, hope it helped and let me know how you go with it!

Alex

5 Comments

Using Complex Vector Shapes in Expression Design

March 3, 2009, 1:41 am
Filed under: Design, Silverlight, Tutorial, free | Tags: adobe, another, back, boolean, clipping, complex, compound, Design, direct, distort, divide, envelope, Expression, front, graphic, how to, illustrator, intersect, learn, microsoft, minus, msft, one, path, paths, remove, select, shapes, Silverlight, tools, Tutorial, vector

I just want to throw together a really quick post on how to create complex shapes in expression design.

There are heaps of sweet tools at your disposal to create the look you want and here’s how to use them.

2shapes

Here is 2 simple shapes I am going to use for the examples, with a blue gradient, corner radius of 20px and a stroke thickness of 5px

Compound Paths

compound

Compound paths take the existing paths and find the overlapping sections and remove them (the paths are un-altered but the shape is merged).

How to: Select both shapes and goto Object > Compound Path (or just hit ctrl+8)

Clipping Paths

Clipping paths remove anything that is outside the selected “clipping path”.

clippingpath

I have turned the top shape into a clipping path, so it deletes any part of the bottom shape that is outside its path, when you create a clipping path you are given the option on which path you wish to use as the clipping path.

How to: Select both shapes and goto Objects > Clipping path and select if you want to top or bottom shape to be the clipping path, you can also release a clipping path from here.

Intersect

Intersect is very cool, all it does is find the overlapping sections of the 2 objects and keeps it, then deletes the rest

intersect

How to: select the 2 objects, goto Objects > Path Operations > Intersect

Divide

This takes each section of the paths and “divides” them into parts.

devide

This is cool is you wanted to explode the object.

divide

How to: Select the 2 objects, Object > Path Operations > Divide (to detach each section just select each part and move as if they were separate objects)

Unite

Unite simply makes the 2 objects one. Removing any overlapping sections

unite

How to: Select the 2 objects, Object > Path Operations > Unite

There are 2 other options in the Path Operations menu which are:

Front minus back and Back minus front

These items simply remove one object from the other.

fmb

How to: Select the 2 objects, Object > Path Operations > Front Minus Back (or Back Minus Front)

And last but not least… the Envelope distort tool…

This doesn’t need 2 objects to be done, but it will work with multiple objects selected…

This will create a grid over your object, and using the Direct Select tool you can manipulate each point in the grid for some really cool effects!

envelope

How to: Select you object/s and goto Object > Envelope Distort, then use the direct selection tool to manipulate each point.

Hopefully with these tricks you will be able to get the most out of Expression Design and create some really interesting stuff.

Made using compound paths and clipping paths

Thanks

Alex

2 Comments

SDDN – Silverlight in a day!

February 23, 2009, 12:45 pm
Filed under: Design, Personal, Silverlight, photography | Tags: application, Blend, Design, designer, developer, Expression, graphic, melbourne, microsoft, msdn, RIA, SDDN, Silverlight, training, WCF, web

sddn_concept1

On Saturday I have the privilege/pleasure to attend the Silverlight Designer and Developer Networks – Silverlight in a Day Course, and let me just say, WOW! It was just awesome, the guys from SDDN and Microsoft teamed up to produce an awesome day of learning and free swag!

class

This was the first of hopefully many training days dedicated to Silverlight, and 200+ people applied for a spot, sadly though, there was only room for 40 people, which were drawn out of a hat.

So we all arrived at Cliftons for a 9.30 start and the day kicked off with an introduction from Jordan Knight, Giving a basic overview of the day ahead and any house keeping items that needed to be addressed.

First lab of the day: Introduction to XAML and Expression Blend with Mahesh Krishnan
Because the day was targeted at beginners of Silverlight, Mahesh gave a fantastic look into XAML, what it is, what it does and why its just awesome. He continued on with a lab on Expression Blend and how to use it to create projects and animations and all sorts of good stuff.

Mahesh Krishnan

Networking, data binding and media - Phil Beadle
This lab was focused at basic networking to WCF (Windows Communication Foundation) services, binding data to objects and media so we got to jump into visual studios (which isn’t my thing at all) and learn some basics which was really easy to pick up! The Media section of this was awesome too, Silverlight is just so powerful when it comes to media, its just not funny!

Phil Beadle

After that it was Jordan’s turn again to look into:

Templating, the VSM, more data binding and the HTML DOM Bridge

Which was a great hands on how to skin buttons using Control Templates and the Visual State Manager (VSM). This was really my sort of thing, and although there was probably one 2 other designers there, I think a lot of people benefited from learning this stuff. The next section was a more advanced lab looking at OneTime, OneWay and TwoWay data binding. (we had already skimmed over this earlier in the day as well). and then to finish off the day we rushed through the HTML DOM bridge and how you can call and edit HTML from Silverlight and JS and vice versa.

Jordan Knight

All in all it was a huge day of learning and I’m sure everyone who attended learn heaps of great things to get their silverlight journey started and well on its way.

Oh and the free swag they gave out! So many prizes!!!
Thanks to Microsoft, the SDDN guys had so much stuff to give out, t-shirts, Expression suite and visual studios and even one MSDN TS subscription worth 19k!!!! I pretty sure just about even got something to take home in the end!

And if you attended the day and are reading this, please do leave some feedback on what you thought about it all! The more feedback received, the more chance there is of it being presented in other cities and future events in Melbourne!

Shane Morris(Microsoft), Phillip Beadle, Jordan Knight,

More pics from the day here

Oh and one last thing, If your keen to express your interest in the SDDN for any reason or want to provide some feedback on it, info@sddn.org.au or visit http://www.sddn.org.au

Thanks everyone
Alex

Whole class being quized for free MSDN subs

3 Comments

Manipulating text in as vectors in Expression Design

February 20, 2009, 9:09 pm
Filed under: Design, Personal, Silverlight, Tutorial | Tags: adobe, anchor, Blend, convert, Design, direct, Expression, fireworks, how to, illustrator, learn, logo, MX, object, path, pen, photoshop, point, select, Silverlight, text, tool, Tutorial, vector

Manipulating text is really quite simple and you can apply these same rules in Adobe Photoshop or Illustrator and practically anywhere that can create vector graphics.

First step is to get a basic idea of what you want, if you wing it, you might have luck but a lot of the time is just looks like you broke the original font.

So in Expression Design, create a new document and create the text you want.

Try and get the font as close as possible to what you need, you don’t want to have to re-construct the entire thing.

Original text

I’m going to use ASD because, I’ll be honest, its the first thing I mashed when I hit the keyboard.

Now once you are happy with your text, its time to convert it to a path. Select the object menu up the top and click “convert object to path” or just press CTRL + SHIFT + O

convert object to path

Now once its a path, its just a normal vector, you can’t change the text anymore but you can select different points and manipulate them how ever you like.

Using your “direct select” tool you can grab each point and edit the shapes how you wish.

Other cool tools you might use are:

Add Anchor Point
Convert Anchor Point
Delete Anchor Point

All these tools are found under the pen tool fly-out.

Some other tips:

Holding shift allows you to grab multiple points
If you move them then press shift, you will be constrained to 45 degree increments when moving (great for keeping your lines straight).

You could use these techniques to create a rad logo or by adding this text over the top of some more vectors like in my other vector tutorial can make some other seriously cool stuff…

Thanks

Alex

3 Comments

My Blog, My Twitter and My Freelancing

February 20, 2009, 3:05 pm
Filed under: Design, Personal, Tutorial | Tags: analytics, blog, blogging, client, create, Design, free, generate, graphic, graphics, hits, increase, key, learn, links, market, marketing, SEO, stats, target, targetted, traffic, tweekdeck, tweet, twhirl, twitter, web, website

Over the past few weeks I have been on a little bit of a push with my design freelancing, trying to get my name out there a little more and spread the word about what I do and how I do it.

The way I went about it is looking at what I have already that I can simply improve on, and then I did heaps of research around this. It has improved my traffic massively, I have a lot more followers on twitter now and my site hits are up 10 fold. With that kind of exposure you can imagine what its doing for business around here.

First up!

MY SITE (http://www.agkdesign.net)

I guess the best place to start is with my website. It’s already there and just needed a little more direction and entry pages.

Your website should be the formal place for people to come check out your work, drop you a line/email and generally get a good idea of what you do and how you do it!

The first thing I did to my site was whip up a Silverlight page (http://www.agkdesign.net/silverlight), specific to any work I do with Silverlight, making sure to throw in plenty of keywords that I imagine people would be googling. This includes all the text, meta data keywords and alt text on the page. I did the same for my home page (http://www.agkdesign.net). E.G. the big image at the top with the overlaid text, even though the text is actually an image (therefore not readable by google or other search engines) I have put some mad alt text behind it which pretty much says the same thing as the picture if not a little more.

I will admit though, I have been a little slack on my site but any spare time I have is spent fixing this stuff up, and looking for ways to improve it.

My Blog (Your are here)

My blog is a great way to generate traffic and probably the strongest point of contact for everything I do. I started this blog about a year ago, just posting little bits and pieces of things I learn and create, and over time I started to refine my post styles and work out what people want to read. Again, it’s still only young and will continue to be refined throughout it’s life.

Tips to help your blogging

So First, If you don’t have a blog, GET ONE!!! it’s free! What have you got to lose?
Have some content on there to start off (maybe 2 or 3 posts at launch)
Post regularly (every 2 weeks or more if possible), I know it might be hard to find time, but it will pay off…
Make your posts count, don’t rush them out, look back over them when your done, add links to them, make the content strong and meaningful. Spend time to delete all the rubbish that isn’t needed.
Lists are always a winner when writing a blog. People love dot points and hate slabs of text.
Post links to other peoples blogs in your posts, they will be notified of this and in turn check out what you said about them.
Keep it social. You blog should be a social thing, write about your experience, don’t just advertise your company directly, show them something cool and how you used it on your lastest and greatest project.
Get involved. In the blog community I mean. Read other peoples blogs that are in the same profession as you, and then comment them with a link to your page. Most of the time they will check you out.

Just keep in mind a good blog is a massive point of contact and will generate lots of sales and traffic.

Check out this great vid from the guys @ “from the couch” on how blogging will change your bussiness here. (also hit them up on twitter @obox, they post some great stuff)

My Twitter (http://www.twitter.com/agkdesign)

A lot of people still don’t really know what Twitter is and it’s sometimes pretty hard to explain exactly how useful it is. Basically, its blogging with a limit of 140 characters. Quick, simple, and useful.

Imagine this, you have 50 people following your tweets, you say “Hey check out my latest blog on Silverlight + Link”, that’s 50 hits. Good start, but then those 50 people send it onto their friends, called re-tweeting (RT). Its pretty much an exponential marketing strategy, if your content is good.

Tips to get into Twitter.

Start an account – its free as well (so no excuses!) Go there now! (http://www.twitter.com)
I would suggest getting a Twitter client so you can post, and follow posts from your desktop while you are busy doing other things. Check out TweetDeck or Twhirl
Find some people to follow that you are interested in, most people link their Twitter from their blogs or websites.
Another good way to find people to follow is by lists people compile. 50+ Designers to Follow on Twitter is a great one, or just google to “designers follow on twitter” or what ever your into.

Alright so now you have a good list of people to follow.

Now all you need is people to follow you

Post about what your doing, people follow the stream and pick up on keywords. “I’m working on some new Silverlight stuff”, people see Silverlight and are interested so they follow you
Get involved with all the people you are following, by simply adding @theirname, they will see the message even if they aren’t following you. Just don’t spam them, they will just get angry.
Spread the word! Re-Tweet other peoples posts/links that you found interesting. People you re-tweet can see this and are usually pretty happy about the fact you liked their stuff and re-posted it for them. All you need to do is copy their post and put RT @theirname at the front. You client will most likley have a button for this too.
When you post a new blog, tweet about it a few times, don’t just spam it out though, leave a fair few hours in between and change your tweets, “hey I just blogged about Silverlight + Link” and then “my blog on Silverlight is doing great thanks everyone + link”.
Remember your followers are from all over the world, so time zones matter. Do some research to hit the key markets/countries.

Ok, so that should be plenty to get you started on your web/social marketing strategy. Just remember to try and be yourself, not a corporate business, people will connect with you better.

And last of all, link them all together, connect your blog to your website/twitter and your website to the blog/twitter as well, and use your twitter to constantly promote everything, just don’t spam! that’s not cool.

I hope this has helped a bit, and would love to hear about how you have increased your traffic in someway.

I would also like to thank all the bloggers out there who have helped me learn all this great stuff!!!

Thanks!

Alex

3 Comments

Blogroll

Twitter Feed

Flickr Photos

… so thats what I did…

MY SITE (http://www.agkdesign.net)

My Blog (Your are here)

My Twitter (http://www.twitter.com/agkdesign)