Hi, I’m Andres Alfonso This blog showcases my most recent work in illustration, design, web design, etc., more about meTumblr (3.0; @afar)http://blog.afar25.com/<img src="http://25.media.tumblr.com/tumblr_m3sfacWqpw1qzux6ko1_500.jpg"/><br/> <br/><img src="http://24.media.tumblr.com/tumblr_m3sfacWqpw1qzux6ko2_500.jpg"/><br/> <br/><img src="http://25.media.tumblr.com/tumblr_m3sfacWqpw1qzux6ko3_500.jpg"/><br/> <br/><p><span>The Journal of Visualized Experiments, JoVE, is dedicated to accelerating biological, medical, chemical and physical research by elucidating techniques through a combination of peer reviewed video and text.</span><br/><br/></p> <div id="yui_3_3_0_3_133661922793467">I designed this 3000+ page website and coded it along with the JoVE IT team.</div>http://blog.afar25.com/post/22762066738http://blog.afar25.com/post/22762066738Wed, 09 May 2012 23:35:00 -0400afar25JoVEwebsiteweb designweb developmentHTML5HTMLCSS3designillustrationScience Journal<img src="http://25.media.tumblr.com/tumblr_m3dco1OXcc1qzux6ko1_500.jpg"/><br/><br/><p><strong>Spiritual swagger</strong><br/>From the sketchbook, this dude has an entry to a spiritual world, his circle tattoos give him an edge</p>http://blog.afar25.com/post/22227167647http://blog.afar25.com/post/22227167647Tue, 01 May 2012 20:14:25 -0400afar25illustrationsketchbooksketchpeninkpaperswagswagger<p>I met Tumblr back in 2009, and it was love at first sight. My first post dates back to Jan 15th. Tumblr provided everything I was looking for at the time, a blog system that would allow me to alter (full control) the look and content of my blog for free. As a recent graphic design graduate Tumblr allowed me to get into the Web Design world. Here I am +3 years later working as a web designer (still do graphic work) and is all thanks to Tumblr. Tumblr provided (still does) the best platform for trial and error and it gave me the confidence to keep at it. A special mention should be given out to the community, from the start I&#8217;ve felt like part of a big family, the support and understanding from followers is priceless. Oh and yeah the dashboard is addictive, I get my daily fix.</p>http://blog.afar25.com/post/21787249023http://blog.afar25.com/post/21787249023Wed, 25 Apr 2012 12:26:11 -0400afar25storyboardtumblrlife<img src="http://24.media.tumblr.com/tumblr_m2zzraG5ig1qzux6ko1_500.jpg"/><br/><br/><div class="caption"> <p><strong>Monkeys Live Free</strong></p> <p>Had fun making this one, all started with a pencil drawing, then scanning, then off to Illustrator to trace and color and finally onto Photoshop to add a background and finishing touches.</p> <p>I’m thinking of printing this one on a canvas.</p> </div>http://blog.afar25.com/post/21726648001http://blog.afar25.com/post/21726648001Tue, 24 Apr 2012 15:06:00 -0400afar25illustrationmonkeyanimalvectorlive freedesigncomposition<img src="http://25.media.tumblr.com/tumblr_m2n2g6xwZ01qzux6ko1_500.jpg"/><br/><br/><p>This is the permalink/post page of the latest Tumblr theme I designed and developed for fashion blog EKSlife (<a href="http://ekslife.com" title="EKSlife" target="_blank"><a href="http://www.ekslife.com" target="_blank">www.ekslife.com</a></a>). Like I mentioned previously I’m using some Tumblr variables such as {block:IndexPage} {/block:IndexPage} and {block:PermalinkPage} {/block:PermalinkPage}. In order to have your permalink/post page look different (size, layout) than your home you have to use the variables mentioned.</p> <p>The image is as wide as Tumblr allows (500 pixels) and is accompanied by:</p> <p>1. Addthis sharing icons<br/>2. Caption<br/>3. Comment system provided by Disqus<br/>4. Post Notes</p>http://blog.afar25.com/post/21283857173http://blog.afar25.com/post/21283857173Tue, 17 Apr 2012 17:02:30 -0400afar25EKSlifeweb designweb developmentTumblrtumblr themepost pagepermalink page<img src="http://24.media.tumblr.com/tumblr_m2n276iBb21qzux6ko1_500.jpg"/><br/><br/><p>Finished with another Tumblr theme, this time for fashion blog EKSlife (<a href="http://ekslife.com" title="EKSlife" target="_blank"><a href="http://www.ekslife.com" target="_blank">www.ekslife.com</a></a>).</p> <p>Every time I work on a new theme I end up finding some many neat things Tumblr has to offer. The layout of the home uses the <a href="http://masonry.desandro.com/" target="_blank">Masonry</a> script to align and position every post container properly, this is to avoid float issues that occur when having lots of containers floated. I also use infinite scrolling that works great with <a href="http://masonry.desandro.com/" target="_blank">Masonry</a> and every 15 posts align and position themselves perfectly. To keep it clean and simple all captions, links and note counts appear when hovering over the post container.</p> <p>I’m also making use of Tumblr variables such as {block:IndexPage} {/block:IndexPage} and {block:PermalinkPage} {/block:PermalinkPage} in order to have a different layout and size for permalink pages, this would become more clear on the next post.</p>http://blog.afar25.com/post/21279031366http://blog.afar25.com/post/21279031366Tue, 17 Apr 2012 15:30:42 -0400afar25ekslifeweb designweb developmentmasonryjQueryHTML5CSS3tumblrtumblr theme<img src="http://24.media.tumblr.com/tumblr_m22hc5kcWU1qzux6ko1_500.png"/><br/><br/><p>3 JoVE poster canvases stretched and all set</p>http://blog.afar25.com/post/20655078426http://blog.afar25.com/post/20655078426Sat, 07 Apr 2012 12:00:50 -0400afar25canvasposterJoVEillustrationoffice decorationart<img src="http://25.media.tumblr.com/tumblr_m22wkgmi291qzux6ko1_500.png"/><br/><br/><p>JoVE poster canvas close up - colors look great printed on canvas</p>http://blog.afar25.com/post/20613758206http://blog.afar25.com/post/20613758206Fri, 06 Apr 2012 18:17:04 -0400afar25JoVEartcanvasposter<img src="http://25.media.tumblr.com/tumblr_m22fw1mlSr1qzux6ko1_500.png"/><br/><br/><p>JoVE poster canvas, first one all set. Really impressed with the quality and colors</p>http://blog.afar25.com/post/20599444875http://blog.afar25.com/post/20599444875Fri, 06 Apr 2012 14:00:30 -0400JoVEafar25artcanvasillustrationposter<img src="http://24.media.tumblr.com/tumblr_m22frce2Tp1qzux6ko1_500.png"/><br/><br/><p>Stretching canvases at JoVE, printing on canvas looks awesome</p>http://blog.afar25.com/post/20595268237http://blog.afar25.com/post/20595268237Fri, 06 Apr 2012 12:45:15 -0400JoVEartcanvasafar25poster<img src="http://25.media.tumblr.com/tumblr_m1tj4fVI9t1qzux6ko1_500.png"/><br/><br/><p>Steezy dude - ink and markers on cardboard</p>http://blog.afar25.com/post/20314997928http://blog.afar25.com/post/20314997928Sun, 01 Apr 2012 19:02:56 -0400afar25illustrationmarkerscardboardcharacter<img src="http://25.media.tumblr.com/tumblr_m1ip44w56L1qzux6ko1_500.png"/><br/><br/><p><strong>Open Minded</strong> dude<br/>Markers and acrylic on cardboard</p>http://blog.afar25.com/post/19982173254http://blog.afar25.com/post/19982173254Mon, 26 Mar 2012 20:32:20 -0400afar25illustrationmarkersacryliccardboardheadcharacter<img src="http://24.media.tumblr.com/tumblr_m18r7d2qyy1qzux6ko1_500.png"/><br/><br/><p>Afar25 business cards. The URL is stamped on the card</p>http://blog.afar25.com/post/19681236691http://blog.afar25.com/post/19681236691Wed, 21 Mar 2012 11:34:24 -0400afar25printbusiness cardcollateralidentitylogoyellowmonkey<img src="http://24.media.tumblr.com/tumblr_m0vwiffQCM1qzux6ko1_500.jpg"/><br/><br/><p>Back to top character and functionality added to portfolio part of the site.</p>http://blog.afar25.com/post/19294627955http://blog.afar25.com/post/19294627955Wed, 14 Mar 2012 12:59:03 -0400afar25illustrationcharactervectormustacheopen headbutton<img src="http://24.media.tumblr.com/tumblr_m0clpawJjM1qzux6ko1_500.jpg"/><br/><br/><p><strong>Spaceman accustomed</strong> - pen on paper</p>http://blog.afar25.com/post/18714535471http://blog.afar25.com/post/18714535471Sun, 04 Mar 2012 01:51:10 -0500afar25illustrationpeninkspacemanspacecharacter<img src="http://25.media.tumblr.com/tumblr_m08bivbpFy1qzux6ko1_500.jpg"/><br/><br/><p>Just got my free stickers from Baker :) (Taken with <a href="http://instagr.am" target="_blank">instagram</a>)</p>http://blog.afar25.com/post/18573509923http://blog.afar25.com/post/18573509923Thu, 01 Mar 2012 18:20:00 -0500skateboardingphotographybakerskateboardsstickers<img src="http://24.media.tumblr.com/tumblr_m030h79tos1qzux6ko1_500.jpg"/><br/><br/><div class="caption"> <p><em>wallpaper review #8</em></p> <p><strong><em>Bearded Gods</em></strong><em><br/></em></p> <p>Download free wallpaper at <a href="http://www.downloads.afar25.com/" target="_blank"><a href="http://www.downloads.afar25.com" target="_blank">www.downloads.afar25.com</a></a></p> </div>http://blog.afar25.com/post/18415678370http://blog.afar25.com/post/18415678370Mon, 27 Feb 2012 21:34:19 -0500afar25illustrationwallpaperfreedesignbeardedgodsfacial hairgiveaway<img src="http://24.media.tumblr.com/tumblr_lzr1e8c8a81qzux6ko1_500.jpg"/><br/><br/><p>JoVE brochures arrived</p>http://blog.afar25.com/post/18011281754http://blog.afar25.com/post/18011281754Tue, 21 Feb 2012 10:22:00 -0500afar25JoVEprintbrochureillustrationScience Journalmarketing material<img src="http://25.media.tumblr.com/tumblr_lzofashsZ31qzux6ko1_500.jpg"/><br/><br/><p>Taken with <a href="http://instagr.am" target="_blank">instagram</a></p>http://blog.afar25.com/post/17931939526http://blog.afar25.com/post/17931939526Mon, 20 Feb 2012 00:30:27 -0500<img src="http://24.media.tumblr.com/tumblr_lzgpctxCfr1qzux6ko1_500.jpg"/><br/><br/><p>Afar25 version 3.0 Home middle and footer</p> <p>For the middle of the home I needed 2 different Tumblr feeds, one for my personal blog and one for the skate blog. I was able to find this script by <a href="http://robertnyman.com/" title="Robert Nyman" target="_blank">Robert Nyman</a> <a href="http://robertnyman.com/2008/09/19/tumblrbadge-a-tumblr-badge-script/" target="_blank">http://robertnyman.com/2008/09/19/tumblrbadge-a-tumblr-badge-script/</a><br/>With this script I was able to define the number of posts and the way they would appear on my site, then with CSS I made it look just like I wanted.</p> <p>The second feed comes from my Skate blog, now for this one I used he following script <script type=”text/javascript” src=”http://skate.afar25.com/js”></script> with this you get your last 10 posts, in order to only show the first I had to use CSS selectors.</p> <p>The third column on the middle of the page refers to my free wallpapers available at <a href="http://www.downloads.afar25.com" title="Downloads Afar25" target="_blank"><a href="http://www.downloads.afar25.com" target="_blank">www.downloads.afar25.com</a></a> I will be updating this one manually as new wallpapers become available.</p> <p>Last thing on the home is the footer, that’s me, I followed the same style I use for the blog (go to the footer of my blog for another pic of me), I wanted to hang out with my own characters and for this I took several pictures that I later drew on top of using Flash.</p>http://blog.afar25.com/post/17686936351http://blog.afar25.com/post/17686936351Wed, 15 Feb 2012 20:26:53 -0500afar25web designwebportfolioillustrationTumblr feedfeedhome pagewebsite