اگر به دنبال ساخت سریع تصویر و وکتورهای قابل ویرایش هستید، آموزش Recraft AI دقیقا به شما نشان می دهد چطور با یک پرامپت ساده آیکن، ایلاستریشن یا بنر بسازید، خروجی را به صورت SVG دانلود کنید و آن را در Figma یا Illustrator ویرایش کنید؛ بدون وابستگی به فایل های شلوغ یا پیکسل های خراب.

Recraft AI چیست و چه زمانی انتخاب خوبی است؟

Recraft AI یک ابزار تولید تصویر با هوش مصنوعی است که امکان ساخت خروجی های پیکسلی مانند PNG و خروجی های برداری قابل ویرایش مانند SVG را فراهم می کند. وقتی می خواهید آیکن، لوگوتایپ آزمایشی، ایلاستریشن فلت، یا المان های رابط کاربری بسازید و بعدا رنگ، سایز و جزئیات را تغییر دهید، خروجی برداری Recraft انتخاب مناسبی است. برای عکس های کاملا واقع گرایانه اغلب خروجی پیکسلی مناسب تر است.

پیش نیازهای کوتاه

  • یک حساب کاربری در Recraft AI و مرورگر به روز.
  • آشنایی پایه با یک نرم افزار ویرایش برداری مانند Figma یا Adobe Illustrator.
  • تعریف هدف: آیکن خطی، ایلاستریشن فلت، بنر ساده یا الگوی پس زمینه.

مراحل ساخت وکتور قابل ویرایش با Recraft AI

  1. ورود به Recraft AI و انتخاب حالت مناسب: اگر قصد خروجی برداری دارید حالت یا مدل مرتبط با Vector یا Illustration را انتخاب کنید.
  2. تنظیم نسبت تصویر: مربع برای آیکن ها، افقی برای بنر، عمودی برای پوستر. نسبت درست، ترکیب بندی خروجی را بهتر می کند.
  3. نوشتن پرامپت دقیق: موضوع، سبک، ساختار هندسی، رنگ، پس زمینه و سطح جزئیات را مشخص کنید (الگوی پیشنهادی در بخش بعدی).
  4. تولید اولیه: روی Generate بزنید و چند نمونه دریافت کنید. اگر امکان تکرار یا Variation وجود دارد، 3 تا 6 گزینه بسازید تا مقایسه کنید.
  5. اصلاح پرامپت: اگر خروجی شلوغ بود، کلمات ساده سازی را اضافه کنید. اگر جزییات کم بود، عناصر کلیدی را نام ببرید.
  6. انتخاب بهترین نسخه و دانلود SVG: برای ویرایش کامل، فرمت SVG را بگیرید. اگر نیاز به پیش نمایش سریع در وب دارید، PNG نیز مناسب است.
  7. ویرایش در Figma یا Illustrator: گروه بندی ها را مرتب کنید، نام لایه ها را معنادار کنید، رنگ ها و ضخامت خطوط را هماهنگ کنید.

الگوی پرامپت برای وکتورهای تمیز

پاسخ کوتاه: پرامپت خوب باید موضوع، سبک برداری، هندسه، رنگ، پس زمینه و محدودیت پیچیدگی را مشخص کند.

الگو:

  • موضوع: آیکن سبد خرید، ایلاستریشن صفحه فرود، پس زمینه موجی.
  • سبک: flat vector, line icon, outline, geometric shapes.
  • هندسه و ضخامت: symmetric, 24px grid, stroke 2px, rounded corners.
  • رنگ: monochrome, 2-color palette, primary color #0EA5E9.
  • پس زمینه: no background, transparent background.
  • پیچیدگی: minimal, no gradients, no textures, few nodes.

نمونه پرامپت ها:

  • آیکن خطی سبد خرید، flat vector, outline, 24px grid, stroke 2px, rounded caps, monochrome, no background, minimal, no gradients
  • ایلاستریشن فلت یک توسعه دهنده پشت لپ تاپ، geometric vector shapes, 2-color palette (indigo and white), clean lines, transparent background, minimal details
  • الگوی پس زمینه موجی برای هدر وبسایت، smooth geometric curves, vector, 3-color palette (teal, blue, violet), no noise, seamless look

نکته زبانی: توصیف سبک های طراحی معمولا به انگلیسی رایج تر است. اگر خروجی فارسی شما مبهم بود، بخش سبک و تکنیک را انگلیسی بنویسید و موضوع را فارسی نگه دارید.

نکته های کلیدی برای وکتورهای تمیز

  • برای وکتور واقعی، کلماتی مانند vector, outline, flat را حتما بگنجانید.
  • عبارت های no gradients و no textures از تبدیل خروجی به شکل پیکسلی جلوگیری می کند.
  • اگر گزینه پس زمینه شفاف دارید، فعال کنید یا در پرامپت بنویسید transparent background.
  • برای آیکن ها اندازه شبکه را در پرامپت ذکر کنید (مثل 24px grid یا 32px grid).
  • برای مجموعه آیکن یکپارچه، محدودیت رنگ و ضخامت خط را ثابت نگه دارید.
  • اگر در ابزار گزینه Negative prompt وجود داشت، موارد ناخواسته مانند shadow, noise, 3D را در آن فهرست کنید.

مثال عملی 1: ساخت یک آیکن خطی 24px

  1. پرامپت: shopping cart line icon, vector, outline, 24px grid, stroke 2px, rounded caps, monochrome, no gradients, no background, minimal
  2. تولید 4 نمونه و انتخاب تمیزترین اشکال.
  3. دانلود SVG و باز کردن در Figma.
  4. Ungroup، تنظیم Stroke به 2، Cap و Join را بر rounded بگذارید، نام گذاری لایه ها: cart, wheels.
  5. تبدیل به کامپوننت و تعریف رنگ به صورت CurrentColor برای استفاده آسان در وب.

مثال عملی 2: ایلاستریشن فلت برای هدر

  1. پرامپت: flat vector illustration of a developer at a desk, geometric shapes, 2-color palette (blue and white), clean lines, transparent background, minimal details
  2. انتخاب خروجی با اشکال ساده و مرزهای واضح.
  3. در Illustrator، مسیرهای اضافی را Merge کنید، منحنی های شکسته را Smooth کنید، رنگ های غیرضروری را حذف کنید.
  4. خروجی نهایی را به عنوان SVG بهینه شده ذخیره کنید.

کدام خروجی را انتخاب کنیم؟ SVG یا PNG

پاسخ کوتاه: برای آیکن، لوگوتایپ آزمایشی و گرافیک فلت، SVG بهتر است؛ برای عکس و بافت واقعی، PNG مناسب تر است.

نوع خروجیکاربرد مناسبمزیتمحدودیت
SVG (وکتور)آیکن، ایلاستریشن فلت، نمودار، المان UIمقیاس پذیری بی نقص، حجم کم، قابل ویرایشبرای تکسچر و فوتورئال مناسب نیست
PNG (رستر)عکس، تکسچر، سایه نرمنمایش دقیق پیکسل هاکیفیت در بزرگنمایی افت می کند

بررسی کیفیت و ویرایش خروجی در Figma یا Illustrator

چطور مطمئن شویم خروجی واقعا وکتور است؟

  • در Figma یا Illustrator تا 800 درصد زوم کنید؛ نباید دندانه پیکسلی ببینید.
  • مسیرها باید Path باشند، نه تصویر Embed شده.
  • تعداد نودها منطقی باشد؛ اگر بی جهت زیاد است، دستور Simplify Path را با دقت اجرا کنید.

روتین پیشنهادی ویرایش:

  1. Ungroup و نام گذاری لایه ها با کلیدواژه های معنادار.
  2. هماهنگ سازی Stroke: ضخامت یکسان، Cap و Join مطابق راهنمای طراحی شما.
  3. پاکسازی رنگ ها: تعداد رنگ ها را به پالت نهایی کاهش دهید.
  4. ساده سازی مسیرها: حذف نقاط اضافه، صاف کردن منحنی ها.
  5. خروجی نهایی: SVG بهینه، با viewBox و بدون متادیتای اضافی.

کد نمونه برای استفاده از SVG در وب

این نمونه نشان می دهد چطور یک آیکن برداری را به صورت Inline استفاده کنید تا بتوانید رنگ آن را با CSS کنترل کنید.

<style>
.icon {
  width: 24px;
  height: 24px;
  color: #0ea5e9; /* رنگ با currentColor کنترل می شود */
}
.icon.dark { color: #0f172a; }
</style>

<span class="icon" aria-hidden="true">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
       stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       xmlns="http://www.w3.org/2000/svg">
    <path d="M3 5h2l2.5 10h9l2-6H7" />
    <circle cx="9.5" cy="19" r="1.5" />
    <circle cx="16.5" cy="19" r="1.5" />
  </svg>
</span>

نکته های بهینه سازی:

  • تا حد امکان از Inline SVG استفاده کنید تا رنگ و اندازه را با CSS کنترل کنید.
  • ویژگی viewBox را حفظ کنید تا مقیاس پذیری درست بماند.
  • برای کاهش حجم، از ابزارهای بهینه سازی SVG مانند خروجی Optimize در ویرایشگرها استفاده کنید.

اشتباه های رایج و رفع آنها

  • خروجی به جای وکتور، پیکسلی است: در ابزار حالت Vector را انتخاب کنید و در پرامپت عبارت های flat vector، outline و no gradients را بیاورید.
  • جزئیات بیش از حد و فایل سنگین: سطح جزئیات را در پرامپت کاهش دهید (minimal, few nodes) و بعد از دانلود Simplify Path را اجرا کنید.
  • پس زمینه ناخواسته: در پرامپت transparent background یا no background اضافه کنید. اگر باز هم بود، لایه پس زمینه را در ویرایشگر حذف کنید.
  • عدم یکپارچگی آیکن ها: برای کل مجموعه، یک Grid و Stroke ثابت تعریف کنید و همان را در پرامپت هر آیتم تکرار کنید.
  • رنگ های کنترل ناپذیر: پالت محدود تعریف کنید (2-color palette) و بعد از خروجی، رنگ ها را به توکن های طراحی نگاشت کنید.

محدودیت ها، حقوقی و حریم خصوصی

  • تولید لوگو یا شباهت به نشان های ثبت شده می تواند مشکل حقوقی ایجاد کند. نشانه های تجاری را کپی نکنید.
  • متن های ظریف یا فونت های خاص ممکن است دقیق رندر نشوند؛ متن را بهتر است دستی در ویرایشگر برداری اضافه کنید.
  • در موضوعات حساس یا محتوای محرمانه، از بارگذاری اطلاعات شخصی خودداری کنید. سیاست های حریم خصوصی ابزار را پیش از استفاده بررسی کنید.
  • برای استفاده تجاری، شرایط مجوز و استفاده مجاز ابزار را از منبع رسمی آن مطالعه کنید.

چه زمانی گزینه دیگری بهتر است؟

  • عکاسی واقع گرایانه و بافت پیچیده: خروجی پیکسلی مناسب تر است.
  • آیکن برند رسمی: از فایل SVG رسمی برند استفاده کنید، نه تولید خودکار.
  • لوگوی نهایی سازمان: طراحی دستی توسط طراح گرافیک و سیستم هویت بصری کامل توصیه می شود.

چک لیست کوتاه قبل از انتشار

  • وکتور واقعی است؟ روی مسیرها زوم کردید و پیکسل ندیدید.
  • Stroke ها و شعاع گوشه ها یکدست هستند.
  • پالت رنگی محدود و مطابق راهنمای برند است.
  • SVG بهینه و دارای viewBox است و با CSS رنگ پذیر است.
  • نام لایه ها و گروه بندی ها خواناست و آماده همکاری تیمی است.

گام بعدی چیست؟

یک مجموعه 6 تایی آیکن خطی با Grid 24px و Stroke 2px بسازید. همه را با یک پالت بسازید، خروجی را به SVG بگیرید، در Figma به کامپوننت تبدیل کنید و در پروژه وب خود Inline کنید. اگر می خواهید فراتر از پرامپت های پایه بروید و جریان کار تیمی با ابزارهای هوش مصنوعی را حرفه ای کنید، شرکت در یک دوره آموزش ابزارهای هوش مصنوعی می تواند مسیر یادگیری شما را سریع تر کند.