Here is where Ectomachine came in. What we proposed is having 2 roles for members. Either be a Seeder or a Sprowter. The idea of the site would stay the same however with a fun theme of posting a job would be ‘Planting a Seed’ and doing a job would be ‘Sprowting a Seed’. With this very simple ideology the creativity just kept rolling and sprowty was born.

So now we had the name, the concept, and the site architecture. Now it was time to brand sprowty.

First, just like every logo we do, we started with some rough sketches. Some say sketching the idea of your logo is always the most valuable and important part of creating a good identity piece. It allows you to explore options and remove yourself from the computer entirely to focus on the sketching of ideas and really flesh them out. Now that the sketches were done I picked the top 3 that I thought fit sprowty the most.

My first instinct was to go with the budding seed. So I grabbed the sketch and went straight to vectoring the logo. Piece by piece it was starting to take shape.

For a solid presentation to show the client I explored a quick color option and went through some nice typefaces until I landed on a font I thought fit the theme. There had been no customizing to the type yet but I wanted to get the foundation.

After having the first concept done I moved straight to the second concept. This concept derived from the first sketch of the ‘S’ ambigram with leaves on each end of the S. During sketching I wanted to steer clear of a traditional S shape so here is what I ended up with. Also the ambigram shape looked a little lonely and stagnant by itself so I encased it in a circle and it really gave it a more balanced feel to it.

Again I found another font that I felt went with the theme of the brand and had good harmony with the ‘S’ symbol. This time I started customizing the type and spacing to get the feel right. I also threw in some quick color for good measure. At this point I felt that things were really starting to shape up and had almost abandoned the seed logo mock because I felt so confident in this concept.

I presented both options to the client and the feedback was positive on both but the overall decision was to continue on with concept 2. I wholeheartedly agreed, except with this next round the client wanted to explore a thicker ‘S’ shape and bigger leaves but still keep the ambigram idea. I knew I didn’t want to change it too much but rather enhance it from the original idea. Here was the outcome:

I was most confident in this version of all the concepts and really thought it encompassed everything we were after. Strength, Simplicity, Fun, and Memorable. There was only one thing that didn’t feel quite right with this version. The circle. So I simply removed it!

Now it was time to add the new symbol with the customized type. I reverted back to the same customized type I used for concept two and did a few new spacing adjustments to the letters to really get the feel right. I presented this finalized piece to the client and we both knew we had ‘The One’.

Now it was time for some color options for the brand as a whole. I really wanted to focus on a kind of 70s Technicolor vibe but also incorporate colors that come to mind when I think of farms. Yellows, greens, browns, and creams.

After going through more greens than I care to remember I landed on one that I thought was perfect for our logo.

So that’s the breakdown of the sprowty logo. We hope you enjoyed it and be sure to look out for a special look into the site design in the next coming months. Below is the logo mixed with some of the site elements and a quick stationary example.

First we will want to download the source files, simply click Download to download the .zip file.

Below is an image of what we will be creating

1. Well to start off, lets look at the basic print aspects associated with this poster job. Posters are often, or commonly, 11″x17″ …so we ought to set our canvas parameters for this size. However, lets give it at least a .25″ inch bleed, so add a .125″ buffer to each side of the poster. Of course, we also want to work at 300 DPI. Now, mass printers often run all their prints in CMYK, but it is relatively difficult to work in CMYK layers, so we’ll work in RGB till we have a finished design, then convert to CMYK.

2. Now that you have your canvas (which may be white, depending on your preference settings), lets pick a color. I’m going to go with a random one, a raw pea or dirty lime green color. not the most comforting of colors, but why not. let’s be edgy and grotesque.

3. Next up, a healthy gradient running a nice, ghastly blue-grey birthed from the warning signs of an oncoming storm into a particularly vile green color of choice. Let’s use a gradient fill that is just the blue color going into a transparency of that blue color rather than the white transparency photoshop automatically supplies you with in most cases.

4. Lets grab a photo of choice, in this case, the one supplied which i shot randomly one day.. it has some decent color about it.. go ahead and drop it in there. Now the file i provided you with, I added a bit of black to the top of it to make up for some empty space it created. Now, if you just dropped it in there, what would be the point of the background colors we mustered up? well, go ahead and set that photo layer to “hard light” in the blending mode drop-down menu.

5. Now as you can see in the two screen shots above, a good bit of the color is blacked out in a portion of the photo.. create two layers, and shade in some more black color space. the first layer, set the blending more to soft light, and leave a good amount of the blue color visible overhead of the plant. for the second layer, set that to normal, and halo the black in a good bit more. This way we create a bit of depth and “spotlight” to the image.

6. Here we feed the poster a bit of texture. The texture you’re provided with is an edited version of a photo i took of bubbles in a bathtub believe it or not. This texture can similarly be achieved with spray paint as well. Anyhow, set this layer in appropriately and place its blending mode in “screen.” Now, you may want to erase, burn, or mask out any areas that you feel are a bit over the top for aesthetic stake.. or you may want to add more in with the cloning tool.

7. Now, with using the same blending mode, Screen, drop the other scenic photo into the upper negative black space of the poster.

8. In this stage, we drop in a layer of bland yellow and set the blending mode to “color” for the desired monochromatic effect, but we’ll need to mask out with a moderate and opaque brush setting to allow some of the base color to come through as seen in the screenshot.

9. For the added vintage look, a reddish brown layer set to “lighten” will be used to replace the darker areas of black.

10. To give the upper portion added glow and highlight, we’ll put in a a gradient layer of orange to black, and set that to “screen” to allow the orange fade
through.

11. We’re getting close to completion, and with that being said, lets work in some additional design and color traits. Using the circular marquee tool, create a rather large circular area to which we brush in some light colors. Play with the opacity of the brush a bit to gently work in the highlights and hues. Also play with the blending modes to get it where you want it to be.

12. Here I threw in a border, the logos, and some text. Again, play around a bit with masking, blending modes, and layer order to achieve the placement and look you want to obtain.

13. Last but not least, take the last texture provided, and set the blending mode to “color burn” and let it sit on top of the layers to give it a more worn, and paper-styled / weathered photograph appeal. Now you have yourself a fancy, vintage style’d poster with a modern kick!

This is a must have if you are a texture fan and we are sure you will love them. We sure do!

Over the past year we have had the opportunity to work with so many original and hard working businesses. From creating branding for Photographers, CD packaging for bands, to full custom websites for international music composers. Our firm did ( and is still doing ) exactly what we wanted it to do. Bring clients that knew what they wanted with their brand and take it to the next level. It has been both an honor and a privilege working with these individuals and teams and we can’t wait to see what the next year of Ectomachine brings in.

So, if you are business or individual that needs some design work, web development, content management system..really…anything, please feel free to contact us. We are always ready to work and our passion for the web and branding is hotter than ever and we can’t wait to utilize and share the things we have learned over the past year with you and your business.

Lastly, thank you all for your return visits to keep up with our portfolio, drop a kind email, and give us the motivation to keep going. It amps us up beyond belief and still want to hear from all of you so keep dropping by. Oh yea, and spread the word!

- ECTOMACHINE

Stationery design is a masterful design within itself. In order to create beautiful stationery design that stays within the confines of the identity, the designer must see the vision of the design all the way though. From the logo, to the typography, to the color scheme, and the general mood all around.

It truly goes without saying that creating inspiring stationery design is a craft. Seemingly letterheads, envelopes, mailers, and business cards can seem confined and a bit dry by themselves, but it is within those confines that the identities beauty lays. With that being said we would like to show you some the best stationery examples we have come across in recent memory. Enjoy!

With all of these new features you would think we are all on the brink of development heaven, but as with any web development comes a few dark clouds to rain on the parade of all that is CSS3. What we are talking about is browser rendering. Luckily CSS3 isn’t so technical that all hope is lost, but the simple fact is some browsers just don’t render for it yet. *Cough* IE *Cough*. This is somewhat off putting for creating a full blown website layout using CSS3 but we can encourage some of the tastier and finer points of CSS3 that degrade rather gracefully and should be in your repertoire as soon as possible.

Now with all of that said we have created a list of tools, tutorials, and resources that will help with your learning of CSS3 so you can really start to envision all that it is capable of. The beauty of it is, even though some browsers aren’t rendering it all correctly currently doesn’t mean that it will look horrible on them, just absent. So check out these tasty treats and give them a try for yourself. You should find them to be as helpful as we have and will keep you sharp on that ever cutting edge of design and development.


Web Source:
Border-Radius

Remember the days when you wanted a rounder corners on a an element you had to break out the old slice tool in Photoshop and basically go blind cutting them? It was a pain then and is a pain now. But with the beauty of CSS3 there is now a quick and painless solution for that. Head on over to Border-Radius created by Jacob Bijani, enter the pixel radius of the curve you want, and BAM! You got some lightweight code to create those rounded corners we all know and love.

Web Source:
CSS3 Generator

With CSS3 we find more range than ever for editing visual displays of content, colors, and even columns. Check out this handy generator that gives you quick and full control of your styles and even giving you browsers that will display these options correctly. Definitely a handy little tool!

Web Source:
Skyrocket Labs

CSS3 functions don’t stop at content styles and opacity ranges. With a little editing you can even create a beautiful hover style form as shown in this tutorial. While it may not be best to use this in common practice for creating your forms for sites, it wouldn’t hurt to take a couple of the lessons learned here and ‘Frankenstein’ this effect for other visual areas on your sites display.

Web Source:
CSS3 Gradient Generator

This little gem doesn’t need much of an introduction without the name saying it all. CSS3 Gradient Generator. Yup, that’s right. With CSS3 your days of creating background gradient images for buttons and boxes can now take a hike. Simply use this little generator to create the gradient you want to your hearts content. Grab the code, paste it in and voilà!

Web Source:
Zurb

Polaroids with CSS3 was one of the more innovative and creative tutorials we found when dealing with the new functions that CSS3 brings. Take a traditional list of images into a creative and fun set of polaroid pictures. Take a new approach to image galleries and more. Also scalable!

Web Source:
WebDesigner Wall

Who doesn’t love a good sub-level dropdown menu? Even better, who doesn’t love a sub-level dropdown menu using only your styles? Well check out this step-by-step write up of how to create one using only the border-radius, box-shadow, and text-shadow elements of CSS3. This dropdown menu renders great on Firefox, Safari and Chrome. As a special bonus it also works on non-CSS3 compitable browsers such as IE7+ sans the rounded corners and shadow elements.

Web Source:
Font Dragr

With CSS3 and the @font-face property we are now able to find solutions to add truetype (ttf) and opentype (otf) into our designs without making them graphics. This little tool can give you a better idea of the way the web will display any graphic type you decide to substitute in your design. Check out Font Dragr, simply drag in the fonts you want to use and check out how they display. Pretty nifty!

Web Source:
Janko At Warp Speed

If there is anything that looks fantastic on the web it’s the letterpress / emboss effect to typography. With our old ways this effect wasn’t very obtainable without the use of our chosen graphic software, but now with the functions of the text-shadow property we can now letterpress and emboss text with ease. Always a thumbs up!

Web Source:
Zen Elements

Just when we can’t say enough about new CSS3 properties we stumble upon this fantastic new feature. The Column property. Just imagine, someday floating columns will be a thing of the past and hopefully with more support for CSS3 in the future we can say goodbye to it for it good. Checkout this tutorial on how to make multi-columns and prepare to be taken back by the simplicity of it all.

Web Source:
PH-Creative

Working on an espionage, viral campaign site, or just want your site to have a little element of mystery to it? This might be of great use to you and is super simple. Create hidden message within your text that can only be revealed by selecting the text and styling it with the :selection declaration.

Web Source:
Sourcelink

Want to give your file links a little more stage time? Try using this great technique presented by CSS3.info. With CSS 3 selectors, you can use the same technique for any tag which has an attribute. What this means is you can easily give a type of document link ( i.e. PDF ) a certain icon and the selector attribute will recognize the file type and give that link a PDF icon. Fantastic.

Web Source:
Zurb

Lastly, check out this demo application of the CSS3 border-image property. As stated in this demo ‘The border-image property is tricky in the way it takes a single image and turns it into a complete object border for any sized element.’ We couldn’t agree more, however can be worth it in the end when executed properly.

Sometimes however, it will go much deeper than that. Sometimes that random image or object will not only blow the roof off of your design but in turn create a full blown trend within the web design community and even design elements as a whole.

We would like to take this opportunity to showcase one of the very classic and very eye catching trends in web design right now. Wood. Yup, Wood. Now we are not sure who did it first or if it would even matter, but, what we would like this post to focus on is how just taking one simple element and bending and shaping it to the will of you web layout or design can sometimes be so much more than enhancing your design. It can spark a whole new realm of ideas of how to use certain elements in your designs and how one little thing can spark a huge web trend.

Design Fabrika

X Graphica

Cookmate App

Master of Malt

St. Charles MD

iMatt

Against the Grain

Kuhboom

Matthias Schuetz

Nine Lion Design

Andreas Hinkel

Dwelling Spaces

Wold of Dormia

Brand Iron

Brand Iron

Brand Iron

Digital Wellbeing Labs

Deva Design

You Web Land

Bravanonna

Well it looks as if Christmas is coming early here at ECTOMACHINE! Like any design firm once in a while we find ourselves with a handful of kick ass designs that never saw the light of day, so we just decided to go ahead and turn them into some lovely iPhone wallpapers to make all your friends jealous so dig in and get them!

Download Wallpaper

Download Wallpaper

Download Wallpaper