WPasaSite_En_title.001

How to Use WordPress as a Website (not Blog)

I’ve been fortunate to do a lot of speaking lately, and I’ll be slowly getting those presentations online, but I wanted to share this one presentation I did for the Stampa all’Estera, the Foreign Press in Milan.

They specifically asked me to speak about using WordPress as a website, instead of a blog, as many journalists are now interested in maintaining personal websites as well as continuing to create all the content they do for external publications.

I really only needed one slide to explain how to do that – it’s very easy! I’ll let you discover how via the slides.

The presentation is geared at those very new to WordPress – so new, in fact, that I included a little bit about WordPress’ history and its community which I think are strong points in choosing to use it (awesome people are making an awesome product).

We spent a lot of time in questions after the presentation, many of which would have been answered by articles I’ve already written on this site, like:

The slides aren’t actually meant to be self-explanatory – I went in-depth into most of the concepts and screenshots in person, and don’t like to put much content in my slides, so if you have questions, be sure to let me know!

In English:

In Italian:

About these ads
gimp

7 Easy Photoshop Tricks you can do with GIMP software (for Free!)

gimpPhotoshop (from Adobe) is one of the most powerful and interesting graphics editing software available. With a few keystrokes you can take a mediocre photo to a great one, create a logo for your company or personalize your Twitter background. I’ve been using Photoshop for almost 15 years, way back when it was just Photoshop 3.0 and pirated copies were traded on the university ethernet. Um, or you bought a copy with your student discount.

Even now the cost of Photoshop is enough to make your jaw drop (from $200 to $1400), and therefore it is quite an investment to use for those that are casually interested in improving their photos or images.

This year, when I switched to a Mac (thanks to the Vista-XP-Windows7 Bermuda Triangle fiasco) the thing I was most reluctant to leave behind was my working copy of Photoshop.

GIMP (The GNU Image Manipulation Program) is a free, open source program that is very powerful and in many ways better than Photoshop because it’s free and has a great community behind it. Because it lets you be a powerful graphics editor, too. I started playing with GIMP (or the GIMP as some say) more than a year ago, when I didn’t have Photoshop on my work computer and wanted to see how it worked.

Everyone says GIMP has a steep learning curve. They are right. Especially if you’ve never used Photoshop.

But I will show you how you can do 7 easy tricks you would do in Photoshop for absolutely free using GIMP. Of course, these are not really “tricks” in the sense that they are neither original nor groundbreaking, but after learning them and where these functions are located in GIMP, I guarantee you’ll be comfortable with GIMP and on your way to using a powerful and free open source software within a few minutes.

Here are the tricks we’ll cover:

  1. Resize an image
  2. Add a guide
  3. Rotate the image to correct/straighten a horizon
  4. Crop an image
  5. Change a color image into black and white
  6. Fix blemishes or remove unwanted things using Clone
  7. Add a text layer watermark

Note: Menu and toolbar names will be in bold and an indication of a nested menu item will be preceded by “>” (i.e., File > Open)

First let’s take a look at our original image we’re going to work on in GIMP.

It’s not a terrible image, right? It’s got some potential. So let’s get to work.

1. Resize an image

The last thing I usually do when working on an image for my blog or for sharing online is to resize the photo, but it may be something you have to do quite often, so let’s do that now. You won’t need an image that is 3000 pixels across if you’re posting on Flickr or something similar – usually 1000 pixels in width is a safe bet to do a quick resize. Note, this is not a crop – I am not removing anything from the image, for now.

After opening the image, navigate to Image > Scale Image to get the resize dialog box.

And here’s the dialog box. Note that the “chain link” is linked by default, meaning that GIMP will retain the proportions of the image (i.e., an image that is originally 200×100 will reduce to 100×50, etc.) If you need to resize to a specific size (i.e., 100×37) you’ll want to click on the chain to remove the proportion constraint. Also pixels is the default denomination – you can also choose inches or percent to reduce the image by 50%, etc.

Insert the new Height or Width, press your enter/return key and the other measurement will update automatically if the proportions are linked. Once you have entered the measurements you desire, click “Scale” to resize the image.

2. Add a Guide

Guides can be useful to mark the halfway point of an image, when aligning text or different layers or to help correct a horizon. In this example, we’re going to add a guide so we can do the last task.

Go to Image > Guides – then you can choose to add a guide in several ways: by percent (50% horizontally, 10% vertically, etc.), arbitrarily (by pixel) or from the selection – for this example we’ll use a simple guide by percent.

I’ll put the horizontal a little lower than the middle of the image, at 60% horizontal.

Here you can see the guide on the horizontal.

3. Rotate an image (in this case, to fix a horizontal)

Sometimes a picture needs to be rotated because the photographer wants to give it a different look, or feeling, or sometimes you’d just like to straighten up the picture a bit. To rotate the image 90 degrees clockwise/counter-clockwise/or 180 degrees, you can easily do that with Image > Transform and then by choosing the method you’re interested in.

But what if you need to rotate the image just a little? Just a few degrees, or 10, or 45? It wasn’t completely intuitive for me to find how to rotate an image just a little bit. In GIMP you can rotate a layer just a little bit, which is why I suggest doing any rotating to the original image before adding text layers or other modifications.

To rotate the image, access it at Layer > Transform > Arbitrary Rotation:

The dialog box give you the opportunity to enter the degrees the image needs to be rotated, use a slider to rotate it arbitrarily, or you can do it directly on the image by clicking and rotating. This particular photo only needed about 2 degrees of a nudge to straighten it up.

4. Crop an image

Now the image has been straightened, but there are some “gray areas” since now the image doesn’t fill up all the rectangular space. So we need to crop it!

To crop, I usually select the area I want to keep, and then crop. First, select the Rectangle Select Tool in the Toolbox in the upper left. I like to use an additional setting to help me keep the crop in proportion with the original image – in this case it’s a vertical photo so I’m going to select “Fixed Aspect Ratio” on the lower right of the Toolbox and insert 36:54 (width:height) for my image (or 2:3). [Note: this ratio will not work for images from every camera - check your own image ratio]

Then I select the image that no gray/empty area is included in the selection. After selecting, you modify the selection by hovering the mouse at any of the four sides of the image and GIMP will let you extend/decrease the size.

Then, select Image > Crop to Selection.

Now I have an image that is straight and correctly cropped.

5. Change a color image into a black and white image

Sometimes a black and white photo can add some austerity, increase the drama of a photo, or sometimes it’s just something you want instead of the color original. There’s no need to take photos in black and white originally because you can always use software after to turn them black and white.

In GIMP there are actually two different ways to change a color image into a black and white one – by changing the mode to grayscale, or by desaturating it.

To change the mode, go to Image > Mode > Grayscale.

To change the desaturation, go to Colors > Desaturate. I usually compare the different shades with “Lightness” “Luminosity” or “Average” to see which effect I like better.

6. Remove unwanted blemishes from a photo with the Clone Tool

Let’s not turn the photo black and white just yet. Perhaps you didn’t notice that little duck in my original photo (see it there in the middle right?) or that sun glint on the water surface on the bottom left, but we’re going to remove the little guy and that glare to show you the potential of the Clone tool. Let’s take a closer look:

First select the Clone icon (the little stamp) in the Toolbox, and then the Brush size (lower in the Toolbox) you’ll need to use – if it’s a small detail, you’ll need a finer/smaller brush, if it’s a larger area, increase the size of the brush.

Then, select an area using Alt+ click or Option + Click that will be your base/reference area for the cloning. You may have to move this several times to get the effect you want. Bye bye little duckie!

And now we have a cleaner picture:

7. Add a text layer watermark

You may not like watermarks on photos (read about Understanding Copyright on this site, and more about copyrighting photos and watermarking), but I think it’s a simple precaution that many bloggers and photographers do today. You can create a watermark that’s more stylish or beautiful, but to start with, you can just add a text layer to the image and reduce its opacity so that it appears translucent.

Click on the Text Tool (A icon) in the Toolbox, then click and drag on the image where you’d like to put the text box. In the text dialog box, insert the text you want to use as your watermark – for example, your name, your domain, or your blog name.

Then, click on the layer in the Layer Toolbox and reduce the opacity from 100% to an opacity that is comfortable for your watermark. Voila!

And now my picture is ready to be saved and put online! What else would you like to know how to do with GIMP?

Here are some other GIMP tutorial sites, and information on free alternatives to Photoshop:

image by yohann.aberkane

wp

How to Install and Try WordPress on your Home Computer

wpIf you’ve never used WordPress or even the free / hosted version on WordPress.com, you might have no idea what it really means to “be on WordPress” – how the interface works, what you’ll need to do with your server, and if you’re really going to like it.

You might not understand what all the fuss is about – global WordCamps, plugins, themes?

Luckily, there’s a way you can play with WordPress on your own computer, without having to buy or commit to anything!

In a few steps, you can install this software that will simulate a web server on your computer, and you’ll have WordPress up and running. You can install this software package on a Windows, Linux or Mac computer and then install WordPress.

Why should you install WordPress on your home computer? After you’ve installed WordPress, then you can:

Setting it up on your home computer means you can experiment, make mistakes and stop work whenever you want because the site is accessible only to you on your personal computer.

Not only is it free, it’s really easy to use and install.

Since WordPress is Open Source and free, it relies on several other open source and free software components to run. So that means it’s completely free for you to try out WordPress. On a more technical note, you just have to remember that there are four main components to get WordPress working: the web server software, the database engine and the programming language engine(s).

There’s an installation package that will give you all four of them called XAMPP. XAMPP has these four components: Apache HTTPD (web server), MySQL (database engine) and PHP and Perl (programming language engines). Each of these can be downloaded and installed separately, but the XAMPP package does it all in one go so you’re sure to have the right versions.  Note: for the purposes of this article, I am assuming you will installing this for use on your personal computer, to be accessed only by you on that same computer for testing reasons. This is not an article about setting up a web server on your computer to be accessed externally.

In simple terms, Apache HTTPD is the software that turns your computer into a web server and to allow it to “serve” content in the form of web pages, images, and other content you’d find on a website when you use – it’s what happens when you insert “http://” in your web browser address bar.

MySQL is the database server. Years ago a web page consisted of actual files for each page of the site like index.html, contact.html, etc. Each of these files was sitting in your webserver’s hard drive and had be downloaded individually. Now with more modern sites, and especially with WordPress, each page is created more dynamically because the majority of the content is actually stored in a database. When someone wants to see “Sara’s Page” WordPress will put the pieces together dynamically, from the header to the footer with the blog’s theme, sidebars and formatting.

PHP and Perl are two programming languages that WordPress needs. PHP is the language that WordPress is written in and a language that was made for scripting web pages. Perl is a very succinct and powerful programming language and is often included in WordPress code (that you won’t have to worry about). You need to install these two engines so that when the PHP / Perl code is run, it can be interpreted and executed on your local computer.

In order to get WordPress running on your computer, here is the overview of the steps to do it – make sure you’re referencing the manuals for each installation to have detailed steps.

  1. Download and install XAMPP. Make sure you choose an easy to remember folder to install it in (like C:xampp)

    1. http://www.apachefriends.org/en/xampp.html
      from Apache Friends
    2. or from SourceForge
      http://sourceforge.net/projects/xampp/
  2. Download the latest version of WordPress

    1. http://wordpress.org/download/
  3. Unzip/copy the WordPress files into its own subdirectory in the folder that is the “web directory” on your local computer – this will be defined during the installation in #1. It will be something like C:/yourxamppinstallationdirectory/htdocs – in the above example: C:/xampp/htdocs/mywordpressfolder
  4. Install WordPress following the directions on the Installing WordPress page. And you’re done!

For multiple instances of WordPress, i.e., to experiment with more than one blog at the same time, just repeat steps 3 and 4 in another subdirectory of your web directory folder.

Now you’re read to experiment with WordPress with no hassle or commitment!

If you need a more detailed explanation, here’s screenshots of all the steps for installing WordPress on Windows XP thanks to sp-arun

Installing WordPress Locally in Windows Xp Using WampServer
http://d1.scribdassets.com/ScribdViewer.swf?document_id=20309755&access_key=key-1mqdiwczayor83igvzyn&page=1&version=1&viewMode=

Photo by ericmmartin

Getting Involved in Open Source Software

Here’s a presentation I gave at the Girl Geek Dinners in Milan on October 24, 2008, with Bruna Gardella. There’s a version in Italian, too.

Some highlights from the presentation:

  • What is Open Source (OS)
  • Why Open Source
  • Open Source in the world
  • The Girl Geek and the Open Source World
  • How to Contribute
  • Appendix A: Some Open Source Alternatives for Proprietary Software