添加Add shadow博客

2025-08-19 19:15:38 +08:00
parent d701332485
commit 04901b7244
9 changed files with 290 additions and 0 deletions
--- a/src/app/[locale]/blogs/Add-Text-Shadow/1024_576.png
+++ b/src/app/[locale]/blogs/Add-Text-Shadow/1024_576.png
--- a/src/app/[locale]/blogs/Add-Text-Shadow/512_288.png
+++ b/src/app/[locale]/blogs/Add-Text-Shadow/512_288.png
--- a/src/app/[locale]/blogs/Add-Text-Shadow/blog-prompt.txt
+++ b/src/app/[locale]/blogs/Add-Text-Shadow/blog-prompt.txt
@@ -0,0 +1,9 @@
+我要写一篇博文，介绍如何设置文字阴影。你是一个专业的SEO优化师，从seo的角度来帮我组织这个blog。
+1 打开 https://fast3dtext.com/editor
+2 输入想要的Text
+3 调整背景、字体、颜色
+4 打开Effect - Shadow的开关，选择自己喜欢的阴影颜色
+5 操控三维视角
+6 下载
+
+至此，即完成了文字阴影
--- a/src/app/[locale]/blogs/Add-Text-Shadow/data.ts
+++ b/src/app/[locale]/blogs/Add-Text-Shadow/data.ts
@@ -0,0 +1,18 @@
+import Cover2 from "./512_288.png";
+import { BlogItem } from "../list";
+
+export const Blog: BlogItem = {
+  id: "Add-Text-Shadow",
+  date: "2025-08-19",
+  cover: Cover2,
+  en: {
+    title: "How to Add Stunning Text Shadow Effects to 3D Text Online",
+    summary:
+      "Learn how to create eye-catching text shadow effects for your 3D text designs using Fast3DText. This step-by-step guide shows you how to enable shadows, choose shadow colors, and create professional-looking 3D text with depth and dimension. Perfect for designers and content creators.",
+  },
+  zh: {
+    title: "如何为3D文字添加惊艳的阴影效果（在线工具）",
+    summary:
+      "本文教你使用 Fast3DText 为3D文字添加专业的阴影效果。通过开启阴影开关、选择阴影颜色和调整三维视角，你可以轻松创建具有深度感和立体感的3D文字设计。适合设计师和内容创作者使用。",
+  },
+};
--- a/src/app/[locale]/blogs/Add-Text-Shadow/en.tsx
+++ b/src/app/[locale]/blogs/Add-Text-Shadow/en.tsx
@@ -0,0 +1,89 @@
+import { Box, Heading, Text, Link, Flex } from '@radix-ui/themes';
+import Image from 'next/image';
+import img from "./1024_576.png";
+
+export default function Page() {
+  return (
+    <Flex gap={"4"} direction={"column"} justify={"start"} className='text-left'>
+      <Heading as="h1" size="7" mb="4" className='text-center'>How to Add Stunning Text Shadow Effects to 3D Text Online</Heading>
+
+      <Flex justify={"center"}>
+        <Image src={img} alt="3D Text with Shadow Effect Example" width={1024} height={576} />
+      </Flex>
+
+      <Text as="p" mb="4">
+        Want to make your <strong>3D text designs</strong> stand out with professional shadow effects? This comprehensive guide shows you how to easily add <strong>text shadow effects</strong> to your 3D text using <Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">Fast3DText.com</Link> - the best free online 3D text generator with shadow capabilities.
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🎯 Why Add Text Shadow Effects?</Heading>
+      <Text as="p" mb="4">
+        Text shadows add depth, dimension, and professionalism to your 3D designs. They create visual hierarchy, improve readability, and make your text pop against any background. Perfect for social media graphics, presentations, logos, and marketing materials.
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🚀 Step-by-Step Guide to Adding Text Shadows</Heading>
+
+      <Heading as="h3" size="4" mt="4" mb="2">1. Open the 3D Text Editor</Heading>
+      <Text as="p" mb="4">
+        Start by visiting 👉 <Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">https://fast3dtext.com/editor</Link>
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">2. Enter Your Text Content</Heading>
+      <Text as="p" mb="4">
+        Type the text you want to transform into 3D with shadow effects. You can enter single words, phrases, or multiple words separated by spaces for individual control.
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">3. Customize Basic Settings</Heading>
+      <Text as="p" mb="2">
+        Set up your foundation:
+      </Text>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li><strong>Background</strong>: Choose solid colors, gradients, or transparent background</li>
+        <li><strong>Font</strong>: Select from various 3D-compatible fonts</li>
+        <li><strong>Text Color</strong>: Pick your main text color</li>
+      </ul>
+
+      <Heading as="h3" size="4" mt="4" mb="2">4. Enable Shadow Effects</Heading>
+      <Text as="p" mb="4">
+        This is the key step! Navigate to the <strong>Effect panel</strong> and toggle on the <strong>Shadow switch</strong>. This activates the shadow functionality for your 3D text.
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">5. Choose Your Shadow Color</Heading>
+      <Text as="p" mb="4">
+        Select the perfect shadow color that complements your text. You can choose:
+      </Text>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li><strong>Matching colors</strong> for subtle effects</li>
+        <li><strong>Contrasting colors</strong> for dramatic impact</li>
+        <li><strong>Dark shadows</strong> for traditional depth effects</li>
+        <li><strong>Colored shadows</strong> for creative designs</li>
+      </ul>
+
+      <Heading as="h3" size="4" mt="4" mb="2">6. Adjust 3D Perspective</Heading>
+      <Text as="p" mb="4">
+        Drag and rotate the 3D scene to find the perfect angle that showcases your shadow effect. The shadow will dynamically adjust based on your 3D viewpoint.
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">7. Download Your Creation</Heading>
+      <Text as="p" mb="4">
+        Click the <strong>Download button</strong> to save your 3D text with shadow effects as a high-quality PNG image. Ready to use in your projects!
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">💡 Pro Tips for Best Results</Heading>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li>Use darker shadow colors for more pronounced effects</li>
+        <li>Experiment with different shadow intensities</li>
+        <li>Consider your background color when choosing shadow colors</li>
+        <li>Try multiple angles to find the most flattering shadow presentation</li>
+      </ul>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🎨 Creative Applications</Heading>
+      <Text as="p" mb="4">
+        Text shadow effects are perfect for: logo design, social media graphics, YouTube thumbnails, presentation slides, website headers, marketing materials, and personal projects.
+      </Text>
+
+      <Text as="p" mt="6" style={{ fontWeight: 'bold' }}>
+        Start creating stunning 3D text with professional shadow effects today at <Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">Fast3DText.com</Link>!
+      </Text>
+    </Flex>
+  );
+}
--- a/src/app/[locale]/blogs/Add-Text-Shadow/page.tsx
+++ b/src/app/[locale]/blogs/Add-Text-Shadow/page.tsx
@@ -0,0 +1,82 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import { Box, Flex, } from "@radix-ui/themes";
+import { useLocale } from "next-intl";
+import En from "./en";
+import Zh from "./zh";
+import { Locales } from "@/i18n/config";
+import { Metadata } from "next";
+import { Blog } from "./data";
+
+export default function Page() {
+
+  const locale = useLocale() as "en" | "zh";
+
+  return (
+    <Flex direction={"column"} gap={"4"}>
+      <Header />
+      <Flex justify={"center"} >
+
+        <Box className="md:w-2/3 w-full">
+          {locale == "en" && (<En></En>)}
+          {locale == "zh" && (<Zh></Zh>)}
+        </Box>
+
+      </Flex>
+      <Footer />
+    </Flex>
+  )
+}
+
+const host = process.env.NEXT_PUBLIC_HOST;
+
+const locales = Locales;
+
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+
+  const name = Blog.id;
+  const title = Blog[locale as "en" | "zh"].title;
+  const description = Blog[locale as "en" | "zh"].summary;
+  return {
+    title,
+    description,
+    keywords: [],
+    openGraph: {
+      title,
+      description,
+      url: `${host}/${locale}/blogs/${name}`,
+      images: [
+        {
+          url: `${process.env.NEXT_PUBLIC_HOST}/og-image.png`,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+      locale: locale,
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: [`${process.env.NEXT_PUBLIC_HOST}/og-image.png`],
+    },
+    alternates: {
+      canonical: `${host}/blogs/${name}`,
+      languages: {
+        en: `${host}/en/blogs/${name}`,
+        zh: `${host}/zh/blogs/${name}`,
+      },
+    },
+  };
+}
--- a/src/app/[locale]/blogs/Add-Text-Shadow/zh.tsx
+++ b/src/app/[locale]/blogs/Add-Text-Shadow/zh.tsx
@@ -0,0 +1,89 @@
+import { Box, Heading, Text, Link, Flex } from '@radix-ui/themes';
+import Image from 'next/image';
+import img from "./1024_576.png";
+
+export default function Page() {
+  return (
+    <Flex gap={"4"} direction={"column"} justify={"start"} className='text-left'>
+      <Heading as="h1" size="7" mb="4" className='text-center'>如何为3D文字添加惊艳的阴影效果（在线工具）</Heading>
+
+      <Flex justify={"center"}>
+        <Image src={img} alt="3D文字阴影效果示例" width={1024} height={576} />
+      </Flex>
+
+      <Text as="p" mb="4">
+        想要让你的<strong>3D文字设计</strong>通过专业的阴影效果脱颖而出吗？本完整指南将教你如何使用<Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">Fast3DText.com</Link>轻松为3D文字添加<strong>阴影效果</strong> - 这是最好的免费在线3D文字生成器，具备阴影功能。
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🎯 为什么要添加文字阴影效果？</Heading>
+      <Text as="p" mb="4">
+        文字阴影能为你的3D设计增添深度、立体感和专业感。它们创建视觉层次，提高可读性，并让你的文字在任何背景下都更加突出。非常适合社交媒体图形、演示文稿、Logo设计和营销材料。
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🚀 添加文字阴影的分步指南</Heading>
+
+      <Heading as="h3" size="4" mt="4" mb="2">1. 打开3D文字编辑器</Heading>
+      <Text as="p" mb="4">
+        首先访问 👉 <Link href="https://fast3dtext.com/editor" target="_blank">https://fast3dtext.com/editor</Link>
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">2. 输入你的文字内容</Heading>
+      <Text as="p" mb="4">
+        输入你想要转换为带阴影效果的3D文字。可以输入单个单词、短语或用空格分隔的多个单词以获得单独控制。
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">3. 自定义基本设置</Heading>
+      <Text as="p" mb="2">
+        设置基础配置：
+      </Text>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li><strong>背景</strong>: 选择纯色、渐变或透明背景</li>
+        <li><strong>字体</strong>: 从各种3D兼容字体中选择</li>
+        <li><strong>文字颜色</strong>: 选择主要文字颜色</li>
+      </ul>
+
+      <Heading as="h3" size="4" mt="4" mb="2">4. 启用阴影效果</Heading>
+      <Text as="p" mb="4">
+        这是关键步骤！导航到<strong>效果面板</strong>并打开<strong>阴影开关</strong>。这将激活3D文字的阴影功能。
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">5. 选择阴影颜色</Heading>
+      <Text as="p" mb="4">
+        选择与你的文字完美搭配的阴影颜色。你可以选择：
+      </Text>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li><strong>匹配颜色</strong>获得微妙效果</li>
+        <li><strong>对比颜色</strong>获得戏剧性效果</li>
+        <li><strong>深色阴影</strong>获得传统深度效果</li>
+        <li><strong>彩色阴影</strong>获得创意设计</li>
+      </ul>
+
+      <Heading as="h3" size="4" mt="4" mb="2">6. 调整3D视角</Heading>
+      <Text as="p" mb="4">
+        拖动并旋转3D场景，找到展示阴影效果的最佳角度。阴影会根据你的3D视角动态调整。
+      </Text>
+
+      <Heading as="h3" size="4" mt="4" mb="2">7. 下载你的创作</Heading>
+      <Text as="p" mb="4">
+        点击<strong>下载按钮</strong>将带阴影效果的3D文字保存为高质量的PNG图像。随时可用于你的项目！
+      </Text>
+
+      <Heading as="h2" size="5" mt="6" mb="3">💡 最佳效果的专业技巧</Heading>
+      <ul style={{ listStyleType: 'disc', paddingLeft: '20px' }}>
+        <li>使用较深的阴影颜色获得更明显的效果</li>
+        <li>尝试不同的阴影强度</li>
+        <li>选择阴影颜色时考虑背景颜色</li>
+        <li>尝试多个角度找到最合适的阴影展示</li>
+      </ul>
+
+      <Heading as="h2" size="5" mt="6" mb="3">🎨 创意应用场景</Heading>
+      <Text as="p" mb="4">
+        文字阴影效果非常适合：Logo设计、社交媒体图形、YouTube缩略图、演示文稿幻灯片、网站标题、营销材料和个人项目。
+      </Text>
+
+      <Text as="p" mt="6" style={{ fontWeight: 'bold' }}>
+        立即开始在 <Link href="https://fast3dtext.com/editor" target="_blank" rel="noopener noreferrer">Fast3DText.com</Link> 创建带有专业阴影效果的惊艳3D文字！
+      </Text>
+    </Flex>
+  );
+}
--- a/src/app/[locale]/blogs/list.ts
+++ b/src/app/[locale]/blogs/list.ts
@@ -15,8 +15,10 @@ export interface BlogItem {
 import { StaticImageData } from "next/image";
 import { Blog as Create3DTextBlog } from "./Create-3D-Text-with-the-Barbie-Font/data";
 import { Blog as Create3DLetterBlog } from "./Create-3D-Letters/data";
+import { Blog as AddTextShadowBlog } from "./Add-Text-Shadow/data";

 export const blogs = [
  Create3DLetterBlog,
  Create3DTextBlog,
+  AddTextShadowBlog,
 ] satisfies BlogItem[];
--- a/src/components/common/PreviewToolbar.tsx
+++ b/src/components/common/PreviewToolbar.tsx
@@ -14,6 +14,7 @@ const Sizes = [
  "1024x576",
  "1024x768",
  "800x600",
+  "512x288"
 ]
 interface Size {
  width: number;