Fashion Souls

Fashion Souls

SoulsBorne Fashion Tool by psyopgirl

About

Mission

souls.fashion is a web-hosted application built by a single developer as a passion project. It exists to make outfit building in FromSoftware games fast, visually exciting, and fun.

Instead of manually checking hundreds of armor pieces and weapons in-game, the site allows users to search by item or colour, compare palettes, assemble a look, and export a clean presentation image, immediately ready to share.

What The Site Does

  • Search armor, weapons, and clothing for all games by name and colour.
  • Filter by slot so you can find whichever missing piece your outfit needs.
  • Match items by colour using the picker, the secondary-colour weight control, and the similarity threshold slider.
  • Drag pieces into the outfit sidebar to assemble a full look before exporting.
  • Open the outfit simulator to save, load, and edit presets, and export your finished outfit image.

Designed For Desktop And Mobile

  • The main game pages feature logically-grouped controls and a simple, understandable layout.
  • Smart zoom control and deep search integration for mobile and desktop users.
  • Professional-quality output images regardless of platform - use souls.fashion on your phone, laptop or tablet.
  • Optimised to display on a wide variety of devices and monitors with compatibility as a critical driver of design.

Desktop Controls

Searchbar and filters

Type part of an item name to narrow the grid instantly. Use the adjacent `Item` button to switch between item-name search and hex-based colour matching, and filter by slot type using the buttons.

Context menus

Right click an item card or empty slot from within the item grid or outfit simulator to equip, unequip, replace, and match items from within your outfit setup.

Colour Control Sliders

Use the hex colour picker to select a colour, then specify how it acts on your search results using the sliders. Adjust how strongly the item's secondary palette influences ranking with the secondary colour slider - higher values consider secondary colours more. Dial in the similarity threshold to set the requirement for colour similarity, with higher values enabling looser colour matches.

Grid and sidebar

The item grid display size can be customised using the `Tiles Per Row` slider. Item cards, either from search results or simply found on the grid, can be equipped by dragging and dropping them onto the relevant slot within the sidebar. Items can also be directly equipped or unequipped to a slot within the outfit simulator and game pages by right-clicking and accessing the context menu.

Export and presets

Use `Export` to jump into the simulator page for your selected game. There you will see your currently equipped outfit, which can be renamed, altered, saved or loaded, before the final export as a completed image, ready to be shared far and wide.

Feedback

There is a dedicated feedback form that I would very much appreciate your time in filling out so that I can iron out future issues as they arise within this project. All constructive feedback is more than welcomed.



Mobile Controls

Pinch to zoom

Pinch your phone, as you normally would to trigger a zoom in/out command, to alter the grid layout. Zooming in increases the card density per row within the grid by 1, and zooming out reduces it.

Tap controls

The mobile version of the app serves simplified controls for ease of use. Rather than cumbersome/janky drag and drop mechanics, tap on an item card to equip, unequip, search by, or replace it easily.

Tutorial

  1. Open the page for your game of choice, then search by item or hex colour and use the filter buttons to find a starting piece for your look. You can click an item's card, or any of the colours within its palette, to search using that item or colour.
  2. Switch from `Item` search to hex search if you want to match around a specific colour. Fine-tune the `Colour Similarity Threshold` and `Secondary Colour Weight` until the results feel right.
  3. Adjust `Cards Per Row` if you want a denser or larger browsing layout while you compare options.
  4. Drag or right-click then select `Send to Outfit Simulator` on whichever items you'd like to add into the equipment sidebar until your desired slots are filled. You may remove items by dragging them out of the outfit panel, or right clicking on the item in the panel slot and selecting `Remove Item`.
  5. When the outfit is ready, press `Export` to open the simulator with the current look.
  6. Click or tap a preset name to rename it. If you set a custom name for your preset, it will be included in the output image.
  7. Use the save and load controls in the simulator to store your look in browser storage, revisit older presets, or clear a preset slot when you want to start anew. On mobile, open the preset drawer when you need these controls.
  8. Export the finished outfit image. The output uses the same canonical composition across devices so the final render stays consistent and high-quality across desktop and mobile.
  9. Enjoy your new god-killing drip, and consider supporting the project on Ko-Fi if it was helpful!