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. “Preserve Details 2.0” scaling 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.
- 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.
- 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, OpenShot is the best.
- 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.
- 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.
- Grammarly - I'm trying to make a habit of passing everything I write through Grammarly to make sure there are no grammatical or spelling errors.
- Color Contrast Checker - This is a pretty valuable tool that helps me 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.
- 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.
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.
- 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.