Product Photo 360

Editing the photos

British flag

Editing the taken photos

You can edit the photos with any photo editor software. In this section I show how I edit the photos. Furthermore I show how to make .gif animations and how to upload the photos to a homepage as a 360 degree product view image.

Magyar zászló

Az elkészült képek szerkesztése

A fényképeket bármilyen képszerkesztő programmal feldolgozhatjuk. Ebben a fejezetben azt mutatom be, hogy én hogyan végzem a fényképek szerkesztését, továbbá megmutatom, hogyan készítek .gif animációt, és hogyan lehet a képeket forgatható animációként felötlteni a honlapra.

Page content

Az oldal tartalma

Using Gimp image editor

Gimp is a free image editor, also available for Windows and Linux. Using the Bimp plugin, it is possible to moidfy groups of images (cropping, resizing, watermarking, etc...). After installing, you can run the plugin from the File menu. Set the manipulation, add the input files and let it work.

Gimp képszerkesztő használata

A Gimp egy ingyenes képszerkesztő program, ami Windows és Linux rendszereken is használható. A Bimp plugin használatával lehetőség van egyszerre több kép szerkesztésére (vágás, átméretezés, vízjelezés, stb...). A telepítés után a bővítményt a File menüből indíthatod. Állítsd be a módosítási műveletet (manipulation), nyisd meg a módosítani kívánt képeket, majd az Apply gomb lenyomásával hagyd, hogy dolgozzon a számítógép.

Using Imagemagick image editor

I edit the photos with the program imagemagick which is already installed to the system, because the program Product Photo 360 also uses it for the image preview. (The program imagemagick is a command line photo editor program, which has the advantage to edit several images with one simple command.) During the editing process, I always crop, resize and watermark the images.

Warning! Always backup the photos before editing, because some commands irreversibly overwrite the original images.

1. Cropping the images:
Use the command below to crop the images. The command mogrify overwrites the original picture, therefore always make a backup before execute it.

Imagemagick képszerkesztő hasz- nálata

A fényképek szerkesztését az imagemagick programmal végzem, amelyet már korábban telepítettünk, ugyanis a Product Photo 360 program is használja az előnézeti kép megnyitásakor. (Az imagemagick egy parancssorban használható képszerkesztő program, amelynek nagy előnye, hogy egyetlen paranccsal több képet is módosíthatunk.) A képeket minden esetben méretre vágom, átméretezem, majd vízjellel látom el.

Figyelem! Mielőtt elkezdem a fényképek szerkesztését, azokról mindig készítek biztonsági másolatot, ugyanis a szerkesztés során olyan parancsot használok, amely az eredeti képeket véglegesen felülírja.

1. Fényképek vágása:
A fényképek vágását az alábbi paranccsal hajtom végre. A mogrify parancs véglegesen felülírja az eredeti képeket, ezért mindig legyen azokról biztonsági másolat.

$ mogrify -crop WxH+X+Y +repage *.JPG

In the command above replace the characters W, H, X and Y with numbers according to the following:

The *.JPG means to use the command for every ".JPG" ending files. Modify it according to your images ending (for example ".jpg"). Note: The linux makes difference between the lower and upper cases, so *.JPG doesn't equals *.jpg.

2. Resizing the images:
Use the command below to resize the images. Replace the case "W" with the width of the new image in pixels.

A fenti parancsban a W, H, X és Y helyére számokat kell írni, a következők szerint:

A *.JPG azt jelenti, hogy minden ".JPG"-re végződő filet módosítson. Módosítsd annak megfelelően, ahogyan a te fényképeid végződnek. (A linux különbséget tesz a kis- és nagybetűk között, ezért a *.JPG nem egyenlő a *.jpg-vel.)

2. Fényképek átméretezése:
A képeket az alábbi paranccsal kicsinyítem. Cseréld ki a "W"-t annak megfelelően, hogy hány pixel szélességűek legyenek a képek.

$ mogrify -resize W *.JPG

3. Watermarking the images:
I wrote the script watermark.sh to make it simply. After downloading make it exceutable. Copy the script to the folder containing the photos and modify the line 9 of the script according to your images ending. (According to the current settings the script watermark all images ending with ".JPG" in the actual folder.) Make a watermark, save as watermark.png and copy to the folder which contains the watermark.sh script and the images.

3. Fényképek vízjelezése:
A vízjelezésre a watermark.sh scriptet írtam. A letöltés után "végrehajthatóvá" kell tenni. Másold a scriptet a képeket tartalmazó mappába, majd módosítsd a script 9. sorát annak megfelelően, hogy milyen képeket módosítson! (Jelen állapotban a scriptet tartalmazó mappa minden ".JPG" fileját feliratozza.) Készíts egy vízjelet, mentsd el watermark.png néven, és másold be a watermark.sh és fényképeket tartalmazó mappába.

watermark.sh

$ chmod a+rx watermark.sh

Run the script with the command $ ./watermark.sh. The script watermarks every images and saves the new files adding "watermarked" to the front of the filename.

4. Making a .gif animation:
Making .gif animation is very simple using the command below. The "loop 0" means the animation runs continously. The "delay 5" sets the image refreshing frequency (delay 1000 equals 1 sec/image).

A scriptet a $ ./watermark.sh paranccsal futtathatod. A script futása során minden fényképet vízjelez, majd új fileban elmenti a mappába az eredeti file neve elé a "watermarked" szót írva.

4. .gif animáció készítése:
Gif animációt könnyen készíthetünk az alábbi paranccsal. A "loop 0" azt jelenti, hogy az animáció folyamatosan forog, a "delay 5" pedig azt, hogy milyen sebességgel kövessék egymást a képek (delay 1000 esetén másodpercenként történik a váltás a képek között).

$ convert -delay 5 -loop 0 *.JPG animation.gif

Flower / Virág

Note 1: The command converts all the images into one .gif file. If the source files are large and you use a lot of photos, the .gif file will be very huge. Therefore I suggest that you resize the images at least to resolution 800x600.

Note 2: The program imagemagick has a lot of other image editing options. Visit the imagemagick homepage for further information.

Megjegyzés 1: A .gif animáció készítése során az összes fényképből egyetlen file fog készülni. Ha a forrás fileok nagy méretűek és sok kép van, akkor a gif file igen nagy méretű lesz. Ezért a képeket érdemes legalább 800x600-as méretűre lekicsinyíteni.

Megjegyzés 2: Az imagemagick programmal számtalan más szerkesztési beállítás elérhető. Látogasd meg az imagemagick honlapját a további lehetőségekért.

360 degree product view for a website

There are a lot of free software to make 360 degree product view animations. Search for the "360 degree product view" phrase.

I always use the program called Reel. With its support it becomes easy to make the animations while using some simple steps.

1. Link the jquery.min.js and the jquery.reel.js to your html document.

2. Add reel class to <img> tab and format the options.

In the following example below you can see how I use it and how it appears on the website.

Forgatható animáció feltöltése a honlapra

A fényképek forgatható animáció formájában történő feltöltéséhez több ingyenes alkalmazást lehet találni az interneten a "360 degree product view" kifejezésre történő kereséssel.

Az általam használt, Reel nevű programmal néhány egyszerű lépéssel elkészíthető a forgó animáció:

1. Linkeld be a jquery.min.js és a jquery.reel.js-t a html dokumentumodba.

2. Add hozzá a reel class-t az <img> tabhoz és formázd a beállításokat.

Az alábbi példában láthatod, hogy én hogyan használom, alatta pedig azt, hogy hogyan jelenik meg a honlapon.

<div align="center"><img src="http://www.productphoto360.net/shoe/shoe1000_mod.jpg" class="reel" width="300" height="170" id="shoe" data-images="http://www.productphoto360.net/shoe/shoe####.jpg|1000..1101" title="Rotate me! / Forgass meg!" alt="Shoe / Cipő"/></div>

Shoe / Cipő

(Rotate me! / Forgass meg!)

Back / Vissza

© 2024 All rights reserved