imageready « WordPress.com Tag Feed

PhotoShop Tips IV: Create a GIF

Jean Has Been Shopping — Tue, 13 Oct 2009 17:23:58 +0000

How To: Create a GIF

This movie requires Adobe Flash for playback.

Thanks to Zero_Option for this tutorial suggestion.

This technique creates a gif with fading images. If you do not need to modify your jpgs, simply number in sequential order (see note in red below), and begin at step 10.

Step 1: In PhotoShop, open the two jpg files that you would like to animate.

Step 2: Enlarge the canvas of one jpg to give it a plain white border. Image, Canvas. Increase your width/height by 1″.

Step 3: Enlarge the canvas again to make room for the 2nd jpg. In this case, anchor the main jpg to the lower left, then increase width by 5″ and the height by 3″. Use the measurements of the 2nd photo to give you an idea how much of an increase is needed.

Step 4: Using your pointer tool, drag the 2nd jpg onto the 1st jpg.

Step 5: While on Layer 1 (the photo you have just dragged over), lower the opacity so you can see through it.

Step 6: Use your pointer tool to align the 2 photos. Code (the apple key) plus T allows you to transform. Shrink the photo to fit, and rotate to align. Make sure you hold the Shift button down keep proportions accurate. Otherwise your image will warp. Now return the opacity to 100%.

Step 7: Crop your image to remove any excess canvas. You are now ready to prepare your files for animation!

Step 8: Merge the layers. Layers, Flatten. When you save, create a new folder. File, Save As, 1.jpg.

Step 9: Undo the merge by pressing Code (the apple key) plus Z. You could also choose Edit, Step Backward.

Step 10: While on Layer 1, lower opacity to 90%. Merge the layers (Layers, Flatten). Save to your new folder as 2.jpg.

Repeat the process of undoing the merge, lowering opacity, and saving in numerical order.

Note: if you will have more than 9 final jpgs to combine, you will have to be creative with your numbering. Instead of naming the files 10, 11 and so forth, choose 91, 92, 93. The 10 would appear directly behind file number 1 and would throw things off.

When all of your files are ready, launch Adobe ImageReady CS2 (free with purchase of Adobe PhotoShop CS2).

Step 10: Choose File, Import, Folder As Frames. Select your working folder.

Step 11: On top of the Animation Box, click Animation and choose Select All Frames. On any of the frames, choose a speed (i.e. .2 seconds). Press the Play button to view the animation. Adjust speed if necessary.

Step 12: If it is all to your liking, select File, Save Optimized As… Change the default format to Images Only. Name your gif file.

Your GIF is ready!

If you have a suggestion for a future tutorial, please let me know.

Membuat Animasi GIF dengan Photoshop dan ImageReady

Sulipan — Thu, 01 Oct 2009 14:03:36 +0000

Dalam modul ini kita akan belajar membuat animasi gif sederhana menggunakan Photoshop dan ImageReady

My animations

rajayuva — Tue, 05 May 2009 17:50:42 +0000

Friendship

PS CS4 與ImageReady合併了

BlueSky — Tue, 14 Apr 2009 09:36:46 +0000

電腦install 了 adobe web premium cs4, 今日做webpage 時,想在頁面上加個會閃的button,怎料找也找不到image ready。上網search 『create

Efek Hujan dengan Photoshop + ImageReady

sugoinaski — Sun, 14 Dec 2008 07:59:02 +0000

mmm
berikut adalah cara untuk membuat animasi *.gif sederhana dengan contoh membuat efek hujan… jadinya sbb:

tadinya saya mau tulis langsung di sini, tapi upload imagenya lamaaaa.. (gara2 saya males ngompres imagenya.. ukurannya masi 1280×800).. hehe) jadi ya saya uploadkan file *.doc nya aja dl ya..

http://sugoinaski.wordpress.com/files/2008/12/efekhujan.doc

met nyoba^^

ps: tool yang saya gunakan adalah Adobe Photoshop CS2 dan Adobe ImageReady CS2 (dua tool ini udah satu bendel, instal satu pasti keinstall duaduanya kok^^).. tapi kl anda pake Adobe Photoshop dan ImageReady 7.0 atau CS juga bisa,, ^^

Rainluva.Des08

Pasando de Video a GIF o SWF (Primer Método)

leosadvs — Wed, 01 Oct 2008 02:39:59 +0000

Aveces nos gusta una escena de algún vídeo que vimos en Youtube o que tenemos en nuestro PC’s, y nos gustaría pasarlos a un GIF animado o una animación Flash, pero no tenemos ni idea de como hacerlo… A si que me puse a investigar un poco y descubri como hacerlo, de 2 formas: Con Software (Quicktime o algun conversor de vídeo y Adobe ImageReady) o con un editor de video sencillo (como puede ser iMovie o Windows Movie maker) y un sitio web.

La guía después del Salto.
El video que voy a usar hoy para la demostración es:

Again & Again Windows Xp

Primera Forma:

Necesitamos el Quicktime (Pro para convertir vídeos) o algún conversor gratuito.

En Quicktime abrimos el video y nos vamos a Archivo > Exportar

y seleccionamos formato .MOV (en OSX) y .AVI (en Windows)

Elegimos donde guardar, el nombre de archivo y esperamos que Exporte.

Después que tenemos el vídeo en el escritorio o donde sea lo abrimos en el Adobe ImageReady

Nos va a dar las Opciones de que si queremos importar todo el vídeo o solo el rango seleccionado.

En el caso que queramos solo una parte del vídeo hacemos clic con el botón mayúsculas apretado.

Apretamos Ok y esperamos

Después nos va a aparecer el vídeo cargado y abajo la barra de animación.

Ahora, para guardar en formato Flash SWF hacemos:

Archivo > Exportar > Macromedia Flash SWF

nos va aparecer esta ventana

En formato elegimos JPEG y si quieres ajustas la calidad, le damos a OK

En caso de que queramos un GIF

Solo tenemos que hacer clic en Archivo> Guardar Optimizada Como y nos va a aparecer este cuadro

Solo ponemos Guardar y listo!

Obtenemos algo como esto:

again-again-windows-xp.gif

En la próxima edición, veremos como se hace con solo un editor de vídeo y un sitio web. Nos leemos!

Hello world!

mpiasecki — Sun, 14 Sep 2008 17:34:25 +0000

So I’ve resurrected this blog after a few months of not knowing what to do with it. I mean honestly, what to I have to write about? I’m back where I was about ten years ago starting fresh armed with nothing but a few ideas and a heavy investment in some Adobe software.

While the world around me brings innovative designs with CSS beyond the “web 2.0 look” of gradients and round corners, I sit here searching the help documentation on every little thing I try to do with Adobe Illustrator. If I get bored with that, I have the always interesting situation of trying to convert a website mockup done in Photoshop to an Imageready sliced layout done with CSS.

So far I have learned: HUGE up hill battle

Seriously, the ads I see promoting “.psd to xhtml in 8 hours” makes me wonder how clean that code really is. And if it it, I would rather pay them to show me how its done for my own use rather than for the service it’s self. Ive seen and article on alistapart.com explaining a quick rough draft on how this can be done, but is that the way to go? If Richard Stallman was here he would say no and go back to writing mystical magical material in his blog about what he brought with him on an airplane. There was an iPod involved from what I hear. Really exciting stuff.

In closing I would like to apologize to those of you who will never get the last couple minutes of your life back. To everyone else I hope you stay tuned. I hope to continue to post here regularly about snafu’s, brick walls that I run into and overall indecisive situations where I needlessly waste time exploring my options instead of implementing a solution and letting you, the reader see the outcome.

Il sito di Ubuntu... è fatto con Windows?

LucAndrea — Fri, 30 May 2008 05:16:11 +0000

Può sembrare alquanto comico il fatto che il sito ufficiale di un sistema operativo sia realizzato (anche solo in parte) con… un altro sistema! Sto parlando del sito ufficiale della distribuzione Linux Ubuntu (http://www.ubuntu.com/) che, purtroppo, sembra essere stato creato utilizzando Windows! Vediamo perché…

Vedete quell’immagine arancione? Quella dell’Ubuntu Store? È osservando quel bottone che mi è venuto il sospetto: se siete abbastanza esperti di grafica ma soprattutto di sistemi operativi, noterete che il font utilizzato (e il suo relativo antialiasing) è quello di default di Windows!

È vero: i font di Windows possono essere installati senza problema anche su Linux. Ma la prova definitiva è data dal “codice sorgente” dell’immagine, se cosí si può definire. Ecco la parte iniziale.

Da notare la parte sottolineata di rosso… sí, state vedendo bene: quell’immagine è stata creata con Adobe ImageReady, software che non è disponibile per Linux! E la stessa cosa si può dire di molte altre immagini presenti sul sito (compreso il logo del titolo!).

Rimangono due speranze: la prima, che l’immagine sia stata creata con Mac OS anziché Windows (d’altronde Mac OS è Unix come Linux); la seconda, che l’immagine sia stata realizzata con ImageReady lanciato attraverso WINE… speriamo…

ImageReady R.I.P.

Fredrik Jensen — Sat, 24 May 2008 11:26:27 +0000

It was about time to say goodbye to the old friend (never understood why there was two apps anyway). Now there is just a few elegant functions in PS; making animated gifs and omptimize web graphics. Thanks.

ImageReady dont save as GIF

Yasir Imran — Sat, 29 Mar 2008 09:38:00 +0000

go to the (on a Mac, not sure about a pc) Window menu and choose Optimize.

In the Optimize pane make sure the format is set to gif.

Then make sure you choose “Save Otimized As” from the file window and that you have chosen what you would like from the Format pop up window.

Hope this helps…

Image Slicing

dgbytes — Fri, 22 Feb 2008 04:18:14 +0000

Info: Image Slicing – is the way of cutting a image by parts without totally destroying it. Th

Traductor Photoshop CS2 Al Español

datmos — Mon, 26 Nov 2007 11:34:15 +0000

Eso es, para los que tengan el Photoshop, en Ingles u otro idioma, con este parche lo podran traducir al Español con solo un click

Os lo subo a varios servidores por si acaso se rompe alguno lo tendreis en el otro