I just came back from Istanbul and wanted to make a video using my new Insta360 ONE X2 360-degree camera. To make viewers feel like they’re joining me on the trip, I wanted to include video clips showing movement from one place to another. This was easy to do using Google Earth Pro on desktop. Here’s are some examples.
In the video below, there are 4 “places”
San Francisco (zoomed in)
San Francisco (zoomed out to space)
Istanbul (zoomed out to space)
Istanbul (zoomed in)
Here’s how to make the video.
Add “Places”
To add a place, you can search for the place using the Search field. Then, zoom in or out to your desired elevation. When you like the view of the place, click the “Add Placemark” button to add a yellow pin to the place. If you want the place label to appear in the map, check the checkbox beside the place name.
If you right click on a place under “My Places” and click on “Properties”, you can rename the place, change the camera elevation (range), etc.
Record a Tour
When you’re done adding places, click the Record a Tour button in the toolbar.
This will open a record.
Click on the first place (San Francisco) and then click the red Record button. Then, click on each place in the order you want them to appear in the video. Google Earth 3D will animate from one place to another as you are recording in real time. When you are done, click the Record button again to stop recording. You’ll then see a video player control bar.
Click the Play button to play the video. If you are happy with it, click the floppy disk (seriously, Google?) button to save the video. It will add a video item to the list of places.
Export the Video
To export the video, click Tools > Movie Maker. If it is grayed out, close the video player control bar.
Specify a file path and name, choose video parameters (e.g. 1080p), and an output file type (e.g. H.264), and then click the “Create Movie” button.
Convert Video
The video will be exported but you may not be able to open it in certain applications like Corel VideoStudio even though it opens in VLC. To fix this, install Handbrake and convert the video to MP4 format.
Other Examples
You can make videos from other angles and elevations as well. For example, if you hold the Shift key and drag, you can rotate your view. Then, add a place marker at the view you want to save. Google Earth Pro will animation smoothly from each place marker. For example, here’s a video going from the Sulemaniye mosque to the Grand Bazaar.
Using a content delivery network (CDN) to host website assets such as images is a well-known best practice. But, most CDNs just host these files and serve them from their nearest edge location. Developers still need to crop, resize, and optimize images. Then you have non-technical people, e.g. some blog authors or PR people, who innocently upload an image to a site like WordPress and scale it down in size (width / height) without realizing that the image file size is still huge! Fortunately, there are image-specific CDNs that will host and optimize images for you. Below are some features of imagekit.io. I chose this image CDN because I like it so far and it’s free for up to 20 GB of bandwidth per month.
Note:web.dev, which is a Google Developers site, also encourages the use of an image CDN to host images.
Following are some features of ImageKit.io.
Automatic Image Optimization & Fast (< 50 ms) Display Time
Let’s say you have a very large image that is > 1 MB in size. This, of course, is way too large to serve as is. If you don’t know how to optimize images or just don’t feel like doing it, that’s fine because imagekit.io will do it for you. To test this, I uploaded a 1.7 MB, 1800x1232px PNG image of some grass with a transparent background to my Media Library in imagekit.io. The library shows a thumbnail of the image, the file size, and dimensions. Hovering over the image lets you copy the image URL.
Below is the imagekit-optimized image embedded in this web page.
In Google Chrome, the Network tab of the Inspector reveals that the delivered image was
resized from 1800 px wide to 660 px wide
converted from PNG to webp
optimized from 1.7 MB down to 74.5 kB
I didn’t even have to open Photoshop, ImageOptim or some other image editor / optimizer!
This feature would definitely improve your website’s Lighthouse and PageSpeed scores.
Now, you might be wondering about image optimization processing time since images are optimized on demand. According to imagekit.io, images are displayed in less than 50 milliseconds globally and they have 6 processing regions backed by AWS CloudFront CDN. As you can see in the screenshot above, the Time column shows a delivery time of 40 ms.
Note: When I embedded the image in this WordPress page, WordPress copied the image and hosted it itself so the URL changed from
This feature lets you deliver the smallest file based on the image content & device with optimal format selection. For example, the image above was uploaded to imagekit.io as a PNG but when I loaded it in this page in Google Chrome, imagekit.io detected that I was using Chrome and delivered a webp-formatted image. If I were using Safari, the delivered image would not be in webp format since Safari doesn’t support webp.
If an image has transparency, then imagekit.io will only convert it to a format that supports transparency, i.e. png, webp, avif. If a PNG image does not contain any transparency, then it becomes a candidate for a JPEG. If a PNG file without transparency is smaller in file size than a JPG, then imagekit.io will still deliver a PNG. Learn more
No need to move images
If you have a ton of website images on your web server, AWS S3 or elsewhere, there’s no need to move the images to imagekit.io. You can specify the existing location of the images as an origin in imagekit.io. Learn more
URL-based Image Transformations
This feature allows you to edit an image just by changing the URL a bit. For example, the following URLs are to the same source image but the delivered image sizes or compression quality are different.
The dpr is useful for devices like the iPhone or high-end Android devices. A dpr value of 2 is the equivalent of a 2x image (retina). In the examples below, since the dpr is set to 2, then the output image width is actually 2x (twice) the width specified in the URL.
“dpr-2” means “device pixel ratio = 2”
Change image compression quality
You can also change the image quality by simply changing the q value. This is a handy feature for people who have a picky Director of Brand and Creative who often complains that images are blurry or pixelated. Instead of resaving the image at a higher quality and republishing the image, you can just change a parameter in the image URL.
There are many more transformations including width, height, aspect ratio, crop, quality, format, blue, grayscale, progressive image, trim edges, border, rotate, radius, etc. Learn more
Digital Asset Management
With imagekit.io, you get a media library where you can upload, organize and distribute image assets. You can create folders and even paste an image to upload it rather than browser for it. You can easily upload entire folders as well. Right-clicking on an image thumbnail shows many image options.
You can easily browse images as well.
Copy ready-to-use URLs
If you need to share an image with someone, e.g. by email, chat, etc, or if you need to insert an image in a blog post or a landing page, you can easily get an optimized image URL. Just upload (or paste) an image into imagekit.io, then click on the image thumbnail to get the optimized image URL.
Search for images
Easily find an image by keyword and many other filters.
Performance Monitoring
You can add URLs that you want imagekit.io to monitor for performance. ImageKit.io will crawl all images at the URL and determine if any images could be optimized and how much savings could be achieved. For example, in the screenshot below, the home page of pepperfry.com could save 1.2 MB. If you click the Fix it link, you will see a detailed report of which images could be optimized and in what way.
If you want to create a video of an animated character that moves its head and lips as you move your head and speak, you can do so easily using Adobe Character Animator. Here’s how.
In Adobe Character Animator, click File > Import and select the puppet file.
2. Import a green screen
Since we’ll want to overlay the exported character animation on other elements in a video editing program, we’ll want to add a green screen so we can key it out. Create a solid green image (RGB = 0,255,0) the size of the scene, e.g. 1920 x 1080. Then, import it and drag the imported item to the lowest layer it the Timeline panel.
3. Enable Puppet Track Behaviors
We can tell Adobe Character Animator which parts of our face and body to track as we move and talk in the camera. Click on the puppet layer to reveal the Puppet Track Behaviors panel.
The red button indicates that the particular item will be tracked when you move in front of the camera. For example, the Face item, when expanded, will show a red dot by “Camera Input” meaning if move your face in front of the camera, your facial gestures will be tracked and the puppet’s face will move accordingly.
For the lip sync item, the red dot is by “Audio Input” so if you speak, the microphone will capture your voice and convert it into lip movements on your puppet.
For Adobe Character Animator to track your head and lip movements, you need to enable your camera and microphone. You’ll see a circle where your face should be centered in your resting position. Once centered, click the “Set Rest Pose”. You’ll then see a bunch of red dots on your face indicating points where Adobe Character Animator will track your facial gestures.
5. Start recording
Click the red record button. A 3 second countdown timer will begin. Start talking naturally and when you are done, click the red button again to stop recording.
You’ll then see some layers added to the timeline including your voice audio layer.
If some of the layers are longer than the audio layer, e.g. the puppet, Visemes and green screen layers in the screenshot above, trim the scene so the duration of the scene is the duration of the audio. Drag the right end of the gray Work Area bar to the right end of the audio track. Then, right click on that bar and click on “Trim Scene to Work Area”.
Now, your scene duration will just be the duration of the Work Area, in this case 5:20.
6. Preview and export the result
Click the play button to preview the recording. If you are happy with it. you can export it by clicking File > Export > Video via Adobe Media Encoder. This will open Adobe Media Encoder. In the Queue panel, choose a format (h.264) and preset (Match Source – High bitrate or YouTube 1080p Full HD). Then, click the green play button to start encoding.
You will see the encoding progress in the Encoding panel. You’ll also see the video duration as 5:21 seconds as that is the length of the scene in this example.
You can just accept the default values (unless the defaults are asking you to pay for an upgrade).
Change the theme to the Twenty Fifteen
In the WordPress dashboard, go to Appearance > Themes > Add Themes and search for “Twenty Fifteen”.
Create a child theme of the Twenty Fifteen theme
style.css
Create a folder called mychildtheme or whatever you want to call it.
In the mychildtheme folder, create a style.css file with the following content:
The style.css file tells WordPress to load the Parent Theme’s files after the Child. It will override any styles in the Parent Theme’s style.css file that have the same selectors.
Template:Very Important! This is the folder name of the parent theme. If this variable is not correct the Child Theme will not work.
functions.php
In the mychildtheme folder, create a functions.php file with the following content:
This code tells your theme to call the style.css file and the parent CSS file.
screenshot.png
In the mychildtheme folder, create a screenshot.png file. A theme’s screenshot is the thumbnail image that shows up under Appearance > Themes in the WordPress Dashboard. The recommended image size is 880×660. The screenshot will only be shown as 387×290, but the larger image allows for high-resolution viewing on HiDPI displays.
Upload your child theme
Upload the mychildtheme folder to wp-content/themes.
In the WordPress admin, go to Appearance > Themes in the Dashboard. You should see your theme listed. Click to activate it. In the screenshot below, my theme’s screenshot thumbnail is a picture of a cat.
Edit templates
Any PHP file in your mychildtheme folder will override the same file in the parent theme. For this site, I created some PHP templates so my child theme folder looks like this.
Download all files as a compressed zip file, unzip it, and upload each file to your mychildtheme folder.
Add background images
Search Google Images for large background images. Upload them to your WordPress Admin via the Media page. Make a list of URLs based on what you see for each uploaded image in WordPress.
Add JavaScript to randomly pick a background image
To add custom JavaScript, I just installed the “Simple Custom CSS and JS plugin” . Copy the code below , update the URLs to be the backyard images you uploaded to WP-Admin, then paste the code.
Whenever you update CSS or JS, make sure to flush the cache to see your changes.
The instructions below are for migrating a WordPress site on GoDaddy’s Managed WordPress service to a GoDaddy Linux Shared Web Hosting server that uses cPanel. Nevertheless, the instructions still work elsewhere.
Step 1: Back Up (Download) Your Site’s Files
To easiest way to download all your site’s files is to archive (zip / tar) all files into one large file and then download it. You can use a free FTP / SFTP tool like WinSCP to do this or Godaddy’s File Manager or cPanel’s File Manager. Just connect to the server, select all files, right click and choose “Archive and Download”. A file named archive.tar.gz will be downloaded.
GoDaddy’s File Manager
WinSCP SFTP Client
If you are unable to archive all files due to the connection timing out, you can SSH into the server and archive the files from the command line. On Windows 10, you can open Windows Powershell, SSH into the server, and run the command tar -zcvf all.tar.gz *.
When downloading the archive, you may want to connect over ethernet instead of wifi to increase speeds. When I did this, I was downloading at around 23 MB/s.
You can also download files from the command line using the following SCP command if you are on Linux or MacOS.
The easiest way to do this is by connecting to your MySQL database using PHPMyAdmin. Then, click the Export tab, ensure SQL is selected, check the “Save as file” checkbox, and then click the Go button. The database will then be downloaded.
Step 3: Upload Your Site’s Files
On this step, you can use the same tool as in step 1, e.g. WinSCP. If you are going to host the migrated site on GoDaddy’s Shared Linux server, you can just create a new folder on the destination server, e.g. at /home/javanigus/public_html/mysite.com/ where mysite.com is the name of your site.
Make sure to upload the archive (one large file) archive.tar.gz. Don’t unarchive it locally and then upload a million separate files. After you upload the file, you can unarchive it. If you’re using GoDaddy, you can use cPanel’s File Manager to select the archive.tar.gz and extract it.
When you’re done extracting the archive, you can delete the archive.tar.gz file.
Step 4: Import (Upload) Your Site’s Database
For this step, you’ll need to create a new database and a database user who has full permissions. If you use cPanel, you can easily to this step from the control panel.
1. Create a database (e.g. mysite_db)
2. Create a database user (mysite_db_user)
3. Add user to the database
4. Assign permissions to the user
Now that you have a database, you can connect to it using PHPMyAdmin, select the database, click the Import tab, choose your database SQL file from step 2, leave all other defaults, and click the Go button. Your database tables and records will all be created.
Step 5: Edit Your Site’s wp-config.php File
In the step, you can use an FTP client to download, edit, and upload your site’s wp-config.php file. If you can cPanel, you can also use its File Manager to edit the file in the browser. You’ll need to edit the values for 4 variables:
In many cases, like for GoDaddy’s Linux Shared Hosting service, the value for DB_HOST is “localhost”.
Step 6: Add Domain and/or Change Your DNS
You can update the DNS records for the domain to use values pointing to the new host. After DNS has propagated, you should see the same site but being served from the new host instead of the old one. At this point, you can delete the old site.
If your new host is GoDaddy’s Shared Linux hosting using cPanel, you can use cPanel to create a new domain with a root folder path that matches where you uploaded the site’s files in step 3 above. When you do that, if your domain is also hosted with GoDaddy, then GoDaddy will auto-update the DNS for that domain automatically. You could then delete your old site.
Let’s say you want to make this gray sofa become a yellow sofa.
Here’s how to do it in Photoshop.
1. Select the object
Use the object selection tool and create a selection that is larger than the object itself. Photoshop will then shrink the selection to just the object.
As you can above, Photoshop selected the sofa but missed a part of the left leg. Since we only want to color the fabric and not the wood frame, remove the wood frame from the selection, e.g. using the rectangular marquee tool in Remove mode. Now, only the fabric is selected.
2. Create a new group
Click the Create a new group icon to create a new group.
3. Add layer mask
Click the Add layer mask icon to add a layer mask
4. Add Solid Color
Click the “Create new fill or adjustment layer” icon and choose “Solid Color”
5. Choose a color
In the popup color picker, choose a color.
6. Change blending mode
Click the Blending Mode dropdown and select “Color”.
The resulting image will look like this.
7. Adjust brightness
Click the “Create new fill or adjustment layer” icon and choose “Levels”
The Levels layer will appear below the Color Fill layer so drag the Color Fill layer above the Levels layer.
8. Adjust Levels
Drag the markers to adjust the brightness.
For example, when I drag the white marker to the left to the right end of the curve, the brightness increases.
Many people just need to create a simple website. There are many online website builders that offer this including Google Sites. However, what if you also need to simply password-protect some pages. WordPress.com makes this very easy. Following are steps on how to create a clear, no-frills website using WordPress.
1. WordPress.com
Go to https://wordpress.com/ and create an account. You can choose all of the free options and pick any theme.
2. Simple Theme
There are many free themes to choose from. But, if you want the most basic and intuitive theme, click on Appearance > Themes > search for the “Twenty Fifteen” theme and activate it.
3. Create Pages
Click to “customize” the theme and then choose “Menus” > Primary Menu. There will be two pages by default: Home and Blog. If you are not creating a blog, you can delete the Blog page. Then, click “Add items” > Add New Page” and add as many pages as you like. You will then need to drag the pages from the right column to the menu in the left column.
4. Edit Pages
While still in the Customize view, you can preview the site in the right column and click on the various menu links you just created. For each page, you can click the “Edit” link which will take you to the page editor view.
5. Paste Images
The nice thing about the page editor is you can just paste images where you want them and WordPress will upload the images for you. There’s no need to have an image file on your computer and then browse to it to upload it.
6. Password-protect Pages (Optional)
If you want to password protect some pages, then in the right column of the page editor view, click Document > Public > Password Protected and type in a password.
Once you publish your site, password-protected pages will appear as follows:
Once you enter the password, you’ll have access to the page’s content.
7. Publish
Now, you can click the “Publish” button to publish new page and the entire site. The site will be accessible at XXXX.wordpress.com where XXXX is customizable. You can also pay to buy a custom domain and link it to your new site.
We often take pictures with our smart phones which may save photos at very high resolutions resulting in large file sizes. What if we want to quickly resize and compress these images for uploading to a website or sharing via email. One quick was is to use Photoshops Image Processor Automation Script.
File > Script > Image Processor
You’ll then see a dialog where you
select a folder containing the large images
select a location to save the processed images
check a file type (JPG) and optionally resize the image to fit within a specified width and height
Then, just click the Run button and Photoshop will do the work.
Modular and therefore can add modules that offer different / better features
HDR (high dynamic range) for better image quality
More advanced desktop editing software
Cons:
Modular and therefore can be a hassle to have to switch modules, especially quickly in order to capture a moving target
GoPro Max
Pros:
Easy to use without having to assemble modular parts
Cons:
No HDR (high dynamic range)
Desktop editing software not as powerful as the Insta360 Studio
Insta360 One X2
Pros:
Small
HDR (high dynamic range) for better image quality
Ricoh Theta SC2
After testing the GoPro Max, Insta360 One X2, and the Ricoh Theta SC2, it clear that the Insta360 One X2 is the better camera.
Virtual Reality / 3D Panorama Software
Marzipano
Marzipano is free and open source. You can use the Marzipano tool to quickly upload 360 photos and then download a complete website with all code to host yourself. However, you can only zoom out so much as shown in the screenshot below.
Kuula
Kuula lets you upload 360 photos and embed a 360 viewer of your photos on your website. You can also zoom out much more than with Marzipano as shown in the screenshot below.
You can then take a screenshot of the zoomed out 360 photo which doesn’t show very warped and curved lines.
Metareal
Metareal is a great alternative to MatterPort. You can create floorplans as well and pay a nominal fee to have Metareal convert your 360 photos into virtual tours for you.
Photoshop
In Adobe Photoshop, you can import a 3D panorama photo
In the lower left corner, when you have the white grid enabled, you will see orbit, pan and dolly buttons to move the image around.
Under Properties, you can adjust the Vertical FOV (Field of View) to zoom in and out.
GoPro Player Desktop App
The GoPro Player desktop app will also open 360 photos and let you rotate and zoom in and out. But, unlike Photoshop and Kuula, you’ll get a fisheye view as shown below.
Google Photos Mobile App
The Google Photos mobile app has a Panorama feature but you have to move your camera horizontally or vertically to capture create the panorama. It’s not a full 360 degree panorama but it does support scrolling in Google Photos.
Insta360 Studio
The Insta360 Studio desktop app is definitely better than the GoPro Player desktop app. It’s got more features and is intuitive to use.
If you go to Google Translate, you can not only translate text from one language to another, but you can also listen to the translation. For example, this English to Chinese translation allows you to listen to the pronunciation of the Chinese text.
Google’s Cloud Text-to-Speech API allows you to programmatically generate mp3s of any text. Below are steps to do it on Windows using PHP.
When you follow the steps above, you will download a JSON file containing your credentials. You need to set an environment variable by opening a command prompt and entering
set GOOGLE_APPLICATION_CREDENTIALS=path-to-json-file
You can then verify it is set by typing “set”.
That environment variable is temporary and will persist for the duration of the terminal session. To set the environment variable permanently, follow these steps.
Composer will need a php.ini file. If one doesn’t exist, it will create one.
4. Update php.ini
To ensure your SSL certificates are up-to-date, download the latest cacert.pem from https://curl.haxx.se/ca/cacert.pem. Then, edit php.ini as follows:
curl.cainfo=”/path/to/downloaded/cacert.pem”
5. Create PHP Script
Copy and paste the example code from the instructions in step 1. This is a PHP script so wrap the code in <?php … ?>. Save it as test-text-to-speech.php somewhere.
6. Run PHP Script
At the command prompt, verify the Google environment variable is set and then run the PHP script. If PHP is in your path, you can run, for example,
This will output an audio file (output.mp3) in the same folder. By default, the text is “Hello, world!” and the language code is en-US. You can change the text to Chinese, for example: 这是一个测试 and change the language code accordingly to cmn-CN. Then, you’ll get the same speech as what you hear in Google Translate.
