About FantasyAnime
About FantasyAnime
About FantasyAnime

About FantasyAnime

What I used to create FantasyAnime

This page is for other web designers, or if you're just curious to know how I made the site.

The software I use

I use the following software:

  • Adobe Photoshop - I use this for all of my photo editing. I use Photoshop's “Actions” to batch convert screenshots to PNG-8 and make thumbnails. Its new AI upscaling is awesome for blowing up small-sized game art. All the animated GIFs I post on FantasyAnime's social media are made in Photoshop. Photoshop is powerful for GIFs because it lets you make animated GIFs from video. If you don't have Photoshop and need a free alternative, GIMP is the best. Although when it comes to making animated GIFs, GIMP can do it, but it's not an intuitive process at all. Using websites such as Ezgif, Canva, GIPHY, and Imgflip are easier for making GIFs (for free).
  • Brackets - I've been using this for coding my pages. It's nice and lightweight (and free). I used to use Dreamweaver from around 2003-2015. However, it got bulky over the years and became frustrating to use. You might see notes that Brackets was discontinued. Yes, it was discontinued by Adobe in late 2021. But it's not dead--it continues to be maintained by open-source developers. I still use Dreamweaver sometimes for its global find & replace. Brackets' global find & replace only lets you enter a single string of text, which is not very useful.
  • Google Chrome - I heavily use Chrome's developer tools, which you find by going to the menu and More tools > Developer tools. I often right-click a web page and click Inspect to examine the code associated with that given area. I toggle its device toolbar so I can preview how my pages look on mobile. That's an invaluable feature for building responsive web pages! I use the CSS3 Generator add-on to help me quickly generate code for such things as gradients and shadows.
  • Adobe Illustrator - I use this for all my vector work. All my vector desktop wallpapers were made here. Whenever I recreated a classic game's logo, I did it here. Working with vector takes FOREVER, but it's so worth it when you have a picture you can stretch to any size without having it lose quality. If you don't have Illustrator and need a free alternative, Inkscape is the best.
  • Adobe After Effects - I use this for all my video work, especially for the video work I post on FantasyAnime's social media. After Effects has the ability to scale up video without aliasing, which is how all of the looped videos in FantasyAnime's Instagram and TikTok are beautifully sharp. If you don't have After Effects and need a free alternative, DaVinci Resolve is the best. OpenShot is another good option.
  • Adobe Bridge - Its batch file renaming feature is invaluable! All those hundreds of game art and screenshots I have, I can rename them in an instant with this. If you need a free alternative, Advanced Renamer is good. Advanced Renamer also offers a very handy find & replace feature, which Bridge doesn't offer.
  • FileZilla - My favorite FTP client. It's free!
  • XAMPP - My favorite virtual server. It's free and very easy to set up. All my newer pages are in PHP so I have to use this to preview my pages before I push them live.
  • HandBrake - I use this to convert movies into MP4s for the Anime Video Archive. I love HandBrake so much I use it for all of my video conversion needs. I especially love its ability to permanently burn subtitles in a movie clip (since MP4 on the web isn't friendly with subtitles yet).
  • WinLame - I use this for batch converting any audio format to MP3. It's easy to use with its presets. And it's free! Then I use MP3TAG for batch tagging my freshly converted MP3s.
  • Blender 3D - My 3D desktop wallpapers and the 3D you see in my Final Fantasy IX and Super Mario RPG shrines came from here. Blender is free and open-source! And just because it's free doesn't mean it's not very good. It can produce Pixar quality work!

The websites/tools I use

I use the following websites & tools to help me with various web-related tasks:

  • TinyPNG - This site offers a valuable tool that shrinks down PNG images from Photoshop with no noticeable loss of quality. It's especially effective with PNGs that use alpha transparency.
  • Google Fonts - I grab all my free fonts from here. When you decide on a font, Google supplies you with a URL. You can download the font if you want to, but it saves your website a lot of bandwidth if you use the font's URL.
  • Grammar Lookup - I'm trying to make a habit of passing everything I write through grammar checks to make sure there are no errors. I used to use Grammarly, but they stopped checking grammar for free.
  • Color Contrast Checker - This is valuable tool helps check if a background color makes the text on top of it hard to read or not. And if the background color is confirmed to make text hard to read, you can adjust it with the slider to find what color works better. Adobe has a contrast checker too, but I like this site better.
  • Golden Ratio Calculator - Enter your font name, font size, and width of the element, and this tool will output the correct line height (or line spacing) for your text. It also tells you the correct sizes for your headings. I can't stress enough how valuable this tool is!
  • Dead Link Checker - Whenever I finish a new page I run it through this tool to make sure there are no broken links.

The code I use

I programmed FantasyAnime in the following:

  • HTML4 & CSS - For all of my older pages.
  • HTML5 & CSS3 - For all of my new pages, including this one. In particular, I'm using the powerful @media CSS command to make this site responsive on smartphones and tablets. I strictly use CSS3 for all of my animations.
  • PHP - I have the extension hidden, but these pages are PHP. I'm not doing anything fancy. I'm mainly using PHP just for includes.
  • JavaScript - My new pages use vanilla JavaScript (native JavaScript not aided by a library). My older pages use jQuery, but trying to stay away from jQuery to keep my page sizes small. With CSS3 handling animations, I barely have a need for JavaScript these days. In my newer shrines, I use small JavaScript snippets to open/close menus and play one MP3 at a time.

Recommended reading

Want to learn any of the above languages? Check out these books:

  • HTML and CSS: Design and Build Websites - I would say this is the #1 book for learning HTML and CSS. It's a gorgeous, beautifully designed book. Most importantly, it's very visual for those of us who are visual learners.
  • JavaScript and JQuery: Interactive Front-End Web Development - The same people who made the excellent book above on HTML and CSS also made a JavaScript and JQuery book. It's equally as good and visual. I highly recommend this one!
  • Jump Start Responsive Web Design - A small book that thoroughly covers everything you need to know about making a web page responsive. Meaning, making a web page rearrange itself to look good on big screens (desktops) and small screens (mobile devices). Making a responsive website is a valuable skill to have these days.
  • PHP & MySQL - A great book for learning classic PHP and MySQL. Some might disagree with this suggestion because there are modern libraries that build dynamic websites much more effectively. Knowing classic PHP has its uses. I believe in studying the classics to help you understand newer languages/systems better.