Here to inform…

I haven’t delved deep into data visualization, or infographics, but I recognize their value, and lately I’ve been asked to do them by people to whom I would like to say yes. So I’ve been getting into some vector drawing; images with potential to illustrate data, without toiling with fictitious information. The next step is deciding on something I think people should know about, and illustrating that.

infographics-Phillip-Yniguez

Stop Motion Animation – “Be Safe Out There, Kid”

 

I spent the other night animating this 18 Second video. The next day I composed score and compiled the a/v together. I learned that I enjoy tedious work when I know the outcome will be worth it, this definitely was.

Make Music Festival Pasadena Logo Redesign

One of the best summer events around LA has been the Make Music Festival in Pasadena, California. But there was no festival in 2017, and it’s organizers don’t know if it will be back next year. Looking at imagery from past festivals I realized their logo was a bit boring. So I designed a new one. Since it may not exist again without a serious brand revamp, I also slightly renamed it.

Here is what I did.

I took cues from the existing City of Pasadena logo, which is a Rose enclosed in a quadrangle. I wanted to use the Rose motif in a style associated with outdoor music. Stanley Mouse’s Skeleton & Rose art for the Grateful Dead came to mind, so I developed a drawing that included bundles of roses. Combined with my own cartoon style, the finished idea is a logo that, I think, gives a more organic and relaxed feel than the old text based one. I included the city’s type treatment of the name Pasadena, because the event has always depended heavily on city cooperation. The feel of an old monogram is achieved by placing it at the center below the illustration.

Ishtar

I was thinking a lot about Ishtar and the way she is sometimes depected with serpents. And I’ve really been thinking about serpents. So here is a version of Ishtar for you.


Planatari

 

This was a fun project I did in Yucca Valley, CA. I built the video and the audio solo. Just figured I should type that here.

Man of Constant Sorrow

I recorded Man of Constant Sorrow on this here guitar, and added a mandolin over it. Its not perfect, I sing the Colorado line way too many times but overall I decided it was a worthy upload. The mando really picks up in the second half of the track so I hope you’ll listen that far.

Man of Constant Sorrow from Oh Ok Creative on Vimeo.

170401

New Record – 170318

Recorded in Yucca Valley, CA.
Alesis V25: Phillip Yniguez

Random frame from current video work

bun

Yucca Valley

IMG_2879

161017

130016

Recorded in 2013
Guitars: Phillip

EP – Five Bedrooms





Culver City, CA


Culver City, California

A fence around your garden (Poem)

“What’s up?” Points to heaven. “Where to?” There. “Any elsewhere?” Breathes the air. Right here! “And why so filthy?” I love Earth. “Feeling thirsty?” More than dirt. “Aren’t you scared?” I’m safe out here. “But, murderers!” Ourselves, I fear. “Ah! You’ve said it! Fearful, eh?” Not while I’m with you, I prey. “A predator you are?” I prey for peace. “You must mean prayer, youth.” Among the youthful, I am least. “Yet not as old as I; you jest!” It’s true old man, and time hath blessed. “Then listen to me. I have learned. Many like you time has burned. Their wings of freedom fires of hunger scorched.” By what? “The merchant’s torch.” Burned? By hunger? Time? Make up your mind! “By both combined! I see you sitting idly such as they, and fear that death shall overcome you as you play – your, what do you call it?” This flute? “Yes they too had lips on flutes; and on the fingers of the girls were lutes.” Well that sounds lovely. Have they numbers? I’d like some friends thus unencumbered. “Encumbrance is a must in life. Certainly if thou wants a wife.” And why such cost? For something certain to be lost? “Certain to be sooner for a one the likes of thee, if the working life you are intent to flee.” Flee from working? No not me! It’s from robbers and the thieves I hide from, see? “Exactly why I recommend: a fence around the garden that you tend.” Fences. Useless expenses! It’s fences I intend to rend! There isn’t much I need defend. “Expensive, true. But many men can lend to you.” The lenders and fence builders, same. I call them by their one true name. “And what name, tell?” Ringers of the prison bell.

Rose Trip


μυριάδες

I just finished a run as a production artist in an LA ad firm. I’ve had some time off, so I think now is the time to assess what I contributed and what I learned.

Production artists are as low on the advertising totem poll as you get. I don’t know why, but they are. The pay is pretty good though, so if a guy can earn a living running Photoshop, he’s doing ok. Account managers are still buffering between creatives and clientele because these guys generally don’t want their wage earning graphics people stealing half million dollar clients. For a long time, I’ve envisioned running a small office of my own, but it can be nice not being responsible for the tremendous expense of office space, equipment, and payroll; just make the work look good and accurate and deliver on time in a friendly manner, then get paid. Easy.

This particular job was heavy on print: magazines, brochures, and direct mail. Most layout, type, color, and grid decisions were made long ago. It is imperative for the production artist to place images and text in the right places, using the right styles and colors, like puzzle pieces. Photos shall not be enlarged to print at anything less than 300 dots per inch. Everywhere I’ve worked, and even as a student, the complexity of the dpi issue is always exaggerated by designers. But it seems pretty basic, and it never changes.

The area where time and experience are apparent is with regard to color as it pertains to photographs and printing. Photos come from all over the place—stock providers, random office cameras, and occasionally from a professional photographer contracted to shoot for a campaign. Light conditions are never the same twice, and maybe someone even edited a photo before it gets to you. You have to decide exactly how much CMYK in percentages to use for each photo; no single color mix is ideal for any two images. In addition to the infinite light variables in photography, color perception varies widely from person to person. It takes a sensitive, trained eye to adjust a picture for maximum print quality in color.

It’s easy to find out how accurately you see color. X-rite, the company behind the Pantone color matching system provides a great test you can take for free online: http://www.xrite.com/online-color-test-challenge.

I had developed a preference for high contrast photography; very dark blacks, and white whites— despite what I learned in photography class. The best photos are balanced to contain an even spectrum of grayscale, or it’s color equivalent. No black should be 100% black, and no white should be so white that it’s just the color of your paper without any pigment. It doesn’t look right.

I was surprised to find myself animating Flash banners in 2015 because I’ve come to believe that html5 is the new standard for web animation. I think I can offer some insight as to why some high volume agencies are still working in Flash and not html5. It’s because affiliate marketing networks are still catching up. They’ve built software that tracks ad performance at great expense, and have, I imagine, hundreds of thousands of clients who rely on that software. And it all presupposes the Flash objects and actionscript we’ve been on for 10 years. Don’t think you’re going to waltz in to an established agency and school them on the cool new thing. They’re aware. But market constraints take preference over fashion and efficiency.

I was doing layout, typesetting, color correcting, photo curating, and Flash animating, sometimes all on the same day. For a minute, it felt like there was nothing I couldn’t do. But the day came where I think I fell short. “Phillip, mask the backgrounds out of these staff portraits.” “Ok.” I plug in the Wacom, layer mask, and start brushing away. Select color range, little bit of the background, shift+F5, fill with black. Bang bang bang. Done!
Nope. Our creative director showed me a better way.

In Photoshop, when you brush or fill black on a layer mask, the contents of that layer are hidden by the mask. White is visible, black is invisible. There’s a classic difficulty in masking human hair and other fine textures. Most methods are either tedious or inaccurate. I’ll quickly describe a method that is as fun as brushing, but more precise.

Brush around your intended border with about 50% black. Get real fudgy and fast with it so the mask exists on both sides of the border. Just do it, it helps. Then, get used to switching between the Dodge and Burn Tools (Shift+O). Wherever you would have otherwise brushed black, Burn instead. The lighter areas resist burning, and your burn only affects the dark area. Then, invert the mask, (⌘+I with the mask selected), and start Dodging. It’s the same thing in reverse. Lights get lighter, Darks resist lightening. You’ll develop a little intuition, finessing the edges with brush stroke and pen pressure, and suddenly be brushing out superb, pristine, mask edges!

First impressions are lasting, and I think these people might think of me, “oh yeah, that guys masks sucked.” And maybe they did, but they won’t from now on. I’ve made use of this technique while building the gif below, that has about 20 different masked frames of an old Sony Cybershot. It’s a good example of color correcting crappy photography (my crappy photography from 7 years ago), and masking using Dodge and Burn. No two frames were initially the same color, and back in 2008, I just roughly erased the background with Eraser. So this was made using sub-optimal assets and an upgraded skillset. Maybe this would be more relevant if the camera was hairier.

How I randomly re-order my portfolio modules with Javascript

This is a quick demonstration of how I was able to write a series of divs in random order to my homepage using javascript. To see the code I’m about to show you in action, you can go to this site’s homepage, notice the grid of linked images, and refresh. The grid will refresh in an entirely different, random order.

Prior to this change, I was using a php include to import a list of individually written divs. Each div, which I’ll call a module, contained externally styled html that specified an image, a thumbnail, an inline styled background color, and a class for the linked image. Here’s an example of one of those modules:

<div class="pic" style="background-color:#45963A">
<a class="fancybox" rel="gallery" href="./images/habitat.png">
<div class="info">Logo for Habitat Architects</div>
<img src="./images/thumbs/habitat.png" title="Vector Logo, 2009"/>
</a>
</div>

I have five categorized files populated with modules similar to these, and a navigation menu that will take you to a specific category. But I didn’t want a new visitor to see only one category, and possibly conclude in a half second glance that the one category comprised all the work I want to show. So the index page initially included all five categories together, like this:

<div id="grid">
<?php include("./portfolio/illustration.php") ?>
<?php include("./portfolio/identity.php") ?>
<?php include("./portfolio/advertising.php") ?>
<?php include("./portfolio/product.php") ?>
<?php include("./portfolio/publishing.php") ?>
</div>

The result of this looked ok, but I didn’t like how the various styles seemed clumped together. For example, the logo/identity thumbnails almost all have a white background, so there was this group of white background images grouped all together that seemed to break the flow of the page. The other categories had their own similar issues. It looked like this:

I wanted to mix these thumbnails up so that the overall texture of the page was more evenly distributed. And I didn’t want to burden myself with manually mixing up the modules using static html. My initial idea was to create a mysql database, with a row for each portfolio piece, and a column to represent each variable. The variables would be the two image filepaths, a hexedecimal color code, a string of descriptor text, and a size class for the final image. I believe this would work, but I didn’t want to spend the amount of time it would take to enter all that data in an mysql table.

Instead, I wrote a javascript function to create variables and inject them in to a block of html that could be reused for each module. It looks like this:

//Constructor for Portfolio Modules
function portMod(id, color, size, thumb, image, info, category) {
this.id = id;
this.color = color;
this.size = size;
this.thumb = thumb;
this.image = image;
this.info = info;
this.category = category;
}

This object constructor function called portMod() creates objects with properties that represent the variable data that will differentiate each module. In order for this to work, I need an array with the actual data to loop through to build the html I need. To accomplish that, I ended up doing some manual data entry after all, but at least it wasn’t into a database table, and can be easily updated in a single text file. I won’t paste the entire array here. But here is a sampling of a few lines that use portMod() to create the array I need, called ‘portfolio':

//Creating the Portfolio Array. A container for the Modules.
var portfolio = [];

//Filling the array with the actual data to fill the page. Image paths, hex codes, etc.

portfolio[0] = new portMod(0, 'd41c17', 'fancybox', 'free_th\.png', 'free\.png', '\"Free\" India Ink & Flashe, 2009', 'illustration');

portfolio[1] = new portMod(1, '632c3f', 'fancybox', 'marchiali_th\.jpg', 'marchiali\.jpg', 'Marchiali: The Man in the Iron Mask', 'illustration');

portfolio[2] = new portMod(2, '0F97A4', 'fancybox', 'togh\.gif', 'TOGHOWTR\.jpg', 'Good Hands\: Acrylic Paint 2010', 'illustration');

Etcetera.

At this point, I have an array of objects called ‘portfolio.’ Each object has 7 properties that I’ve assigned. Five of the properties will serve as variables for injecting into my html, and I’ve also added an ‘id’ property, and a ‘category’ property. I think those two will help me sort and do other cool things with this data in the future, but right now, I really only need ‘color,’ ‘size,’ ‘thumb,’ ‘image,’ and ‘info’ to do what I want to do next.

The values for these properties will be inserted into my original html module. The next piece of code I’m going to show you does two things. First, it calls a function called shuffle() which I’ll talk about in a moment, to re-order all of the module objects in the ‘portfolio’ array. So the elements of that array are already shuffled before any html is generated. Second, it uses a for loop to loop through the ‘portfolio’ array, inserting all the variables in to the block of html with escaped quotes and slashes so it can be processed as a series of strings, concatenating them with the object properties. Each module is written to the page using the document.write() method. Here is the code:

function showPort() {
shuffle(portfolio);
for (x in portfolio) {

document.write("<div class=\"pic\" style=\"background-color:#" + portfolio[x].color + "\"><a class=\"" + portfolio[x].size + "\" rel=\"gallery\" href=\".\/images\/" + portfolio[x].image + "\"><div class=\"info\">" + portfolio[x].info + "<\/div><img src=\".\/images\/thumbs\/" + portfolio[x].thumb + "\" title=\"" + portfolio[x].info + "\"\/><\/a><\/div>");
}

Without the shuffle() function, all of this would just re-write what I had in the beginning, a static sequence of modules in whatever order they were found in the ‘portfolio’ array. The key to writing them randomly is to mix up the indexes of that array using a randomization algorithm. There is a recurrent need for randomization in almost all applications of computer science, and so there are plenty of existing algorithms to choose from. I discovered the Fisher-Yates method on this Stackoverflow thread. I used the exact javascript version of this algorithm posted by CoolAJ86, and it works beautifully here by calling the shuffle() function using ‘portfolio’ as the array parameter. Explanation as to how it works can be found elsewhere, so I won’t get in to it. I place the function at the beginning of my file so it exists when I need it. Here is my javascript file with everything in the proper order.

Finally, I call the showPort() function from within my html file, replacing the five php includes I mentioned before, like this:

<div id="grid">
<script type="text/javascript">
showPort();
</script>
</div>

I want to end this by commenting on why I would even want to randomize my portfolio in the first place. After I did all this work, I came across this essay written by Kyle Meyer, where he explains some of the problems he percieved in many art & design portfolios. He points out the obscurity that can be created using thumbnails, and the common problem of cryptic navigation techniques which can be difficult to bookmark. I’ll admit that some of this is applicable to my site, possibly compounded by adding randomization to a grid of thumbnails. What’s my excuse?

Everytime I create a thumbnail for this site, I recompose the design to fit within a square. There are no random croppings, and the composition is generally large enough to see what is in the image. What if someone wants to revisit an image later? I just shuffled the thumbnails around, so it isn’t in the same place it was last time they visited the site. Well, I still have navigation that takes visitors to non-random categorized pages, so I think there is still a fair opportunity to come back to something specific. From a site maintenance standpoint, I’ll simplify that even further in the future using the ‘category’ and ‘id’ properties I created in my ‘portfolio’ array.

I hope that by adding a little randomness to my homepage I’ve done something to encourage curiosity and a sense of exploration. Something less accomodating to the caracaturistic ‘user’ that is confused by every navigational modifier in the interface he is engaged with. Not only that, but it is a document that will continue to grow, and given the diminishing likelihood of a returning visitor to scroll anywhere to find new material, he is presented with new material that by randomization is given equal prominence with the old.

New 8 Page Episode of ‘Ella’

I’ve been writing & drawing a little noir style comic book, and I just finished a new 8 page episode. It’s available for free to read here.

Here’s a sample page

Loma Linda, CA


Loma Linda, CA

Do a little Jogging

“One thing is certain – that you are still not dead: you are hungry, your feet are cold. Just get up and do a little jogging!” – OSHO

I was hungry and my feet were cold. I was getting old, but still knew how to run. Feet against the grains of ground and the sound of brain absorbing sky. I was high. Flowers flowing up my veins while running down pathways and lanes in circles ’round the hillside place that sure won’t last forever. Will I? My Karma climbs like a crab up the side of an anchor chain. Broken by the beating of a bored heart. Don’t Start! How come I always have to do the dirty part? The sunshine states I should inflate my traits til someone compensates. At any rate, hourly or other, no one knows that I’m his brother, in neither this life or another. Why bother? Another thing: I have no use for diamonds, rings, what fire brings, the offerings, the burns, the brides, the other sides, the broken through, the opened wides. I’m satisfied. Was glad to die, but came back. Why? For another try? Wise guy. Well what I meant to say was I…I’m trapped inside; my eyes are wide, but I still can’t fit through them. The work, the chores, the sacred lore: what brings me here to do them? I knew them. Fled. Was better dead. Remember? Bled? Chose red instead? Was laid upon a glowing bed? With embers all around my head? But once again we’ve spun Fortuna’s wheel for fun, or fate, but feet? Next time I want a natural clete; that would be neat. To dig me closer to the heat while I run along this street. Be sweet! Be calm and caring when the vultures take beaks full of friends. Let’s not pretend there’s anything left to defend. It’s zen! But then again, I have a button I could mend; a protein veggie berry blend. I turned around and changed my course with no remorse. I rode upon Arjuna’s horse. When I arrived, I went inside, perspired with pride, and died.

San Diego Bay


San Diego, California

Back in San Diego

I’ve returned to San Diego for the summer. Every time I come back to this city I feel the energy of opportunity, also the clash of class stratification on the streets. I’ve embarked on quite a few ventures here that have risen and fallen with the tides; mostly forgotten by all but myself. Despite my endeavors in business, art, and socialization, I could blend among the vagabonds.

It’s uncertain where I stand within the socio-economic spectrum here. While I maintain my familiar aspirations to contribute to society, I’ve learned to temper expectations of recognition. I consider the best award I could receive to be a paycheck.

I’ve learned something fundamental: My personal experience is a better indicator of success and happiness than the absent congratulations of observers. This is true for everyone, including people who actually are cheered for their work. From this perspective, San Diego and the world thus far have been incredibly good in providing experience and encounters that can’t be bought or repeated.

My time here won’t feature declarations of business ventures or artistic exploits. I’ll just quietly do my work. I’ll sail in the bay. Design. Read. Write. And when the time comes, I’ll be on my way.

My NDA Policy: Let Me Show My Work

A designer with a censored presentation board.

I’ve been doing some freelance web development, and something that keeps appearing in my life is the non-disclosure agreement: a legal document outlining all the proprietary information I promise not to disclose as an independent contractor. It makes sense for businesses to protect confidential details shared with workers, like future pricing, product releases, and pending technologies, so the NDA is here to stay. But there is a certain element of an NDA I can no longer agree to.

I can’t agree to that particular clause which, in its various iterations, prohibits the disclosure of my relationship to the products, brands, and organizations for which I’m doing the work.

My reasons are simple. I do good work. I’m proud of that work. I want people in the industry to know what I’ve done, so I can build a reputation, and get hired by more wonderful organizations who like what I do. So I can do even more, for good money.

If I’m prohibited from showing my work, my career suffers because prospective clients have fewer examples of my successes and capabilties. This scenario has plagued me since 2008 when I took my first full-time design job, and signed my first NDA, after university. It’s awkard explaining that your biggest acheivements are not in your portfolio because you are legally bound not to disclose them.

So yeah, I’ll sign your NDA, and promise not to reveal your secret recipe, or admin login, to the world. But please, don’t expect me to keep my work secret.

Ubuntu

I recently picked up the March/April MIT Technology Review, read it from cover to cover, and it looks like the important things going on are genetic research, robotics, crypto-currency and alternative-to-oil fuel sources. My sense that I’m not contributing to the important work is compounding. I’m a thirty year old man, and I’ve concerned myself primarily with the production of graphics. There’s no changing this, and no desire to, actually.

Within those pages, among the articles that describe incredible technological advancements, there are illustrations, photographs, and portraits made by artists; there’s also impressive typographic layout throughout. I’m encouraged that genius continues to see value in the artist, and am reminded of something else I’ve read recently.

In “The Official Ubuntu Book,” produced by the developers of the free GNU/Linux Distribution called Ubuntu, the writers describe the meaning of the word:

“Ubuntu is an ancient African word meaning ‘humanity to others’. It also means ‘I am what I am because of who we all are.'”

It’s a great sentiment—reminds me that there is a role for everyone; all these disciplines are interconnected. The tools I use wouldn’t exist without chemists, computer scientists, engineers, and manufacturers. These people provide the paint, software, and pencils, right?

I can’t say I believe that art-making is the most important thing, but it is my thing. It’s the only thing I want to do for more than a few hours per day. I’m lucky to exist in a world that allows me to do what I want, all due to a rare combination of policy, economy, and technology. Pay me or don’t, I don’t care anymore. It’s no longer a question of success versus failure. The variety of media is endless, and if I had zero dollars, and nowhere to go, I would make collage from discarded paper.

However, no one should aimlessly scribble in a vacuum. I think this ‘Ubuntu’ idea is supposed to be reciprocal. I do want to make something that contributes to life, for others. If there was a worthwhile publication like Technology Review in need of an illustrator, I would accept a job offer. Failing that, I’ll be constantly in pursuit of work that advances someone—hopefully always myself, and hopefully other beings at some point.