Eraser and Brushes

My first attempt of using eraser instead of a brush. For this technique you draw a basic shape and then use eraser to give it detail.

The tree has 4 layers - first I drew a blob of the middle green shade. Then set the eraser to vary in size based on stylus pressure from 1pt to 3pt and kind of deleted parts where branches would be seen. It was pretty ugly. Then with a blob brush I drew the trunk and the branches, made it azure with the eraser, put that layer under the green. Was still ugly. Drew a dark green shape, placed it between the two, made it azure with the eraser. Finally drew the light green with a blob brush on top of everything and used the eraser again.

The ground was done the same way (2 layers - azure dark on top, lighter solid shape behind). The grass was drawn with a brush with same settings as the eraser. Gradiented the background, added mountains, added the frame and the 'stars'.

The fun of this technique is you draw very generally and liberally and in very broad terms. And then with the eraser just make it azure. It's rather simple and easy to do. What's neat is the same can be achieved with a brush - just then you have to be good at giving it a general shape. This way instead of growing your drawing you take away from it - it's subtractive. But because you have layers and isolation mode it's super-easy compared to say subtractive sculpturing.

The stars being on top of the frame but behind the tree give the graphic some depth.

Foxies

Made a graphic for my mom for International Women's day (March 8).

The writing actually has a couple pieces to it - two layers of the same text (one with a stroke with flowery endpoints, and the other with stroke of none, outer glow, drop shadow), and two groups of flowers (made with transform tool - easy stuff). All flowers on the foreground were stars with all of their anchors converted to curves and readjusted a bit.

I had a different idea for the background but it had to be something happy and with flowers. Took me probably just as long to draw and color the foxes as everything else. And I still kind of don't care for anything but the foxes.
 

Implementing RSS feeds on a website

Nowadays, regardless of a company or a person wanting to have a personal homepage they will still have a facebook page, twitter, blog, or something else - somewhere where they have been and will be posting updates and news about their product or services. That is also referred to as news feed or RSS (Rich Site Summary).

So, it makes a lot of sense to take that feed (or feeds) and implement them on the website under News section - this way the client won't have to worry about updating their website and can just keep posting where they are used to - everybody is happy - client doesn't need to learn anything or do anything and proceeds with his usual routine. And less work for you as a developer/webmaster - you don't have to go update the content.

Most websites make it pretty simple - you just find the RSS button and get the link. Facebook however does things differently. You can go here:

http://developers.facebook.com/docs/reference/plugins/like-box/

by default data-stream=true which means you will get all the posts feed. And you can adjust the width... but it's still not really good for most case scenarios. The result is shown right there next to the inputs - It looks like a scrollable iframe, you can't get rid of the borders or change anything about the styles.

Instead you can use this link:

http://fbrss.com/

It will give you lists of all the people you friended and all the pages you've liked. So go find the page you were looking for and click the link on the right side where it says "RSS some page". Great. Now copy the address from the address bar - just put it in notepad or somewhere else for now.

Now go here:

http://www.jquery-plugins.net/FeedEK/FeedEk.html

As you could've guessed from the link it's a jQuery plugin. Download it (will be a  .rar - you will need a 7zip or a similar program to open it. There is a link to a free 7zip program right there on the page).

Unzip it. Put the JavaScript file into your javascrip folder and include it on your page, and do the same with the stylesheet - or if you already have a stylesheet just copy-paste the styles into your own file (you can do that with the js file as well). They are very small and lightweight. Make sure to have jQuery included (which you should regardless of what page you're making...) and it must be 1.9.1 version or higher.

Copy-paste this code in the <head> ... </head> portion of your page preferably right before the closing </head> tag.

<script type="text/javascript">
        $(document).ready(function () {
            $('#divRss').FeedEk({
                FeedUrl: 'http://rss.cnn.com/rss/edition.rss',
                MaxCount: 5,
                ShowDesc: true,
                ShowPubDate: true,
                DescCharacterLimit: 400
            });
        });
    </script>

Go get the URL you pasted into your notepad at the beginning of this. replace the URL that appears in red with your own (the one in notepad where I told you to paste it ;) ).

And now wherever you want on your page the feed to show just make an empty div with the correct id:

<div id="divRss">
</div>

You can mess around with styles and parameters, add or remove stuff and customize it to your liking - I'm not explaining that - you will figure it out on your own :)).

This will work anywhere literally - your page can be a .html. So, even if you have the smallest hosting package out there this will still be usable and will work just fine.

Of course, if you know PHP or some other server-side language you can make it even better. There is a pretty good tutorial here:

http://nouveller.com/web-design/how-to-easily-display-a-facebook-page-feed-on-your-website/

If you do it with PHP you can easily get all of the posts and paginate it and make it pretty and put it in the format you want but if you want something small and easy to do the one I described should be sufficient.

Seamless Patterns for Web

Illustrator CS6 comes with an excellent pattern making tool - it takes care of all the overlapping and gives a lot of flexibility for your tiling options. The patterns will be completely seamless.

For example, this is the original piece that I made for the pattern:

This is the pattern creation / editing tool.

It has a couple modes for tiles - Grid, Brick by row, Brick by column, Hex by row (the one used here), Hex by column. The tile will have different bounds than the actual swatch - I'm displaying both here - the hexagon is obviously the tile bound and the blue rectangle around it is the swatch bound.

You can move the actual pieces around, resize them and do all kinds of nifty things. Once you play enough you save it.

The problem is it will save the pattern for current file. It's not a big deal since you're saving it as a swatch in the current file, and any swatch is accessible in any other file - you just have to import it. Just annoying a bit - Would be great if you could just save your own patterns as a swatch and be done with it.

That's a small problem to have and it has maybe not perfect but still a solution.

Now, problem 2 is a lot bigger - you can't save your actual pattern as a file or output it for web. So basically you're bound to using it in Illustrator files only... and if you want to save it for web you have to do it manually and the old fashioned way. It's not too bad if you're using a Grid mode. If you chose Hex mode then well good luck.

After reading on the subject on blogs and forums I decided to try one thing.

I dragged the pattern from swatches onto the artboard, ungrouped everything, deleted unnecessary objects, turned the pixel view on, added 4 guidelines that would contain the piece that I needed, and resized artboard to the rectangle defined by the guides. It was not fun but well it worked and I didn't get any white spacing or overlaps.

Second time I noticed one of the rectangles created after I dragged the pattern onto the artboard was exactly the swatch size (at least so it seemed to me). So I ungrouped everything and fitted the artboard to that rectangle. I had to readjust the artboard though it was 0.3px to the left for some reason. Just zoom in all the way turn the pixel preview on and make sure there are no lines or anything.

Now, some people were recommending using the tile size which would work great unless you got funny measurements like 100.2807px or if the tile and swatch sizes don't match.

Hopefully someday Adobe will decide to have pity over people with this problem and put a feature in for saving the actual pattern. One can dream.