MIT’s new logo – with thousands of variations

Thought this was really incredible. Imagine 40,000 different print projects, all with a unique variation of your logo on them.

MIT logo

Advertisements

App Review: Adobe Ideas, Brushes and ArtStudio

I’m straying from our usual path but I have a good reason. I wanted to talk a bit about three of the drawing/painting apps that are available for iPhone and iPad.

The reason I see this as a relevant topic for a design blog is because it relates directly to what we are… designers. I’m sure most of you are like me, you come up with something, let it flow from your imagination, but can’t quit tinkering with it. That’s where these apps come in, they allow you to create, and in some cases, tinker with your ideas on the go.

The first time an artistic app really became mainstream was when Brushes was used to create a cover for the New Yorker magazine. Until then most people saw them as something fun to fiddle with but not something that should be taken seriously, like Photoshop or Illustrator. This particular cover, as well as successive covers and all the interviews and ratings usually tied with new technology, thrust Brushes to the forefront of the creative apps. It even won the Apple Design Award for 2010.

Despite the advantage of having a lot more facetime than either Adobe Ideas or ArtStudio, I have seen some fairly serious drawbacks to Brushes. That’s part of why I wanted to write this review for you. Let’s start with a short list of pros and cons for each.

Adobe Brushes
Pros:
It’s FREE
It’s made by Adobe, a company with decent tech support
Pre-loaded color palettes

Cons:
Not enough brush options
Layers are only available if you pay
No blending

Granted this is actually supposed to be a drawing program, not a painting program, it still falls a bit short of what we all know Adobe is capable of. I’m hoping they come out with something more along the lines of an app version of Photoshop or Illustrator, but this is still a decent first effort and one of the earliest of the drawing apps.

Brushes

Pros:
Nice variety of tool and brush options
Intuitive interface
Good color and opacity control

Cons:
Price – $5.99, which is steep for what it does
Slightly glitchy when it comes to touch sensitivity
No blend or blur options
Photo cropping is terrible

I bought this one because of all the hype. I have seen entire web galleries dedicated to nothing but Brushes artwork and have been following a blog for over a year now that is dedicated to one man’s Brushes art.

The color and brush variation is like butter and you can create some really incredible softened edges with it. This being said I have to mention that there is no actual blur tool. To get a blended look you have to endlessly adjust your opacity.

It does have layers, which we all know is incredibly helpful.

Photo issues are based primarily around having no image control. It crops any imported photos automatically and not necessarily in the most flattering ways. It would be nice to see an option for cropping and placing images.

ArtStudio

Pros:
Every option you can imagine in an app of only 4.8M
Offers a blur tool
Fairly easy to use for those with Photoshop and Illustrator experience

Cons:
Interface is not very intuitive and requires an opening page with a few instructions
Difficult to find what you are looking for
Tools can clutter screen needlessly

For the price ($2.99) ArtStudio offers a ton of features. In fact, it might be too many features. For those that ask “Why can’t they make an iPhone version of Photoshop?” well, this is your answer. There are times where you will have a side menu and the bottom menu open at the same time and this makes it very difficult to work on your stuff if you haven’t figured out how to minimize the menus.

There are three different types of menus including a “shake menu” that brings up options that could have been fit better into the main menu.

To be honest though, once you get beyond the learning curve, this one is fun to work with. It has features the other two haven’t even dreamed. It has built in layers, various image importing and exporting options, layer opacity change, several extra tools, the list goes on.

Also, ArtStudio has a great online gallery you can access from the app. You can post your art to it as well straight from the app so it leads me to believe that there is a good deal of community support for it, though I haven’t checked that out yet.

It’s a bit like a swiss army knife, well, one that has so many different pieces that it’s hard to fit in your pocket. Great to know you have so many options but a little difficult to use.

Common features:
All three have good color control
They all let you work with photos
All have opacity control on their brushes

All of the programs do what they do well with the tools they have. I wouldn’t give a strong negative to any of them, in fact I think your individual needs should be the major deciding factor. If you have no money to spend, then Adobe Ideas or the lite version of ArtStudio might be for you. However if you have a few bucks in your pocket and need a good portable paint program, I’d suggest ArtStudio.

If ease of use is your primary concern and you have the money but not the patience to learn a bunch of features, then Brushes is great. Plus you can find a HUGE amount of Brushes artwork online.

Hopefully this will help a little if you are trying to put together an ultra portable design studio. Happy creating!

UPDATE: Adobe has released an update with some really cool features for Adobe Ideas. You can check out my review of it here.

A word about the future of the blog

I am currently working on my portfolio site which will be at siteosphere.com by the beginning of April. Most of my spare time has gone into this so I haven’t been as diligent with the blog posts as I should.

I’m at a bit of a loss on where to go with the blog from here, but I know I don’t want to quit posting to it. It might be the sort of thing that I attach to my website and just run it from there rather than having it set up on wordpress.com. I will let all of you know if I decide to move it.

In the meantime, any specific questions that you have can be emailed to me at cobeyshaver@gmail.com. Also, if there is anything in particular you would like to learn about, drop me an email and I’ll see what I can do.

Thanks for continuing to use the blog. I really hope you have found it helpful.

Cascading Style Sheets

Cascading Style Sheets (CSS), are basically controls telling the browser how things should look. Anytime you see text with a specific typeface, color or size, it is usually controlled by a style sheet.

Embedded CSS
In it’s most basic form CSS is embedded into the HTML document itself. By default Dreamweaver will create it’s style sheets in the HEAD of your document. If you have your document opened in Split screen or Code view, there will be a line that looks like this, “style type=”text/css”” in angle brackets. This tells the browser that the information between this line and the next /style line should be used to set the appearance of text, objects or layout within the browser window.

As soon as you created your document and clicked on the Page Properties in the Properties panel, Dreamweaver set to writing these instructions for the browser to follow.

Page Properties window

code for CSS

As you can see in the image above, there have to be opening and closing tags to contain the particular styles used. This keeps the style sheet individual and prevents it from running directly into any other style sheets or lines of code.

External CSS
Having embedded style sheets for a single simple document is ok, however it can be difficult to manage when you are working with an entire site. In such a case I would use external style sheets.

The advantage to external style sheets is in making changes to the look of your site. If you decide to change the text color, with an external style sheet you only need to change it in one document. In contrast, if you want to change the color of your text and each page uses it’s own embedded style sheet, then you have to open every HTML document and change it in the HEAD.

To create an external style sheet in Dreamweaver, simply go to File>New, select Blank Page and under the Page Type window, select CSS and hit the Create button. Now even though we have a new external style sheet, it isn’t populated by anything.

If you already set your Page Properties for your HTML document, you can select and Command X the information between the style tags.

Select and Command X everything within the style tags

Paste the copied code into your .css document, then name and save the .css file (I generally name my initial style sheet “main” just so it’s easy to identify what purpose it serves).

Now we need to link your HTML document to the style sheet. Delete the style tags from your code… you don’t want things getting messy. Right click a blank area in your HTML document, NOT in the code itself though. One of the options you will get is CSS Styles. Highlight this and a dropdown will appear, select Attach Style Sheet. In the window that appears, click the browse button, then find and open your style sheet, making certain the Link radio button is selected.

If your HTML document hasn’t been saved, it will ask you to save it. Be sure you save it in the same folder as your style sheet. This will be your project folder and it’s a good idea not to let it get cluttered.

If you have successfully linked your style sheet then you are done.

Structure of a Style Sheet

The structure of style sheets is a little different than HTML. For one thing, every separate element is enclosed in curly brackets rather than angle brackets. For another, colons and semicolons are used frequently.

In style sheets, colons are used to separate an identifier and it’s specific style. For example, if you have an identifier for the font-family you want to use, you would separate that from the specific acceptable fonts with a colon. (font-family: Verdana, Geneva, sans-serif;)

A semicolon is used to identify the end of a particular style characteristic. Without the semicolon at the end of the line, your browser won’t know that it’s separate from the following line.

In the example above you will notice that there is a tag that specifies what we are working with. A general body tag will encapsulate all the specifics of the page itself, whereas one labeled “body,td,th will include specifics dealing with body text. There are many additional types of style sheet tags that will be helpful, but these are two of the most basic and most common.

Using an existing Dreamweaver Style Sheet

Go to File>New and the menu that appears will have Page from Sample fourth down in the left column. Open the CSS Style Sheet Sample Folder and inside you will find a variety of stylesheets you can start with. Some are basic, only giving the font family, whereas others will create a full set of styles for you. You might open a few of these to check out the differences and to get a feel for what tags link to different style options.

W3 Schools has some very good step-by-step articles over creating style sheets, as well as almost everything else that has to do with the technical side of web design. Check them out here for more information.

A final note that covers everything related to code… There are specific rules for each type of file. These rules have to be adhered to, otherwise you won’t get the result you would like to. Every colon, period, bracket, etc. serves a purpose so don’t leave anything out.

Focus of the blog

I’m hoping some of you still find this blog helpful. This blog was created for you, to help you in learning InDesign, Photoshop and Illustrator. However the focus has veered quite a bit from what it originally was.

Since this blog is for you, please let me know what it is you would like me to post about. It only takes a few clicks and maybe twenty seconds of your time so please give me a hand in deciding the direction we should go in. Thanks!

Save your history, take a Snapshot

This is an interesting feature that we all should get in the habit of using. If you open your History palette in Photoshop you will notice that as you work, things stack up fast. With only a limited number of states your History can handle (by default I believe it should be 20) it would be a good idea to start taking Snapshots of your work.

When I say this I don’t mean screenshots. Actually if you look at your History palette, at the bottom there is a small button that looks like a camera. This is the Create New Snapshot button. When you click it, at the top of your History palette it will add a snapshot that you can select later on if you don’t like the direction your image is going.

For example, if you are working hard to create an image that suggests how difficult life is in a wartorn country, but then get off on this kick of lightening the eyes and teeth, fixing the hair and removing blemishes from peoples’ faces… it’s easy to revert to how it was before if you have done a snapshot.

Unfortunately the snapshots won’t save with your file, so if you’ve already saved and closed your document then you are pretty much stuck with how it is, but it’s a great trick if you have a lot going on in your image and need to make sure you can get back to how it was before.