Photoshop to HTML is a must have skill for making some killer designs. Slicing up a PS design and turning it into a web page is not easy to do without some instruction. Believe me I’ve tried. I think it’s just one of those things that really helps if you see it being done.

I have looked at many screencasts and how-to’s and nothing has really nailed it for me. I hope this new course by creativelive.com that starts on April 20th will be the one to explain all the missing parts for me. You can watch it for free every week if your off when they broadcast it or you can buy it so you can watch it at your convenience. It’s 39 bucks if you buy it before the classes are done on May 18th or after that it’s 89 bucks.

This is fresh modern content that should be a really good course, Erik Fadiman is the instructor and while I have no prior experience with Erik you can watch two intro videos to see exactly what he is going to cover. Erik is taking three or four popular/modern/current designs and slicing them up from PS to HTML/CSS. The only thing that has me slightly worried is that he is going to use DreamWeaver, so it will be interesting to see how that plays out. I do not use DW and don’t encourage anybody to if they are learning. Hey, maybe I’ll be so impressed with DW that I’ll want to buy it, but I doubt it…

So, check it out. Watch it for free if you can or buy it before May 18th to save a few bucks. I hope to show you my fresh Photoshop design turned HTML/CSS in a few months!

Never Stop Learning.

Photoshop to HTML with Erik Fadiman
creativeLIVE.com

You can go a long way with reading about .htaccess, HTTP protocol, or apache servers, but there comes a point where you would really like to have it explained by a talented teacher. In comes classroom video lectures from some top schools.

Here are some of my favorites:

AcademicEarth has a great web site that is full of great material covering a wide topic area. I have been using there computer science area to find some great video lectures on the basics of how the Internet works right on up to advanced programming. Look around in here and find some area your interested in, it’s a great way to kill a few hours days and learn something new.

From within AcademicEarth I found this web site from Harvard Extension School that is absolutely incredible! As of this post they have 5 classes online with video, lecture notes, slides, syllabus and source code. I am about half way through the “Building Dynamic Websites” course and it is incredible, I highly recommend it. Be sure to print out the lecture notes they are really helpful.

I have been learning a great deal from these lectures and they have made me want to be able to go back to a classroom setting. You really get so much more from a talented professor. Like I said print out the lecture notes and get your self a notebook and start learning. You can also print out the projects and try your hand at them.
Never Stop Learning!

Just found these yesterday, there is nothing like watching things being done. Go to iTunes and get all of these they are great. Click the iTunes link to go straight there.

Here is the link to the web site “JQuery For Designers” so you can roam around, be sure to look at the written tutorials as well, there are some good ones.

This tut came out the other day on Pixelmator’s website and caught my eye. I ended up changing quite a bit because I did not care for the halftone effect, play around with this one it was fun! Never Stop Learning…..

Follow this link and play with Pixelmator!

Good to be back on the blog today! I actually had to work this week, I hate it when work gets in the way of my technology habit.

Last week I got MAMP on my MacBookPro up and running with WordPress Installed. It is the only way to go! I have to admit I have been doing lots of “live” editing of the CSS on my theme and playing with completely different themes. Now I have my exact WordPress setup installed and running on my MBP and can experiment and tweak without making the actual changes to the live blog. This is a much better system for dealing with WordPress and when you move onto making webpages that use AJAX and PHP you can test right on your computer without having to wait for uploads to your live server. Now lets get into the meat of how this went, what I learned.

I thought about doing a complete step-by-step tutorial on how to do this with screenshots and such but I would just be repeating what others have already done. I am brand new at all of this, so I figure if I just show you the “tools” that I used and share any problems that I had with you it should be helpful. Please feel free to ask questions if you run into something I said that you don’t understand, I will try and help.

First Step: So, the first thing to do is watch this video by Andrew Gormley. Andrew does a great job and explains the limitations of the mac built-in Apache Server and steps you through installations of MAMP on your computer and then lightly touches on each feature within MAMP.
Notes: for right now do not worry about MAMP Pro, I will touch on this at the end. Follow Andrews directions and just stick with the free version of MAMP it is the only version most users will need. MAMP and MAMP Pro will install together, you get to use the Pro version for a trial test period then will have to pay. For now just use MAMP it’s what Andrew uses in his video.

Second Step: Now that you have MAMP installed and running you need to install WordPress or other CMS, there are other videos here at the MAMP Vimeo Channel on installing other CMS like Joomla. The next video is by Andrew also and is the start of step 2 watch it here. This video takes you through downloading WordPress and installing it into the proper MAMP directory and creating your first MySQL database. This was great learning for me, I did not understand the relationships between all the components like I should and doing these steps really made things clear.
Notes: If you follow everything through you should not have any problems at all, this is a very easy set-up. If you have to ever set-up WordPress manually on a real server this is exactly how you would do it also. I went back into my “real” server and played with everything to make sure things would of worked the same way. CAUTION! Be very careful experimenting with the back-end of your live server, you can screw things up in a hurry. I say this out of experience! yes, I screwed up my blog and took it off-line because in the process of getting into my SQL database to copy things I changed the password and then my WordPress PHP could not access the database. This was a simple fix of exactly what Andrew does in the video of going into your WordPress files (wp-config.php) via FTP and changing your database name and password. By the way, I had lousy support from my hosting provider, they do not help at all with your screw ups of your system files. I hope that your hosting company has better help than mine, I probably need to change.

Third Step: This one is optional but really helps in your theme and design process. You now have WordPress up and running on your MAMP server but now it helps to have your exact theme and blog content. Just go into your WordPress admin page like normal and everything works the same, download your current theme or if you have a customized theme copy it from your live server and paste it into your MAMP server. You will find all your theme files in your main WordPress folder under wp-content/themes. Once you have your theme downloaded it’s nice to have all of your content so you can truly see how changes to your theme look with all of your list’s, pictures, paragraphs, etc. you do this right in your WordPress admin, under the Tools Tab on your current blog go to tools and then export, save the file then on your MAMP WordPress admin page go to Tools and Import, here you can import the file you just exported and poof, you have all of your content. Now you can experiment away without having to make real changes to your live blog.

Final Notes: This is pretty painless if you follow the videos, I did have one problem that I could not solve and that was using MAMP Pro. I always tend to gravitate to the “upgraded” version of everything for the advanced tools and I like to support the folks that spend a ton of time making these wonderful pieces of software. I bought MAMP Pro and tried to set things up using it and would always get a permission denied message when trying to access my database. I believe it’s a small setting but hours of messing with it brought no fix for me. I ended up re-installing MAMP which comes with MAMP Pro but just using MAMP to setup my server not MAMP Pro. You always use the MAMP directory for installing databases and web pages but you have the option of using the MAMP Pro Interface for your settings and using advances features. Once you start using MAMP Pro you have to stick with it, if you set up your WordPress under the pro version and then try to access it with the regular free MAMP things will not work well, there is a caution against this on the MAMP FAQ, and a warning box on your computer if you start MAMP and not MAMP Pro. So, maybe you will have better luck with the Pro version than I had but for now I’m just using the free version and will play with the Pro version when I have time trying to get it to work. I will let you know when I solve the problem. I really want the Pro version to work, it has some very good advanced features.
I hope this helps you get things up and running, Never Stop Learning!

Links you will need all in one place:

• MAMP Channel on Vimeo for Videos
• MAMP Download
• WordPress Download

If you have started messing around with MAMP (Mac, Apache, MySQL, PHP)(It’s a Web-Server right on your computer) or WAMP (Windows) You’ll want to know about the new Video channel over at Vimeo.  Watching the videos to learn more is on my short list.

MAMP on Vimeo.

Here’s a quick tutorial on installing WordPress Manually (in case your web-hosting company does not have a one-click install option)

In the Woods – Installing WordPress Manually.

Another photoshop tut! this one was endless for me, I tweaked and changed stuff for several days and finally just said enough is enough! You can tweak forever. The crux of the non-stop tweaking is photoshop skills or the lacking thereof…… you always want to make something look better or more realistic. But, this is why we are doing PS tut’s in the first place to get better and learn new skills with PS.

This tut by Nikola Lazarevic aka Colaja from Nis, Serbia will make you use several different ways to extract objects from there background and there is a great technique using layers that I have never done before, extracting the pages from the notebook and placing them back on top so you can slide your polaroids under the pages! simple, yes, but very cool. When you get to the extraction of the coffee cup you are suppose to use paths and I could not get this to work, have never really dove into this area and there was not enough explanation for me, I clicked and clicked and selected and tried many different things to no avail. I ended up using the magnetic lasso tool to extract the cup and it did a great job with no further need to refine the edge. I played a lot with the warming filter and the scratch brushes to try making things look old and worn.

Here are the links:

• Vintage Traveler Diary Tut by abduzeedo.com
• Traveler Diary that I made

I’ve read reports that some of the links to downloads are gone now, maybe too much interest in them from this tut I’m not sure. I’ve confirmed that the journal is gone now, I would suggest that you search online for creative common stuff or just go to a stock photo site and pay a few bucks to download a old looking journal, make it more your own. Or you could take your own picture, but thats a whole other project ; ). I’ve also read that people are having trouble downloading the scratch brushes, the only trouble I ran into was not being able to download them from the Safari web browser, just use Firefox and all is well. If you know why this is please let me know, I am curious why one browser will not let you download and another will.

Have fun with this one and send me a link to what your artistic interpretation was. I might sneak back in and tweak just a littttle bit more…….

Wow, just found this one. I’ve looked at several and have had questions answered already.  Take a look around at these great tutorials on whatever you happen to be learning about; web programming, web design, css, database, php, ajax, moo tools and MORE. This is the site of Antonio Lupetti and he does a great job bringing together a lot of information and very useful downloads for everything Web. Start at the tutorials and then check out everything else……..

Woork Tutorials

This one was fun! I really enjoyed it and it got me playing around with some new skills, using a background image in CSS, using absolute positioning and using Photoshop to make a custom background. Well here is how to start (all this stuff is not from me, I use the tutorials from really talented people who take the time to spell everything out, I wish I had the skill to do full out tutorials….. maybe someday!) this tutorial from Chris Coyier “How To Make a Unique Website For Your Twitter Updates” is from May 16, 2008. The only thing that has changed is the twitter code that you cut and paste. Twitter now gives you a script that you cut and paste that has some styling to it already, so you can’t just have the tweets with no styling. Chris uses just the raw twitter feed and then uses CSS to customize everything. I could not find a way to just get the raw feed, so I adapted and used there script and just put it inside of my own box. This is actually really good, it makes you think and adapt to a problem…… do some styling in the twitter widget, some styling in your PS custom background and then finally in the CSS, there is a million different ways you could do this tutorial to adapt it to your Web site.

Here are the links to the pages that you will need:

• Tut: How To Make a Unique Website For Your Twitter Updates
• Twitter Widget Page
• Link to a whole bunch of free twitter birds to download and use

Here are the finished custom Twitter pages:

• Chris Coyier Example Twitter Page From Tutorial
• Custom Twitter Page That I Made
• Here is my Photoshop background that I made
• Here is the CSS that I used

Overall this was a great tut and I recommend you dive into this one. Let me know what you think and give me a link to your custom twitter page!