the title screen to replacemy attempt at the title screen (5 hours)
Here I made the classic mistake of making what I thought the client wanted, rather than what they asked for. They asked for something “high-tech and sleek”, which I soon forgot, given the app’s title “Roadmap to the Past”. When I showed the client my title screen, he of course reiterated his initial description. “I’m wondering if maybe the old-timey map and parchment effect are antithetical to my concept. I want this thing to feel contemporary and sleek.”
I don’t really understand why he wanted a historical app to have a high-tech feel, but it was a mistake for me to not follow the directions.
I set out trying to make a new title screen that met the specifications. After about 6.5 more hours without getting anywhere, I realized I just didn’t have the knowledge or skills yet to do it. Any one of the following obstacles would have been a good challenge, but combined, they were too much for me.
lack of familiarity with iPhone aesthetics
lack of experience producing sleek designs
an unusual mash-up of history and modern design
After expressing this to the client, he said “screw it dude. you’ve done plenty for me. seriously. I think we’re good with what we’ve got, as right now, this app is the least of my worries.” After that he even offered to pay me for some last minute work he needed done, but in the end, he didn’t need it.
Since I never completed the sleek-looking title screen, I don’t have a graphic to show for it. I do however have some attempts I made at producing shiny text. Here are the better ones, for your viewing pleasure:
3D floating text (rendered in Blender)same as above, but not floatingsame as above, but bordered instead of shadowed2D text (made in Inkscape)
40.5 hours spent so far
Productivity
Lately I’ve been having a lot of trouble being productive. In particular, I think having an irregular is causing problems.
In an attempt to get myself to be productive I’ve done two things. First, I installed RescueTime to automatically track whether I’m being productive. Second, I made a spreadsheet on Google Docs for manually tracking various other things.
Here’s the things I currently have in it: daily goals, wake up time, bedtime, time spent getting ready, did i work on my daily goals before doing anything else?, did i stop working before dinner?, did i get exercise?, and rate my consciousness on a scale of 0 to 10. At the bottom I also have weekly goals, week in review, and possible goals for next week.
Other than setting up productivity tracking I’ve been doing quite poorly so far. If learning to be productive is the only thing I get out of doing 100 hours of photoshops for free, it will definitely have been worth it.
What do you want to see on this blog?
So far I’ve been making my best guess at what I think people want to see here. But maybe you can help me do better.
Now’s your chance! Tell me what I should or shouldn’t do. How can I make this blog more interesting or entertaining to you? Comment here.
-Alan
Photoshop Day 11
request complete: Design 1 inch x 1 inch stickers for Mixed! (a cake company).
total time spent: 2.25 hours on this particular design (1.25 today) programs used: Inkscape
feedback: Ooo! I love them! They look like candies.
Most of the time I spent on this today was getting it into .eps files for printing. I haven’t worked with a printing company before, so I wasn’t really sure what to do. I made sure the stickers were the right scale (1 inch) and saved as an eps in Inkscape. I also made files for individual stickers too, just in case.
29 hours spent so far
Photoshop Day 10
request: Redo an iPhone app mockup that a designer did a poor job on.
Screen description (#1 of 4): First, the app uses your phone’s GPS to track your location and shows you a list of the nearest historical hotspots.
other designer’s versionmy version
time spent: 4 hours programs used: Inkscape
While the other designer’s version would make a fairly cool title screen, I didn’t think it reflected the description. My version is inspired by the google maps iPhone app. The beacon indicates the user’s location and the historical hotspots.
The main difficulty of this screen was getting high resolution google maps images. The beacon and markers I made in Inkscape. To get a high-res map I had to use the Google Static Maps API. I also used statusbar UI from a public domain iPhone svg I found.
27.75 hours spent so far
Photoshop Day 9
previous progresscurrent progress
time spent: 2.5 more hours programs used: Inkscape
I traced the elephants. I followed the source image almost exactly, except for the hind legs. I also had to add a tail.
I started the cat. I don’t have as good of a reference image, so I’m not sure how well it will go. The face is based on a different image.
I bolded the letters slightly.
Blog changes
Today I made a few important changes to my blog (listed below). I’ve included a guide for each change that I made, so you can learn how to do the same on your own tumblr blog.
I added google analytics so I can track page views. (guide)
I made my avatar always face towards my content. (guide below)
Guide: Make your tumblr avatar always face your content
Yesterday I learned that when people see a picture of a person online, their eyes often follow the gaze of the picture. This can be used to direct the attention of your readers. But if you have a picture of a person facing away from your content, you risk directing attention away from your page.
When I opened my tumblr blog, the first thing I noticed was that my avatar was facing right, looking away from my blog. I tried flipping my avatar, but that caused the same problem on the dashboard, where avatars are positioned to the left of posts. So I set about trying to figure out a way to make my avatar face left on my blog (towards the blog) and right on the dashboard (towards the post).
Here’s the method I figured out (for the default theme): First, set your avatar to one that faces to the right. That will be correct for the dashboard. To flip your avatar on the blog, you have to be a little crafty. Normally your avatar will be placed over an avatar background, making it look like it has a border.
avatar
+
avatar background
=
avatar with background
What we’re going to do is hide the avatar (that’s facing the wrong way), and replace the background with a new background that has your left-facing avatar in it.
hidden avatar
+
left-facing avatar with background
=
left-facing avatar with background
First copy the avatar background above and open it up in your favorite graphics program. Paste your left-facing avatar onto it and line it up with the background. You can mirror your existing avatar, or use an entirely different one. Just make sure it’s facing left. Save it as a .png (because there’s transparency), and upload it somewhere.
All that’s left is to make the changes described above to your blog. Click “Customize appearance” then “Advanced”. Copy the code below and paste it in “Add custom CSS”. Replace YOUR-IMAGE-URL with the URL of the avatar with background that you just uploaded. Click ‘save” and cross your fingers.
petrified forest progresswhat i had before i startedprevious prototype for comparison
time spent: 2.75 more hours programs used: Inkscape (tree design and moonlight), GIMP (shading)
I added ridges to the trunk.
Putting ridges on the branches looked bad, but without them the shading was too light, so I figured out how to fix that.
I added some whole-tree shading to make it look more 3-dimensional.
I made the branches in the background slightly darker than those in the foreground.
This request is shaping up to be quite a challenge. I’m kind of suspicious this type of thing would be better done if it was hand-drawn. But I’m doing photoshop right now, so photoshop I will use.
request: Design 1-inch stickers for Mixed! (a cake company) using their existing color scheme. They recommended a swirly, circular, cupcake-like design.
several color options (temporary font)
time spent: 1 hour programs used: Inkscape
Inkscape has a spiral tool, so this went pretty quickly. The main challenge was getting the text to stand out over the swirl. My solution was to border the text with the same color as the background, making it look like the spiral stops before it hits the text.
Edit: Got a response: “Ooo! I love them! They look like candies. Continue on!”
Photoshop Day 7
I didn’t get very much useful done today. I probably stayed up too late last night.
request: Make a logo to go on stickers for Mixed!.
logo found on Mixed! website (owned by them)my sticker designs
time spent: 1.5 hours programs used: Inkscape (borders), GIMP (cutting out logo)
I took a screenshot of the logo on the website, cropped it out, and tried out various borders. I had to reconcile the fact that stickers are white, but the logo’s background is black.
The top design is my favorite, but it requires the stickers to be custom-cut, which is probably more expensive. To get the form-fitting borders, I made shapes identical to the ones in the logo, moved them to the background, and added a thick, curved, border to them.
Edit: Turns out what they really wanted was 1 inch by 1 inch stickers. See Day 8.
I’ll be gone for a few days.
My grandma has pneumonia, so I’ll be visiting her this weekend. I’ll resume working on Tuesday.