I quit my work. So I Needed to show something new, how I am now, and forget that old portfolio that didn’t renewed over 5 years. The hardest part is already done. After months of trying to redesign the blog and portfolio, I finally get it, but there is a lot of work to do. The next step is to make the blog visible and adaptable to any device. “After that? Write interesting content, as well as new works, proyects and new articles.
Meanwhile, fix some bugs and polish some things a bit.

Articles may at first be a little cold and I can’t express very well, please be patient, I’m practicing, but everything will come.

Blog and Portfolio, the original idea

The original idea was to make a minisite to show my portfolio and promote myself as a designer and find a new job. As you all know, just before leaving my job, Tohoku earthquake hit and, well, all my plans changed a bit. Life here in Tokyo wobbled a bit and the main obvective was have something to show, well, it took me more time than I thought.
The minisite, with game included, is on the list of things to do after finding a new job. I promise it will be fun.
On the other side, I wanted to remove some personal area from the blog and focus on temas like design and programming, not only for others to read it, but to have it easily accessible for me too.

Problems

At first it was lack of time, working in Japan you have zero free time. When I started the blog and then the design and programming, the problems started. It was my first serious contact with WordPress and the biggest problem came when I write the blog in several languages, there are several plugins for do it and well, all have some bugs and I had to adapt all .php files for this situation.
On the other hand, when I started my career programming for Flash one of the reasons was that I didn’t want to rewrite the code for every browser. With Flash works in one, works in alls. So start dealing with floats and that stuff again was a bit chaotic, luckily me, I have good friends that helped me. For me it is still easier to program in ActionScript than HTML!

Solutions

I wanted to use certain things that I thought it was necessary, as a semantic code in HTML5, use the new CSS3, web fonts thanks Typekit, and a couple of things that remain on racks.
Learned a lot of things and test by failure and error. It was fun, especially after seeing the result.

There are some things that I wouldn’t include in the portfolio but I would write here to tell a bit how I got to the point where I am, each and every one of my experiences have made me as I am.

Fine Arts

I studied Fine Arts during 5 years at the University of Granada, specializing in Graphic Design. It was a great experience, but I must say that except for a few teachers got the best from my classmates, there met my first time with oneeyedman . I bought my first PC for Christmas 1998.
I’ve always liked painting and design, including industrial, but I had some interest in programming, and it was not until last moment when I opted for Fine Arts. I will never regret.


It’s ages since I don’t play with oil or coal, but sometimes I like to get dirty with them.

Kandorgraphics

This was a really good time, I worked 4 years for this company. At first I became a web designer for Flash and participated in some work as a 3D modeler. Again, the best of the environment was my coworkers. I met most of them at the University, so the atmosphere was fantastic.
I participated in a project where we mix 3D and Flash, it was very interesting, we’re talking 2001, 10 years ago. We used Cult3D, now discontinued, with which we could rotate multiple objects within Flash.

Another big project was the preparatives of an animated film, only participated in the promotion of the film, which made several models.

Kandorgraphics has continued growing and now is a big company. Here you can see one of the first times we were printed on newspapers, the team at that time, many of them but me are still working there.

Freelance

After that with the intention to move to Japan I worked one year as a freelancer, doing some minisites in Flash and some private projects.

Nonoloa is an ec-site selling clothes. I made the 2006 site.

Preparing the body to travel to Japan … this is an idea that crossed my head and I did it in 3D. VRay Rendering in 3ds Max.

Japan

I studied for two years at Tokai University in Shizuoka Prefecture, after that I moved to Tokyo looking for a job. Within a month I was working.

Sonicjam

Sonicjam was my first experience in Japan, were only 7 months of work there, it was very intense and crazy pace. It was the first time I worked 37 hours without sleeping and eating in front the computer. I began to understand how the Japanese world is and how it differs from the rest of the world.

Aoi-DC

Before you spend a year working for Sonicjam, someone from Aoi-DC saw my work and offered me a job. My Japanese has improved significantly and I could really see how Japanese companies works. But that it’s a different story.

Working with version control should be part of your daily work, if it is not already, you can save a lot of headaches. If you are freelance, or your company doesn’t work with version control because your project is not bigger enough, or if you work on two computers (home and office) I recommend you work under version control and use Dropbox to access to your project anywhere you are or to work with a partner.

What I’ll explain here is how to create a repository on Dropbox, without pay any SVN hosting services, and how to work with from Flash Builder. You can use any other program that has SVN support. You can share your repository with colleagues or sync it all at home.

Tools

• Flash Builder
• Versions (50 dollars). You can use another client, but this is my favorite.
• Dropbox (2,5Gb free space)

Workflow

Create a folder in Dropbox folder to store your repositories (projects under version control). This will do just once.
Create a new repository with Versions in that folder, it will be our project repository.
Do a “check out” where we go to work locally (not Dropbox).
Work only and exclusively in our local folder.
Update the repository with each major change (do a “commit” to the repository)
Continue working
If you work with a team, share this folder using Dropbox.

Why not work directly in Dropbox?
Perhaps you wonder why not work directly with Dropbox, since this is a version control, if you sync one and have our history files and such.
We do not want to do that for several reasons:
Dropbox is not a real version control and we can operate it from our favorite app.
In Dropbox website we have a history of files, but nothing more, with SVN we have access to comments made with each change, compare files from previous versions and all inside Flash Builder.
Although the main reason is you will not want to work more than one person in the same file only with Dropbox. Could be a hell.

First steps

Create a Dropbox folder to store all our repositories from now. In my case is Dropbox/SVN-Repositories/
Make sure that we will use the library 1.6 on Versions preferences.

2. Create a local repository

Select our folder where we’ll store all our repositories.

3. Checkout your repository, this is a local copy to work with. Create a folder within your workspace folder, in this case “testSVN” within that folder, Versions will create your local copy of the repository with the name you want, in our case DEV.

The repository and the local copy are working, let’s make Flash Builder working with SVN.

Install Subversion on your OSX

Download and install the Subversions binaries for your OS from CollabNet

Install Subeclipse on Flash Builder

1. Select Install new software on the Flash menu Builder Help (Help> Install new software …)

2. Select Add

Flash Builder is based on Eclipse 3.6.1 “Helios” and according to the Subeclipse website we have to install version 1.6.x. In the field enter the name you want to remember the plugin, and the next url in Location: http://subclipse.tigris.org/update_1.6.x, que trabaja con Subversion 1.6.

3. Select only the required options

Click Next, a summary of the installation is showed, click Next, accept the license and then finish. Maybe a security warning is showed, proceed with installation.

Everything is installed, let’s go to work with Flash Builder and Subversion!

Getting started with subversion in Flash Builder

1. Create a new actionscript project and select the folder where we have our local copy of the repository.

2. As you can see, Subversion is already running. There is a question mark (?) next to the files and folders, it means that version control doesn’t know what to do with these files, they are unknown to the repository.

3. Select the folders and files, press the right mouse button and select Team> Add to Version Control. Once this is done we will see a + mark next to the files, meaning that they have been added to the repository in next commit.

In the Package Explorer panel, select our project, in the context menu select Team> Commit. We’ll upload our files to the repository.
On the next screen, select the files you want to update and make a comment about the changes made, as is our first update, type “Initial commit.
When changes have been made, the following icon represents that the files are updated with the repository.

Check the files are already in the repository with Versions.

Check the commits historial.

Working with the repository from another computer

1. Well, we already have a computer running subversion, by coincidences of life I have to work from my laptop, so I set my project on that computer too.
File> Import> Other and select the folder in SVN the only option there: Checkout projects from SVN
On the next screen select Create new repository location.
Enter the path to our repository (of the Dropbox). We can access this information by pressing CTRL + I in Versions, in our case file://localhost/Users/peruho/Dropbox/SVN-Repositories/testSVN

On the next screen select the root of our repository and click next.
Select Checkout as a project in the workspace, type the project name and click Next
Select the path where you want the local copy /2011/testSVN/DEV
2. Everything is running on our laptop.

Things to consider

There are some important things we must not forget, like not touch our Dropbox folder (SVN-repositories), never change anything, keep in mind that it is a database where Subversion is storing all our changes.
When we want to make a copy of our working copy, note that you can’t simply make a copy of the folder from Finder, if you do that you are copying too a lot of hidden files that store information from our working copy, and could be a mess. So we have to export to a new folder, this can be done from Versions.
If we want to upload a clean copy to the repository of a project we have to select import.

I like to work fast, and I like to have the tools as I like, I always adapt Photoshop to my way of working. But my way is always evolving and changing over time, usually I try new methods for a while if I improve my performance change the way I work and the Photoshop preferences. Have you tried it, or do you work with Photoshop as it comes from the factory?

I hope to do a series of articles talking about it. Today I’m talking about two things that I believe are most important before start Photoshop, are the workspace and guides.We gonna customize the keyboard in another occasion.

Workspace

So I always work with “Full Screen With Menu Bar” mode, you can change it up, below the top menus, or pressing the F key (default) and change documents with Control+Tab. So in this mode we can working with a wider space and we can move the image edge to the center of the screen, something you can’t do in windowed mode.
I have all the panels on my right. The column nearest the document is the Tools panel, in the second column usually I have the character panel and layer panel, giving much more space to the last one.
The OSX Dock is at the right and occupy the minimum space possible and only with the apps I have open at the time.

Why am I doing this? For one simple reason: I am right handed, and as with the pen, I like to have the most use objects at my right (except my coffee mug!), having the Tool panel on the left and the other panels on the right is a waste of time and energy. You also win a lot of space to work. This is how I see it, and if you try it you’ll notice.

Guides

With guides made two changes: the color and style. The vibrant blue by default is not very useful as a guide, it diverts attention too, besides when looking for more precision the solid line doesn’t help. I use dotted red color guide, because I don’t usually make designs with excessive use of red, if it were the case, I change it for the occasion. WIth a dotted line, makes me see better the design I’m working on and if I have to make a pixel adjustment, I can do it without problem.

I use a green color with Smart Guides, in this case if I need a vibrant color to attract the attention, because I use it a very short time. I assign the keyboard shortcut Command + U, which is the same as Illustrator and so I can unify my shortcuts. If you do not know what are the Smart Guides, what are you waiting for?, check it out! When you move an object with Smart Guides enabled, smart guides shows up and help you to aline your object with others.

Layers panel Options

To work better with Layers, open options panel on and turn off layer thumbnails, you gain a lot of space. Disable the following too:
“Expand New Effects” when creating an effect, it will not expand and have more order in your layers.
“Add a ‘copy’ to Copied Layers and Groups.” This is required, turn off the word “copy” when you copy a layer, I think it’s an option that all we have desired since there are layers in Photoshop.

It isn’t very dense, slightly more than 200 pages, in which Dan says with a stunning clarity how to resolve certain problems in several ways, that is because the first chapter is called “Ask yourself always … What if …?”

Boost your CSS

The book’s aim is to make your design bullet-proofed, all through the CSS. I love the way Dan present the problem and guide us through it, showing us what is right and what is wrong and then showing us how to solve them. It is one of the few programming books I’ve ever had in my hands to explain things so well.

The chapter “The Fluid Grid” is written by Ethan Marcotte , who wrote over a year ago that wonderful article about Responsive Web Design in A List Apart. Here the topic in greater depth and detail. A luxury on your hands if you’re interested in adapt your design to mobile devices.

DVD content

The DVD contentis very short, actually is a 10-point checklist to make your design bullet-proofed. Is it worth buying the DVD version?
Well, it depends on, the price difference is not very big and always is good to have a look, as well is a bonus to the book’s contents.

Conclusions

Dan knows about what he’s talking, and do it through a daily language, as if we were having coffee and telling you things that every colleague tells you.
This book is perfect for those who want to go a step further, for those who like perfection and well done things.
Maybe you will want more, but it is enough to make your designs more robust.

In its second version the concept and design intended for use on desktop and as mobile application.
Flash is a good tool to create simple and quick prototypes and test the application flow before production, and verify design flaws.

Rol

Responsible for the design and programming, likewise participated in the planning of the project.

Rol

I was part of the team that handled the application flow and the main designer of identity, logo and interface of the application.
For me it was a complicated project, customer requirements conflicted with the needs of the user. It was the first time we worked with an external iPhone developers team and there was many misunderstandings in the communications, that complicated the project. Over the complications, the application met its objectives.

Results

No. 1 in the App Store Healthcare & Fitness category.
33,120 downloads within 3 months after the first release.
20% sales store increased.

Rol

The design of the site.

We tried several 3D libraries, including Papervision 3D, but the number of pages and information were so huge that we dismiss the idea.

Another problem was the updates needed, once a week for 12 months. We had to make a stable and easy way to update so much content.

Rol

I was responsible for various parts within the project, for example, create several prototypes to evaluate whether it was factible to do in 3D, although Away 3D gave us the best result, finally we didn’t use it.

Screenshots of the prototype in Away3D.