info_docs_tfgrid_tech: Update Images #99

New Issue

mik-tf · 2025-01-17T18:42:48Z

mik-tf commented

2025-01-17 18:42:48 +00:00

Repository or Website

https://git.ourworld.tf/tfgrid/info_docs_tfgrid4_tech

Issue Description

The basic migration of tech book from hero mdbook to docusaurus has been done
Kristof wants us to set some nice pictures with transparent background:
- https://www.canva.com/design/DAGVyJfBZs4/7RW9x6BZ7qkbS5Sa1arjGw/edit

Additional Information

And any other thing nice in terms of UI/UX that you see

References

Do you think you can check this @sashaastiadi ? Maybe with Ehab, I'l let you see what works best. We can discuss on TG on videochat too if it can help

Staging and Prod

https://threefold.info/tftech/docs/introduction
https://threefold.info/tftechdev/docs/introduction

TODO

Update images in PR then we can merge and publish
To test: run bash develop.sh

## Repository or Website - https://git.ourworld.tf/tfgrid/info_docs_tfgrid4_tech ## Issue Description - The basic migration of tech book from hero mdbook to docusaurus has been done - Kristof wants us to set some nice pictures with transparent background: - https://www.canva.com/design/DAGVyJfBZs4/7RW9x6BZ7qkbS5Sa1arjGw/edit ## Additional Information - And any other thing nice in terms of UI/UX that you see ## References - Do you think you can check this @sashaastiadi ? Maybe with Ehab, I'l let you see what works best. We can discuss on TG on videochat too if it can help ## Staging and Prod - https://threefold.info/tftech/docs/introduction https://threefold.info/tftechdev/docs/introduction ## TODO - Update images in PR then we can merge and publish - To test: run bash develop.sh

mik-tf added this to the Website & Wiki Project 2025 (MOVED & ARCHIVED) project 2025-01-17 18:42:48 +00:00

sashaastiadi was assigned by mik-tf

2025-01-17 18:43:09 +00:00

mik-tf commented

2025-01-19 17:29:49 +00:00

Update

Kristof did lots of improvements
Still some pictures to update

# Update - Kristof did lots of improvements - Still some pictures to update

mik-tf closed this issue

2025-01-19 17:29:49 +00:00

mik-tf reopened this issue

2025-01-19 17:31:38 +00:00

sashaastiadi commented

2025-01-20 07:42:27 +00:00

ok updating the photos now

sashaastiadi commented

2025-01-20 12:04:05 +00:00

@mik-tf

please unzip this images.zip below containing all edited images
all images bg turned into dark mode - not transparent - but same as the bg color of the docs (#1b1b1d)
all images saved with original image names - the only difference is now they are all using .png format.
e.g if original image : image1.jpg , now its image1.png
all images saved in its original folder dream_comes_true-07a2110993c03ce199bb617de5f6ad37.png on
https://threefold.info/tftechdev/docs/introduction page is now saved under 'introduction' folder

i did not upload / change anything live on gitea, im just attaching these edited images and hope you can help me replace them since i think its good for you to verify all edited images.

canva of edited images: https://www.canva.com/design/DAGct5nWIyE/pUOX2nQ7NJ1U30QjM2Amsg/edit?utm_content=DAGct5nWIyE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

@mik-tf - please unzip this images.zip below containing all edited images - all images bg turned into dark mode - not transparent - but same as the bg color of the docs (#1b1b1d) - all images saved with original image names - the only difference is now they are all using .png format. e.g if original image : image1.jpg , now its image1.png - all images saved in its original folder dream_comes_true-07a2110993c03ce199bb617de5f6ad37.png on https://threefold.info/tftechdev/docs/introduction page is now saved under 'introduction' folder i did not upload / change anything live on gitea, im just attaching these edited images and hope you can help me replace them since i think its good for you to verify all edited images. canva of edited images: https://www.canva.com/design/DAGct5nWIyE/pUOX2nQ7NJ1U30QjM2Amsg/edit?utm_content=DAGct5nWIyE&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

images.zip

43 MiB

👍 1

mik-tf commented

2025-01-20 15:49:03 +00:00

Good! Will check asap.

mik-tf commented

2025-01-21 01:01:59 +00:00

Update

Images OK now

# Update - Images OK now

mik-tf closed this issue

2025-01-21 01:01:59 +00:00

sashaastiadi commented

2025-01-21 07:18:23 +00:00

Tutorial: Converting Images/PPT with White Background (#FFFFFF) to TFDOCS Black (#1B1B1D) Background

This step-by-step guide will help you transform images or PPT slides with a white background into one that matches the TFDOCS Black background (#1B1B1D).

Step 1: Change Background to Black in Photopea

Open Photopea:
- Go to Photopea in your browser.
Import the Image:
- Click File > Open and select the downloaded image or PPT slide you want to edit.
Invert the Colors:
- Go to Image > Adjustments > Invert or press Ctrl + I (Windows) / Cmd + I (Mac). This will temporarily invert all the colors, including the white background.
Restore Original Colors (Except Background):
- Go to Image > Adjustments > Hue/Saturation.
- Set the Hue slider to 180 (far right) and adjust the colors back to normal, leaving the background dark.
Export the Edited Image:
- Click File > Export As > PNG and save the file.

continue to pt 2

### Tutorial: Converting Images/PPT with White Background (#FFFFFF) to TFDOCS Black (#1B1B1D) Background This step-by-step guide will help you transform images or PPT slides with a white background into one that matches the TFDOCS Black background (#1B1B1D). --- #### **Step 1: Change Background to Black in Photopea** 1. **Open Photopea**: - Go to [Photopea](https://www.photopea.com/) in your browser. 2. **Import the Image**: - Click **File > Open** and select the downloaded image or PPT slide you want to edit. 3. **Invert the Colors**: - Go to **Image > Adjustments > Invert** or press **Ctrl + I** (Windows) / **Cmd + I** (Mac). This will temporarily invert all the colors, including the white background. 4. **Restore Original Colors (Except Background)**: - Go to **Image > Adjustments > Hue/Saturation**. - Set the **Hue** slider to **180** (far right) and adjust the colors back to normal, leaving the background dark. 5. **Export the Edited Image**: - Click **File > Export As > PNG** and save the file. continue to pt 2

Screenshot 2025-01-21 at 15.10.30.png

469 KiB

Screenshot 2025-01-21 at 15.10.46.png

529 KiB

Screenshot 2025-01-21 at 15.10.52.png

422 KiB

Screenshot 2025-01-21 at 15.11.16.png

435 KiB

Screenshot 2025-01-21 at 15.10.17.png

410 KiB

❤️ 1

sashaastiadi commented

2025-01-21 07:20:33 +00:00

#### Step 2: Adjust Background to TFDOCS Black in Canva
1. Open Canva:
- Go to Canva and log in to your account.
2. Create a New Project:
- Click Create a Design and set custom dimensions matching your image/PPT.
3. Change Background color to #1B1B1D:
- Click on the canvas, then go to the Background Color tool. Enter the hex code #1B1B1D to set the background.
4. Import Your Image:
- Upload your edited image by clicking Uploads > Upload Files, then drag it onto the canvas, and adjust size accordingly.
5. Refine the Image Colors:
- Select the image, click Edit, click adjust on the left sidebar, and find the Black level.
- Lower the Black/Level setting from 0 to -27 for a seamless blend with the TFDOCS Black background.
6. Export the Final Image:
- Click Share > Download, select PNG, and save your final image.

Tips:

this only works if the bg is pure white #ffffff
Always preview the final output to ensure color accuracy with TFDOCS Black.

--- #### **Step 2: Adjust Background to TFDOCS Black in Canva** 1. **Open Canva**: - Go to [Canva](https://www.canva.com/) and log in to your account. 2. **Create a New Project**: - Click **Create a Design** and set custom dimensions matching your image/PPT. 3. **Change Background color to #1B1B1D**: - Click on the canvas, then go to the **Background Color** tool. Enter the hex code **#1B1B1D** to set the background. 4. **Import Your Image**: - Upload your edited image by clicking **Uploads > Upload Files**, then drag it onto the canvas, and adjust size accordingly. 5. **Refine the Image Colors**: - Select the image, click **Edit**, click **adjust** on the left sidebar, and find the **Black** level. - Lower the **Black/Level** setting from **0 to -27** for a seamless blend with the TFDOCS Black background. 6. **Export the Final Image**: - Click **Share > Download**, select **PNG**, and save your final image. --- #### Tips: - this only works if the bg is pure white #ffffff - Always preview the final output to ensure color accuracy with TFDOCS Black.

Screenshot 2025-01-21 at 15.13.21.png

401 KiB

Screenshot 2025-01-21 at 15.12.29.png

113 KiB

Screenshot 2025-01-21 at 15.13.05.png

379 KiB

Screenshot 2025-01-21 at 15.12.06.png

238 KiB

Screenshot 2025-01-21 at 15.12.50.png

390 KiB