# Photo Card Generator by Fahim Murshid — Complete Tutorial & User Guide ### ফাহিম মুরশীদ ফটো কার্ড জেনারেটর — সম্পূর্ণ ব্যবহার নির্দেশিকা ও টিউটোরিয়াল [![Version](https://img.shields.io/badge/version-2.0.0-red.svg)](https://photocard.fahimm.com) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE) [![Website](https://img.shields.io/badge/website-photocard.fahimm.com-blue)](https://photocard.fahimm.com) --- ## 📑 Table of Contents / সূচিপত্র - [Part 1: English Tutorial](#part-1-english-tutorial) - [1. Overview & Core Highlights](#1-overview--core-highlights) - [2. Step-by-Step Guide](#2-step-by-step-guide) - [Step 1: Choose a Template (43+ Styles)](#step-1-choose-a-template-43-styles) - [Step 2: Add and Adjust Photos](#step-2-add-and-adjust-photos) - [Step 3: Edit Headlines, Text & Auto Bengali Dates](#step-3-edit-headlines-text--auto-bengali-dates) - [Step 4: Add Logos & Drag-to-Position](#step-4-add-logos--drag-to-position) - [Step 5: Add Bottom Sponsor/Ad Banner](#step-5-add-bottom-sponsorad-banner) - [Step 6: Typography & System Fonts](#step-6-typography--system-fonts) - [Step 7: Color Customization](#step-7-color-customization) - [Step 8: Export 1080×1080 PNG Cards](#step-8-export-10801080-png-cards) - [3. Pro Tips & Privacy Guarantees](#3-pro-tips--privacy-guarantees) - [Part 2: বাংলা টিউটোরিয়াল (Bangla Guide)](#part-2-বাংলা-টিউটোরিয়াল-bangla-guide) - [১. পরিচিতি ও প্রধান বৈশিষ্ট্যসমূহ](#১-পরিচিতি-ও-প্রধান-বৈশিষ্ট্যসমূহ) - [২. ধাপে ধাপে ফটো কার্ড তৈরির পূর্ণাঙ্গ নিয়ম](#২-ধাপে-ধাপে-ফটো-কার্ড-তৈরির-পূর্ণাঙ্গ-নিয়ম) - [ধাপ ১: টেমপ্লেট নির্বাচন করা (৪৩টি স্টাইল)](#ধাপ-১-টেমপ্লেট-নির্বাচন-করা-৪৩টি-স্টাইল) - [ধাপ ২: ছবি যুক্ত ও অ্যাডজাস্ট করা](#ধাপ-২-ছবি-যুক্ত-ও-অ্যাডজাস্ট-করা) - [ধাপ ৩: শিরোনাম, সংবাদ ও স্বয়ংক্রিয় বাংলা তারিখ](#ধাপ-৩-শিরোনাম-সংবাদ-ও-স্বয়ংক্রিয়-বাংলা-তারিখ) - [ধাপ ৪: লোগো যুক্ত করা ও ড্র্যাগ করে বসানো](#ধাপ-৪-লোগো-যুক্ত-করা-ও-ড্র্যাগ-করে-বসানো) - [ধাপ ৫: বিজ্ঞাপন বা স্পন্সর ব্যানার যুক্ত করা](#ধাপ-৫-বিজ্ঞাপন-বা-স্পন্সর-ব্যানার-যুক্ত-করা) - [ধাপ ৬: বাংলা ও ইংরেজি ফন্ট নির্বাচন](#ধাপ-৬-বাংলা-ও-ইংরেজি-ফন্ট-নির্বাচন) - [ধাপ ৭: কালার ও থিম কাস্টমাইজেশন](#ধাপ-৭-কালার-ও-থিম-কাস্টমাইজেশন) - [ধাপ ৮: এক ক্লিকে হাই-রেজোলিউশন PNG ডাউনলোড](#ধাপ-৮-এক-ক্লিকে-হাই-রেজোলিউশন-png-ডাউনলোড) - [৩. প্রয়োজনীয় টিপস ও প্রাইভেসি সুরক্ষা](#৩-প্রয়োজনীয়-টিপস-ও-প্রাইভেসি-সুরক্ষা) --- # Part 1: English Tutorial ## 1. Overview & Core Highlights **Photo Card Generator by Fahim Murshid** is a fast, free, and privacy-first web application designed to create professional **1080×1080 square photo cards**, breaking news banners, editorial graphics, and social media quotes. > [!NOTE] > **100% Client-Side & Privacy First:** No images or personal text are ever uploaded to any server. Everything renders and exports directly inside your local web browser. ### Key Features: - **43+ Curated Templates:** TV news channels (Jamuna, Somoy, BTV, NTV, BBC), broadsheet newspapers (Classikalo, Daily Tader Desh), modern magazines, glowing neon grids, and topic-specific cards. - **Native Bengali Typography:** Full Bengali Unicode font support and automated Bengali date formatting (e.g., ২২ আগস্ট ২০২৬). - **Interactive Drag & Drop:** Drag logos directly across the 1080×1080 live preview canvas with real-time coordinate tracking. - **Local & Google Fonts:** Integrated with 100+ Google Fonts and Chromium Local Font Access API (`queryLocalFonts`). - **No Watermarks:** Free to export crisp 1080×1080 PNG files for Facebook, Instagram, Twitter/X, and LinkedIn. --- ## 2. Step-by-Step Guide ### Step 1: Choose a Template (43+ Styles) 1. Open [https://photocard.fahimm.com](https://photocard.fahimm.com) in any modern browser. 2. In the left sidebar, click the **Select Template** dropdown. 3. Choose a template that matches your content type: | Category | Recommended Templates | | :--- | :--- | | **TV News Channels** | `Jomuna TV`, `Semay TV`, `NTB Style`, `BTC News Style`, `BTB Style`, `Breaking News` | | **Newspapers & Dailies** | `Classikalo`, `Daily Tader Desh`, `Classic Newspaper`, `Gradient News Card` | | **Modern & Editorial** | `Minimal Edge`, `Poster Bold`, `Card Float`, `Diagonal Accent`, `Magazine Cover`, `Big Quote`, `Spotlight` | | **Visual & Dark Themes**| `Glass Neon`, `Neon Grid`, `Gradient Mesh`, `Vertical #1` | | **Topics & Lifestyle** | `Sports`, `AI`, `Tech`, `Movie`, `Entertainment`, `Music`, `Business`, `Health`, `Travel`, `Food`, `Fashion`, `Theater` | --- ### Step 2: Add and Adjust Photos You can add photos using two convenient methods: - **Option A (Local Upload):** Click **Upload / Change Image** in the sidebar, or click the **Add / Change Photo** button on the live canvas. - **Option B (Remote URL):** Paste any direct image URL into the `OR PASTE IMAGE URL` field (e.g., `https://example.com/photo.jpg`). The built-in proxy fetches and safely embeds the image as a Data URL to prevent CORS export errors. #### Adjusting Composition: - **Scale:** Drag the scale slider (`0.1x` to `3.0x`) to zoom in or zoom out. - **Pos X & Pos Y:** Adjust horizontal and vertical positions in pixels. - **Object Fit:** Choose between: - `Cover`: Fills the photo area without distortion (recommended). - `Contain`: Displays the full image without cropping. - `Fill`: Stretches the image to fit the container bounds. --- ### Step 3: Edit Headlines, Text & Auto Bengali Dates Under the **Content** section in the sidebar: - **Heading / Headline:** Main headline or post title. - **Subheading:** Secondary explanation, lead paragraph, or quote. - **Date:** Pre-filled automatically with today's date in Bengali numerals and months. You can also customize it manually. - **Domain / Brand:** Your website URL (e.g., `yoursite.com`). - **Social Handles:** Your Facebook and YouTube channel names. > [!TIP] > **Live Inline Editing:** You can click directly on text elements on the live 1080×1080 canvas preview to type and edit in real time! --- ### Step 4: Add Logos & Drag-to-Position 1. In the **Logo** section, upload a transparent PNG logo or paste a logo URL. 2. **Interactive Positioning:** Click and hold the logo on the live preview canvas, then drag it to your desired location. 3. Coordinates are saved automatically in your browser's `localStorage`. --- ### Step 5: Add Bottom Sponsor/Ad Banner - Under **Ad Image (Bottom)**, upload a sponsor banner or advertisement graphic. - If left empty, the template automatically hides the ad container. --- ### Step 6: Typography & System Fonts - In the **Style** section, select a font from the **Font** selector. - **Bengali Fonts:** *Hind Siliguri*, *Noto Sans Bengali*, *Noto Serif Bengali*, *Baloo Da 2*, *Anek Bangla*, *Mina*, *Galada*. - **English Fonts:** *Merriweather*, *Playfair Display*, *Roboto*, *Open Sans*, *Montserrat*, *Lora*, *Poppins*, *Inter*. - **Computer Installed Fonts:** In Chrome or Edge, click **Load Installed Fonts** to use fonts installed on your operating system. --- ### Step 7: Color Customization - **Accent Color:** Highlights, borders, headline bars, and badges (Default: `#D9232D`). - **Background:** Primary canvas background color. - **Text Color:** Headline and body copy color. - **Tag Color:** Overrides category and news badge pill colors. --- ### Step 8: Export 1080×1080 PNG Cards 1. Click the red **Download Image** button in the sidebar (or bottom bar on mobile). 2. The card is rendered client-side at **1080×1080 pixels** and saved instantly to your downloads folder as a high-resolution PNG. --- ## 3. Pro Tips & Privacy Guarantees - **Dark / Light Theme:** Click the Sun/Moon toggle icon in the sidebar for comfortable editing in any lighting environment. - **Auto-Save:** Your configuration, text, colors, and uploaded assets are automatically preserved in browser `localStorage`. - **Reset Button:** Click **Reset** at any time to restore the default template values. - **Mobile Action Bar:** On mobile devices, use the bottom floating action bar to toggle settings or download with one tap. --- # Part 2: বাংলা টিউটোরিয়াল (Bangla Guide) ## ১. পরিচিতি ও প্রধান বৈশিষ্ট্যসমূহ **ফাহিম মুরশীদ ফটো কার্ড জেনারেটর (Photo Card Generator by Fahim Murshid)** একটি সম্পূর্ণ ফ্রি, আধুনিক ও ব্রাউজার-ভিত্তিক গ্রাফিক্স জেনারেটর। কোনো ফটোশপ বা গ্রাফিক্স সফটওয়্যার ছাড়াই আপনি খুব সহজে সোশ্যাল মিডিয়ার জন্য **১০৮০×১০৮০ পিক্সেল** সাইজের বাংলা নিউজ কার্ড, ফটো ব্যানার, কোট বা পোস্টার ডিজাইন করতে পারবেন। > [!NOTE] > **সম্পূর্ণ নিরাপদ ও প্রাইভেসি-বান্ধব:** কোনো রেজিস্ট্রেশন বা লগইন করতে হয় না। আপনার আপলোড করা ছবি কোনো সার্ভারে জমা হয় না—সবকিছু আপনার ব্রাউজারেই প্রক্রিয়াকরণ হয়। ### মূল সুবিধাসমূহ: - **৪৩+ আকর্ষণীয় টেমপ্লেট:** যমুনা টিভি, সময় টিভি, প্রথম আলো/ক্লাসিকালো, এনটিভি, বিবিসি, বিটিভি, ব্রেকিং নিউজ, স্পোর্টস, এআই, সিনেমা ও ম্যাগাজিন স্টাইল। - **স্বয়ংক্রিয় বাংলা তারিখ:** স্বয়ংক্রিয়ভাবে আজকের বাংলা তারিখ (যেমন: ২২ আগস্ট ২০২৬) যুক্ত হয়ে যায়। - **ড্র্যাগ অ্যান্ড ড্রপ লোগো:** ক্যানভাসে মাউস দিয়ে টেনে লোগোর অবস্থান নিজের মতো ঠিক করার সুবিধা। - **১০০+ ফন্ট ও পিসির নিজস্ব ফন্ট:** গুগল ফন্টের পাশাপাশি আপনার কম্পিউটারে থাকা যেকোনো বাংলা বা ইংরেজি ফন্ট ব্যবহারের সুযোগ। - **ওয়াটারমার্কবিহীন ডাউনলোড:** কোনো জলছাপ বা সাবস্ক্রিপশন ছাড়াই হাই-রেজোলিউশন PNG ডাউনলোড। --- ## ২. ধাপে ধাপে ফটো কার্ড তৈরির পূর্ণাঙ্গ নিয়ম ### ধাপ ১: টেমপ্লেট নির্বাচন করা (৪৩টি স্টাইল) ১. আপনার ব্রাউজারে [https://photocard.fahimm.com](https://photocard.fahimm.com) ওপেন করুন। ২. বাম পাশের সাইডবারের **Select Template** ড্রপডাউনে ক্লিক করুন। ৩. আপনার পছন্দমতো টেমপ্লেট বেছে নিন: | ক্যাটাগরি | জনপ্রিয় টেমপ্লেটসমূহ | | :--- | :--- | | **টিভি নিউজ চ্যানেল** | `Jomuna TV`, `Semay TV`, `NTB Style`, `BTC News Style`, `BTB Style`, `Breaking News` | | **পত্রিকা ও দৈনিক সংবাদ** | `Classikalo`, `Daily Tader Desh`, `Classic Newspaper`, `Gradient News Card` | | **মডার্ন ও ম্যাগাজিন** | `Minimal Edge`, `Poster Bold`, `Card Float`, `Diagonal Accent`, `Magazine Cover`, `Big Quote` | | **ডার্ক ও গ্লাস থিম** | `Glass Neon`, `Neon Grid`, `Gradient Mesh`, `Vertical #1` | | **বিষয়ভিত্তিক পোস্টার** | `Sports`, `AI`, `Tech`, `Movie`, `Entertainment`, `Music`, `Business`, `Health`, `Travel`, `Food`, `Fashion`, `Theater` | --- ### ধাপ ২: ছবি যুক্ত ও অ্যাডজাস্ট করা ছবি যুক্ত করার দুটি সহজ উপায় রয়েছে: - **পদ্ধতি ১ (আপলোড):** সাইডবারের **Upload / Change Image** বাটনে ক্লিক করুন অথবা প্রিভিউ ক্যানভাসের **Add / Change Photo** বাটনে ক্লিক করে ডিভাইস থেকে ছবি সিলেক্ট করুন। - **পদ্ধতি ২ (ছবির লিঙ্ক):** অনলাইনের যেকোনো ছবির ডিরেক্ট URL `OR PASTE IMAGE URL` বক্সে পেস্ট করুন। #### ছবির সাইজ ও অবস্থান ঠিক করা: - **Scale:** স্লাইডার টেনে ছবি বড় বা ছোট (Zoom-in / Zoom-out) করুন। - **Pos X ও Pos Y:** সংখ্যা পরিবর্তন করে ছবি ডানে-বামে বা উপরে-নিচে নিখুঁতভাবে বসান। - **Object Fit:** `Cover` (বক্স ভরাট করা), `Contain` (পুরো ছবি দৃশ্যমান রাখা), অথবা `Fill` বেছে নিন। --- ### ধাপ ৩: শিরোনাম, সংবাদ ও স্বয়ংক্রিয় বাংলা তারিখ সাইডবারের **Content** সেকশনে আপনার তথ্য লিখুন: - **Heading:** সংবাদের মূল শিরোনাম বা পোস্টের টাইটেল। - **Subheading:** বিস্তারিত বিবরণ বা সাব-টাইটেল। - **Date:** স্বয়ংক্রিয়ভাবে আজকের বাংলা তারিখ তৈরি থাকে, চাইলে পরিবর্তনও করতে পারেন। - **Domain:** আপনার ওয়েবসাইটের নাম (যেমন: `yoursite.com`)। - **Social Handles:** আপনার ফেসবুক পেজ ও ইউটিউব চ্যানেলের নাম। > [!TIP] > **সরাসরি ক্যানভাসে এডিট:** আপনি চাইলে ক্যানভাসের যেকোনো লেখার উপর সরাসরি ক্লিক করে টাইপ করতে পারবেন! --- ### ধাপ ৪: লোগো যুক্ত করা ও ড্র্যাগ করে বসানো ১. **Logo** সেকশনে আপনার প্রতিষ্ঠানের ট্রান্সপারেন্ট PNG লোগো আপলোড করুন বা লোগোর URL দিন। ২. ক্যানভাসে লোগোটির উপর মাউস দিয়ে চেপে ধরে টেনে (Drag) যেখানে খুশি সেখানে বসিয়ে দিন। ৩. লোগোর অবস্থান ব্রাউজারে স্বয়ংক্রিয়ভাবে সেভ হয়ে থাকবে। --- ### ধাপ ৫: বিজ্ঞাপন বা স্পন্সর ব্যানার যুক্ত করা - **Ad Image (Bottom)** অপশন থেকে স্পন্সর ব্যানার আপলোড করুন। - প্রয়োজন না হলে খালি রাখলে স্বয়ংক্রিয়ভাবে বিজ্ঞাপনের অংশটি বন্ধ থাকবে। --- ### ধাপ ৬: বাংলা ও ইংরেজি ফন্ট নির্বাচন - **Style** অপশনের **Font** ড্রপডাউন থেকে ১০০+ ফন্টের তালিকা থেকে পছন্দের ফন্ট বেছে নিন। - **বাংলা ফন্ট:** *Hind Siliguri*, *Noto Sans Bengali*, *Baloo Da 2*, *Anek Bangla*, *Galada*, *Mina*, *Noto Serif Bengali* ইত্যাদি। - **কম্পিউটারের ফন্ট:** ক্রোম বা এজ ব্রাউজারে **Load Installed Fonts** বাটনে ক্লিক করে আপনার কম্পিউটারে ইনস্টল করা সব ফন্ট আনলক করুন। --- ### ধাপ ৭: কালার ও থিম কাস্টমাইজেশন - **Accent Color:** হেডলাইন বার, বর্ডার ও হাইলাইটের রঙ (ডিফল্ট: `#D9232D`)। - **Background:** কার্ডের ব্যাকগ্রাউন্ড রঙ। - **Text Color:** লেখার রঙ। - **Tag Color:** নিউজ ক্যাটাগরি বা ট্যাগের রঙ। --- ### ধাপ ৮: এক ক্লিকে হাই-রেজোলিউশন PNG ডাউনলোড ১. সাইডবারের লাল **Download Image** বাটনে ক্লিক করুন। ২. মুহূর্তের মধ্যে **১০৮০×১০৮০ পিক্সেল** হাই-রেজোলিউশন ক্রিস্টাল ক্লিয়ার PNG ফটো কার্ড আপনার ডিভাইসে ডাউনলোড হয়ে যাবে! --- ## ৩. প্রয়োজনীয় টিপস ও প্রাইভেসি সুরক্ষা - **ডার্ক মোড:** সাইডবারের সূর্য/চাঁদ আইকন দিয়ে ডার্ক মোড অন করে চোখের সুরক্ষায় কাজ করুন। - **অটো-সেভ (Auto-Save):** আপনার সব লেখা, ছবি ও সেটিংস ব্রাউজারের `localStorage`-এ স্বয়ংক্রিয়ভাবে সংরক্ষিত থাকে। পেজ রিফ্রেশ দিলেও ডিজাইন হারাবে না। - **রিসেট অপশন:** সম্পূর্ণ নতুনভাবে শুরু করতে **Reset** বাটনে ক্লিক করুন। - **মোবাইল ইন্টারফেস:** মোবাইল স্ক্রিনে নিচের ফ্লোটিং বাটন দিয়ে এক ট্যাপে সেটিংস খোলা ও ডাউনলোড করা যায়। --- ## 🔗 Links & Attribution - **Official Website:** [https://photocard.fahimm.com](https://photocard.fahimm.com) - **Developer:** [Fahim Murshid](https://fahimm.com) ([Facebook](https://www.facebook.com/gfahim) | [GitHub](https://github.com/murshed)) - **Source Code:** [GitHub Repository](https://github.com/murshed/photocard) - **License:** [MIT License](LICENSE)