Monday, November 28, 2011

How to convert PDF files to ePub files to read on your iPad with iBooks

This tutorial will guide you through the process of converting PDF files so that they can be read in iBooks, the iPad application.


Update: you can now read PDF files directly in iBooks, without having to convert them to .epub or any other format. See this tutorial for a quick overview of how to add PDF files to iBooks to read on your iPad, iPhone or iPod Touch.
This tutorial will remain up just in case someone wants to create an .epub of their PDF.
iBooks uses an ebook format called ePub. Using a free converter application (and ebook manager) called calibre you can quickly convert PDF (and other file formats) to .epub files, which you can then transfer to your iPad for reading in iBooks. This tutorial will take you step by step through the entire process.
  1. Start out by finding a PDF you want to convert. In this example I used The Adventures of Tom Sawyer (which btw is free in the iTunes Book Store – but it’s a PDF I had handy, so that’s why I’m using it).
  2. Download and install calibre. It comes in versions for Windows, OS X and Linux. The interface is very slightly different in each version (not much). The screenshots in this tutorial are from the OS X version – but Windows users should have no problem at all following along.
  3. Once installed, open calibre. The first time you run calibre it will take you through a quick setup. The first thing you’ll want to do is specify your ‘ebooks’ folder. This is the location you’ll save your .epub files. Click the Change button.

  4. click to enlarge

  5. Select the folder you want to save all of your ePub files in.

  6. click to enlarge

  7. Back at the Welcome screen, click the Continue button.

  8. click to enlarge

  9. Select Apple from the Manufacturers list, and iPhone/iTouch + Stanza from the Devices list. Click Continue.

  10. click to enlarge

  11. You can ignore the information on this screen and click Continue. Or if you’re interested, give it a read. With that said, enabling Turn on the content server will not help us out.

  12. click to enlarge

  13. Now you’re at the main calibre interface. Click the Add books button in the top-left corner of the window.

  14. click to enlarge

  15. Navigate to a PDF file that you want to convert to an .epub file. Select it and click Open.

  16. click to enlarge

  17. Now click the small ‘arrow’ next to the Edit meta information and select Download metadata and cover files.

  18. click to enlarge

  19. calibre will now download additional information about your PDF/ebook – if it can find it. If it’s an eBook (as a .pdf), you may need to manually enter the book title and author name if it isn’t present when you load it into calibre initially.

  20. click to enlarge

  21. When it finds the additional meta data and a book cover, it will appear in the bottom pane of the calibre window.

  22. click to enlarge

  23. Now we’ll start the actual conversion process. Make sure your PDF file is selected in the main list of books, and then click the small arrow next to the Convert E-books button. From the list that will appear, select Convert individually

  24. click to enlarge

  25. You’ll be prompted with a “summary” window prior to calibre making the final conversion. Click the OK button.

  26. click to enlarge

  27. Depending on the size of your PDF/eBook the conversion process will vary. It took less than 10 seconds to convert my 200 page PDF. If you’re using a Mac and have growl installed, you’ll get a window notifying you that the conversion has finished.

  28. And now in the folder you specified way back in step #3 will contain an .epub version of your PDF. This is the file we’ll upload to your iPad.

  29. click to enlarge

  30. Connect your iPad to your Mac or PC, and launch iTunes. From the iTunes menu select File -> Add to Library…

  31. click to enlarge

  32. Navigate to your newly created .epub file, select it and click Choose.

  33. click to enlarge

  34. The new .epub file will now appear in the Books section of iTunes.

  35. click to enlarge

  36. If you sync all your Books to your iPad, select your iPad in iTunes and select the Books tab. After confirming your new .epub book is listed, click the Sync button.

  37. click to enlarge

  38. Now launch iBooks on your iPad. There it is! From PDF to ePub and into iBooks.

  39. click to enlarge

Monday, November 21, 2011

How to Create an Iphone App Layout in Photoshop


Step 1:Setting up the Workspace

Okay! First step is to set up the workspace.Open Photoshop (For your help, I`m using Adobe Photoshop CS5) and create a new canvas of 1300×950 px.
setting up the workspace How to Create an Iphone App Layout in Photoshop
The layout will be 840px wide.Now, draw 2 vertical guides at 230px and 1070px to delimit the layout,like in the image.
blank canvas How to Create an Iphone App Layout in Photoshop

Step 2: Creating the background

I`m going to add a gradient to the background and after, I`ll add some noise to it to make it rough.
Create a new layer and add to it a gradient like in the image below:
background gradient overlay How to Create an Iphone App Layout in Photoshop
We can`t add noise to the layer because it has blending options applied.We should have a stand alone layer to do that.Create a new layer and merge it with the first layer.Now we have a stand alone layer which supports the noise effect and which has the gradient incorporated.
04 iphone layer How to Create an Iphone App Layout in Photoshop
Now select the last layer and add it an uniform noise of 1.5% (Filter->Noise->Add Noise)
background noise How to Create an Iphone App Layout in Photoshop
You should obtain something like this:
05 background image How to Create an Iphone App Layout in Photoshop

Step 3: Creating the header

Select the Rectangle Tool (U) and draw at the top of the canvas a rectangle with the height of 50px and wide of 1300px.After that, apply to it some blending options like Gradient Overlay and Drop Shadow:
header blending options How to Create an Iphone App Layout in Photoshop
header drop shadow How to Create an Iphone App Layout in Photoshop
Now, under the top-bar add a white horizontal line of 1px to create a deeper effect between the header and the background.
header How to Create an Iphone App Layout in Photoshop
Over the header bar, draw another rectangle with the height of 25px and the width of 1300px also and make sure to be white.Change its opacity to 7-10% to obtain an Apple Iphone transparency effect!
apple transparency effect How to Create an Iphone App Layout in Photoshop
In the right side of the top-bar, we`ll add the navigation menu.Add some text buttons.As shown in the image below, I draw a white rectangle using the Rounded Rectangle Tool with a Radius of 5px and made the “Home” text black.Then I added some blending options to the button to make it look good.The font used is Myriad Pro, Semibold, 14px.
header button How to Create an Iphone App Layout in Photoshop
On the left side of the header, add a logo using some text…I used some dummy text: My Iphone App. I used Myriad Pro as font and added the same blending options which the button has.
So far, the image looks good.
final header How to Create an Iphone App Layout in Photoshop

Step 4: Adding a big Iphone

I`m going to add a brand new Iphone 4G from our friends from DeviantArt.
Search for “Iphone 4 PSD” and you should have a list there.If you want the link, click here.
After I downloaded the Iphone, I resized it to 60% and hided the layer called “Reflection”.I allowed myself to change the image from the Iphone screen with a print screen of my website. icon smile How to Create an Iphone App Layout in Photoshop
adding iphone image How to Create an Iphone App Layout in Photoshop

Step 5: Adding some text

I added some text on the right side of the canvas using Myriad Pro font and different fonts and colors.
iphone details How to Create an Iphone App Layout in Photoshop
We are at the half of the tutorial and the image looks like this:
middle phase How to Create an Iphone App Layout in Photoshop

Step 6: Creating an Iphone navigation slider

Ok, this is a nice step.I`m gonna show you how to create a beautiful navigation like in the fancy Iphone Apps.
Select the Rounded Rectangle Tool and draw a rectangle with a Radius of 7px under the Iphone.
iphone nav step1 How to Create an Iphone App Layout in Photoshop
Now add the next blending options:
iphone nav gradient overlay How to Create an Iphone App Layout in Photoshop
iphone nav inner shadow How to Create an Iphone App Layout in Photoshop
iphone nav stroke How to Create an Iphone App Layout in Photoshop
Voila!
voila How to Create an Iphone App Layout in Photoshop
Now add numbers from 1 to 4 like in the image:
numbers How to Create an Iphone App Layout in Photoshop
You noticed that the number “2″ is black.Is a reason for that.This will be the active button.
Select the Rounded Rectangle Tool(U) and draw a small rectangle under the number “2″.Add the next blending options to it:
button gradient How to Create an Iphone App Layout in Photoshop
button shadow How to Create an Iphone App Layout in Photoshop
The small iphone nav looks like this:
final iphone nav How to Create an Iphone App Layout in Photoshop

Step 7

Step number 7 is about creating 2 buttons which every Iphone App Website needs: The “Buy this app from Apple” and “Live Demo of the app”.
Select the Rounded Rectangle Tool (U) and with a Radius of 7px, draw a small rectangle under the text.
available now How to Create an Iphone App Layout in Photoshop
Add to it the next blending options:
apple blend How to Create an Iphone App Layout in Photoshop
small stroke How to Create an Iphone App Layout in Photoshop
Download this Iphone small icon from IconFinder, make it white and add it to the button.
Then write inside the button with Myriad Pro font “Available now on the Apple Store” ! The button is ready to be clicked!
available now on the apple store How to Create an Iphone App Layout in Photoshop
Duplicate this button and align the duplicated one near to the original.Change the text with “View a Live Demo” or something like this and create a small “Play” button using the Custom Shape Tool(U).
watch the live demo How to Create an Iphone App Layout in Photoshop
We`re almost there.We have to build a footer and the layout is ready.Take a look at what we`ve done till now:
preview How to Create an Iphone App Layout in Photoshop

Step 8: Creating the footer background:

Select the Rectangle tool and draw a big rectangle at the bottom of the canvas.Add it the same gradient used at the “Apple Store” button.
footer bg How to Create an Iphone App Layout in Photoshop
The footer looks sleek now but we want to make it look rough like the background. For this, you have to repeat the Add Noise process used when we made the background: Create a new layer and merge it with the footer layer and apply to the new layer the Noise filter (Filter->Noise->Add Noise – 1.5%).You should obtain the next effect:
rough effect How to Create an Iphone App Layout in Photoshop
At the top of the footer draw 2 lines:a white line and a black line and but the white line just above the white line to create a nice effect.
zoom footer How to Create an Iphone App Layout in Photoshop
The background of the footer is finished and looks like this:
footer ready made How to Create an Iphone App Layout in Photoshop

Step 9: Creating a “Subscribe” box

Now that the footer background is ready, I want to show you how to create an Apple inspired “Subscribe” box.
Select the Rounded Rectangle Tool and with a Radius of 7px draw a rectangle like in the image below:
app updates bg How to Create an Iphone App Layout in Photoshop
Now add the next blending options to the box:
box drop shadow How to Create an Iphone App Layout in Photoshop
box gradient overlay How to Create an Iphone App Layout in Photoshop
box stroke How to Create an Iphone App Layout in Photoshop
The box should look like this:
box middle How to Create an Iphone App Layout in Photoshop
Inside the box, we`ll create 2 fields and a submit button.Let`s start with the fields.Select the Rounded Rectangle Tool again and draw a small rectangle inside the box:
form inside How to Create an Iphone App Layout in Photoshop
Stylize the field by adding the next blending options to it:
field inner shadow How to Create an Iphone App Layout in Photoshop
field color How to Create an Iphone App Layout in Photoshop
field stroke How to Create an Iphone App Layout in Photoshop
Duplicate the field obtained and move it under the first like in the image.
fields ready How to Create an Iphone App Layout in Photoshop
The fields are ready.To make the “Submit” button, duplicate one more time a field and place it under them.Clear the styles of the layer (Right Click on the layer and select “Clear Layer Style”) and add the next blending options to it:
gradient for a button How to Create an Iphone App Layout in Photoshop
stroke How to Create an Iphone App Layout in Photoshop
The button is almost ready.
the button is ready How to Create an Iphone App Layout in Photoshop
I wanted to add to the button a shine effect.For this, I selected the layer(Ctrl+Click on the layer) and with the Rectangular Marquee Tool(M) I subtracted the bottom half of the selection.Then I created a new layer and filled the remaining selection with white.After that, I reduced the opacity to 10% and obtained a nice glass effect for the button.Is the same procedure used at the header background.
Finally, add some text to finish the box. The result looks nice,don`t you think?
finished box How to Create an Iphone App Layout in Photoshop

Step 10: Finishing the footer

Now with some text, populate the left side of the footer. I thought to make this by creating a “Features” area, with the features of the app.The small icons used are from the PixeloPhilia Icon Set, a beautiful set of free icons.
Don`t forget to add your copyright details at the bottom of the layer.
The footer is ready!
footer done How to Create an Iphone App Layout in Photoshop
The final image is ready too! This was a nice tutorial and made me pleasure to write it for you.I hope you read it with pleasure too!Take a look at the final layout below:
Click image for full view.