رنگبندی در وردپرس چه مراحلی دارد و آیا افزونه ای هم دارد؟

رنگبندی در وردپرس چه مراحلی دارد و آیا افزونه ای هم دارد؟

رنگبندی

اگر میخوهید ظاهر پیشخوان وردپرس خود را به صورت زیا و کاربر پسند ایجاد کنید باید یکسری مراحل را انجام دهید

با این مراحل میتوانید یک محیط زیبا برای کارکردن با وردپرس خود داشته باشید.

این اقدام را سفارشی سازی محیط پیشخوان وردپرس میگویند.

حالت پیش فرض وردپرس رنگبندی زیبایی دارد ولی ممکن است با سلیقه شما سازگار نباشد.

میتوانید با این روش به یک رنگ بندی و ظاهر زیبا دست پیدا کنید.

اگر بخواهیم رنگ بندی وردپرس را تغییر دهیم میتوانیم یکسری تنظیمات را دست کاری کنیم که رنگ محیط عوض

شود. در صورتی که که بخواهیم رنگی خاصی را برای محیطمان در نظر بگیریم باید افزونه ای نصب کنیم که رنگ

مورد نظرمان را در محیط استفاده کنیم.

در این مقاله ایتدا نحوه ی تغییر رنگ تغییر رنگ در تنظیمات وردپرس را به شما آموزش میدهم سپس به سراغ نصی

افزونه میرویم و از آنجان هم اقدام به تغییر رنگ میکنیم.

مراحلی که در این آموزش میباشد بسیار ساده و کاربردی میباشد و میتوانید به راحتی استایل وردپرس خود را

تغییر دهید.

۱:عوض کردن استایل و رنگ در پیشخوان

قبل از اینکه بخواهیم رنگبندی را با افزونه انجام دهیم ابتدا به سراغ رنگ با تنظیمات میرویم اگر مراحل را به

درستی انجان دهید میتوانید به رنگ بندی که مورد علاقه شما برسید.

طبق تصویر زیر ابتدا به قسمت کاربران بروید.

سپس شناسه کاربری را انتخاب کنید.

 

تغییر رنگ در وردپرس

بعد از انجام این مراحل به تصویر بالا برای شما ظاهر میشود.

در صورتی که این قسمت برای شما فهال نبود میتوانید از قسمت بالای سمت راست صفحه پیشخوان خود

قسمتی که عکس شما را نشان میدهد میتوانید به این صفحه وارد شوبد.

همانند تصویر زیر:

تغییر رنگ در وردپرس3

ابتدا روی تصویر بالای سمت راست کلیک کنید سپس ازنواری که باز میشود بر روی شناسه من کلیک کنید تا به راحتی وارد قسمت رنگها شوید.

خوب اکنون که وارد قسمت مربوط به رنگبندی شدید برای تغییر رنگ

پیشخوان یکی از قسمت های مشخص شده را انتخاب میکنید.

بعد از اینکه رنک مورد علاقه خود را انتخاب کردید باید بر روی ذخیره کلیک کنید تا تغییرات اعمال شوند.

مشکلی که اکنون متوجه آن میشوید اینست که انتخاب شما

در رنگبندی محدود است و نمیتوانید رنگهای متنوع تری را انتخاب کنید پس مجبور

هستید به سراخ افزونه بروید .

در ادامه به شما نحوه کار با افزونه را آموزش میدهم :

۲:سفارشی سازی رنگ بندی در پیشخوان با افزونه

بهترین افزونه ای که میتوانید با آن کار رنگبندی در پیشخوان خود را به راحتی انجام دهید ، افزونه ی  Fancy Admin UI است.

این افزونه ۴۰۰۰ نصب فعال داد و برای کار ما بسیار مناسب میباشد.

برای نصب این افزونه  همانند تصویر زیر عمل کنید:

افزونه رنگبندی

بعد از اینکه لفزونه مربوطه رو با سرچ بدست آوردید آن را نصب و سپس فعال کنید.

افزونه Fancy Admin UI

بعد از اینکه افزونه مربوطه رو نصب و فعال کردید باید به قسمت تنظیمات رفته و رنگبندی دلخواهتان را انجام دهید.

برای رفتن به قسمت تنظیمات همانند تصویر زیر عمل کنید .

ابتدا به تنظیمات رفته سپس قسمت همگانی را انخاب کنید.

 

تغییر رنگ در وردپرس2

 

وقتی وارد این قسمت شدید اسکرول رو به پایین ترین قسمت صفحه بیاورید  تا به به قسمتی برسید که نشان دهنده ی تغییر رنگ است.

Admin UI Primary Color

Admin UI Secondary Color

در این دو قسمت میتوانید رنگ پیشخوان را انتخاب کنید و آن رنگی که دلخواهتان است را برای پیشخوان انتخاب کنید.

افزونه ای که به شما معرفی کردم نه تنها برای خود پشخوان استفده میکنید بلکه میتوانید برای صفحات مختلف هم از این افزونه استفاده کنید و به راحتی صفحات خود را رنگ کنید.

 

همه چیز درباره فایل زیلا filezilla

همه چیز درباره فایل زیلا filezilla

همه چیز درباره فایل زیلا filezilla

مطمعنا در آپلود فایهای خود در هاست به مشکل برخورد کرده اید و هر کاری میکنید نمیتوانید آپلود را انجام دهید.

در این جا دو راه حل دارید:

۱ : ابتدا باید به شرکتی که هاست را خریداری کرده اید یک تیکن بزنید.

در این روش شرکت ارائه دهنده هاست به شما یک ایمیل میدهد و شما فایلی که میخواهید آپلود کنید را برای آنها میفرستید.

شرکت ارائه دهنده هاست بعد از دریافت ایمیل آن را به هاست شما انتقال میدهد سپس شما میتوانید از فایل مورد نظر خود استفاده کنید.

حال فرض کنید تعداد فایهای شما زیاد باشد آیا شما میتوانید مدام به شرکت ارائه دهنده هاست تیکت بزنید و آنها مدام برای شما آپلود را انجام

دهند؟

کار با فایل زیلا filezilla

قصد دارم در این مقاله به شما نحوه ی کار با فایل زیلا filezilla را آموزش بدهم:

این نرم افزار به راحتی به شما کمک میکند تا فایلهای خود را بدون مشکل به هاست خود انتقال دهید و مشکلی در اکسترکت هم نداشته

باشید.

شما ابتدا باید نرم افزار فایل زیلا را دانلود کنید.

پس از دانلود با پنره ی زیر مواجه میشوید:

پنجره اصلی فایل زیلا

اکنون قصد دارم به معرفی قسمت های مختلف فایل زیلا filezilla بپردازم:

معرفی فایل زیلا

۱ : آدرس ای پی یا آدرس سایت خود را در این قسمت باید وارد کنید.

۲ : نام کاربری خود را در این قسمت وترد کنید برای بدست آوردن این نام باید باید به هاست خود بروید و اطلاعات مربوط به آن را از قسمت FTP

بردارید.

معرفی FTPمعرفی قسمت های مختلف FTP :

۱ : آدرس آی پی  شما در این قسمت است ولی باید شما نباید آدرس ای پی را بردارید باید نام دامنه یا نام سایت خود را کپی کنید.

۲ : نام کاربری شما در این قسمت است و باید دقیقا همین نام را وارد کنید . دقت کنید که از گذاشتن فصله یا کاراکترهای اضافی استفاده نکنید.

۳ : مهمترین قسمت کلمه عبور میباشد که باید دقیقا همین رمز را بردارید.

خوب بعد از اینکه این موارد را کپی کردید وارد نرم افزار فایل زیلا filezilla شوید.

همه مواردی که کپی کرده اید را در قسمت مربوط به خودش کپی کنید همانند تصویر زیر:

در آخرین مرحله که PORT نوشته شده ، باید خالی بزارید و گزینه ی Quickconnect کلیک کنید.

معرفی فایل زیلا

در این مرحله باید به قسمت سایت منیجر بروید و اطلاعات تکمیلی را در این قسمت وارد کنید :

 

معرفی فایل زیلا

 

تنظیمات فایل زیلا filezilla

خوب اکنون به مهترین قسمت فایل زیلا filezilla وارد شده اید که باید دوباره اطلاعاتی که در مرحله قبل وارد کرده اید را وارد کنید و یک سری

تنظیمات دیگر که اکنون به شما توضیح میدهم.

۱ : ابتدا باید این قسمت را بزنید تا وارد سایت منیجر شوید.

۲ : در این قسمت گزینه ی New Site را کلیک کنید.

۳ : نام سایت یا دامنه خود را وارد کنید.

۴ : در این قسمت عدد ۲۱ را وارد کنید.

۵ : در این قسمت گزینه ی FTP-File Transfer Protocol را انتخاب کنید.

۶ : در این قسمت Only use plane FTP را انتخاب میکنیم.

۷ : گزینه Normal را در این قسمت انتخاب میکنیم.

۸ : در این قسمت نام کاربری که در قسمت قبل از FTP هاست خود برداشته بودید را وارد کنید.

۹ : در این قسمت کلمه عبوری که در قسمت FTP هاست شما میباشد را وارد کنید.

:::توجه داشته که نباید نام کاربری یا کلمه عبور را از جانب خودتان انتخاب کنید باید دقیقا همان هایی باشد که در قسمت FTP هاست شما

موجود میباشد استفاده کنید.

۱۰ : در نهایت روی گزینه Connect کلیک کنید .

اگر اطلاعات را به درستی وارد کرده باشید به هاست خود متصل میشوید و تصویر زیر را نمایان میکند:

اتصال به هاست

در قسمت سمت راست ینی شماره ۱ اطلاعات سیستم شما موجود میباشد .

در قسمت سمت چپ ینی شماره ۲ اطلاعات هاست شما را نشان میدهد.

در این مرحله کار بسیار راحت است و میتوانید اطلاعات خود را به هاست منتقل کنید.

این کار با drag and drup انجام میشود یعنی فایل مورد نظر را با چپ کلک ماس نگه دارید به بکشید و در هاست رها کنید به همین راحتی

میتوانید عملیات آپلود فایل را انجام دهید.

 

 

 

 

اموزش نصب قالب وردپرس

نصب قالب وردپرس

قبل از نصب قالب وردپرس ابتدا بصورت خلاصه درباره ی  وردپرس توضیح می دهم.

وردپرس یک نرم افزار رایگان می باشد که می توانید آن را بر روی اینترنت قرار دهید

و یک وب سایت را با تمام ویژگی های مورد نیازتون برای خود بسازید و آن را مدیریت کنید.

درباره مدیریت وب سایت برای افراد مبتدی مطلب لینک شده را مطالعه کنید.

اگر این توضیحات کافی نبود به توضیحات پست وردپرس چیست  که لینک شده است مراجعه کنید.

برای داشتن یک سایت باید ابتدا بتوانید نصب قالب وردپرس را به خوبی انجام دهید.

 

یکی از ابتدایی ترین کار ها برای ساخت یک سایت وردپرسی نصب آن و بالا آوردن آن بر روی سیستم می باشد.

ما در اینجا صفر تا صد نصب  قالب وردپرس را بر روی سیستم به شما آموزش میدهیم.

خب قبل از هرچیزی لازم است که قالب وردپرسی را دانلود کنید.

درگوگل قسمت موتور جستجو سرچ کنید:  دانلود قالب وردپرسی فارسی .

دانلود آن که تمام شد باید نرم افزار زمپ (xampp)  را دانلود کرده و بر سیستم خود در درایو C  نصب کنید.

گام به گام با ما پیش بروید تا به راحتی بتوانید نصب قالب وردپرس را خودتان بدون مشکل انجام دهید.

حال که نرم افزار زمپ بر روی سیستم شما نصب شده است روی زمپ کلیک کنید تا آن را روشن کنید.

طبق عکس زیر دو گزینه اول را Start کنید تا گزینه Apache و Mysql سبز شود.

اگر سبز نشدند در یک قسمت از نصب کردن زمپ  مشکل ایجاد شده است نرم افزار زمپ را آنیستال نموده و دوباره نصب نمایید.

نصب قالب وردپرس

حال وارد فولدر زمپ در درایو C شده شده و پوشه htdocs  را پیدا کنید.

خب فایل زیپ وردپرس دانلود شده را داخل فولدر htdocs کپی نمایید.

گام های نصب قالب وردپرس

گام اول نصب قالب وردپرس :

روی زیپ وردپرسی خود کلیک راست کرده و گزینه Extract Here  را می زنید.

اموزش نصب قالب وردپرس

گام دوم نصب قالب وردپرس :

یک پوشه با نام WordPress  یا بهتره بگم نام فایل زیپ شما باز میشود.

به عنوان نام دلخواه میتوانید روی ان پوشه کلیک راست کرده و گزینه Rename را انتخاب کنید.

حال نام را به آنچه میخواهید تغییر دهید.

نصب قالب وردپرس

 

 

 

گام سوم نصب قالب وردپرس :

وارد نرم افزار کروم یا هر مرورگر دلخواهی که بر روی سیستم خود دارید شوید و در قسمت نوار آدرس بالا، وارد کنید

(لازم است بدانید برای انجام این مراحل نیاز به اتصال به اینترنت ندارید )

Localhost/phpmyadmin حال اینتر را زده تا سیستم قسمتی که لازم است را برای شما باز کند.

 

اموزش نصب قالب وردپرس

حال یک صفحه برای شما باز می شود.

نصب قالب وردپرس

گام چهارم نصب قالب وردپرس :

در قسمت بالا نوشته database

با کلیک بر روی آن قسمت میتوانید یک نام برای دیتابیس خود بگذارید .و درآخر گزینه Create را بزنید.

اموزش نصب قالب وردپرس

گام پنجم نصب قالب وردپرس :

پس از ساخت دیتابیس لازم است که دوباره وارد مرورگر شوید تا قالب خود را باز کنید.

برای این کار در قسمت نوار بالا در نرم افزار مرورگر وارد می کنید

Localhost/azmayesh

توجه کنید که چون نام دیتا بیس ما azmayesh  بود بعد از کلمه ی localhost/ ان را نوشتیم

شما نام دیتابیس خود را وارد کنید .

اموزش نصب قالب وردپرس

در این گام پس از سرچ یک صفحه برای شما باز می شود که با کلیک بر روی گزینه ی  “بزن بریم”  وارد صفحه ای جدید می شوید.

اموزش نصب قالب وردپرس

 

گام ششم نصب قالب وردپرس :

در این مرحله شما باید نام پایگاه داده خود را وارد کرده

نام کاربری را حتما root  بگذارید

قسمت رمز را خالی گذاشته

و به بقیه قسمت ها کاری نداشته باشید

حال بر روی گزینه “فرستادن ” کلیک کنید.

نصب قالب وردپرس

گام هفتم نصب قالب وردپرس :

بر روی گزینه “اجرای نصب” کلیک کنید.

اموزش نصب قالب وردپرس

گام هشتم نصب قالب وردپرس :

در این مرحله باید چند فیلد را پر کنید

ابتدا یک نام برای عنوان سایت خود وارد میکنید.

ما از اسم فرداطرح استفاده(fardatarh) باید میکردیم که یادمان نرود.

نام کاربری را  admin  گذاشته یا هر نام دلخواهی

یک رمز هم انتخاب کرده اما مراقب باشید که رمز یادتان نرود، به زودی

آموزشی برای پیدا کردن رمز های گم شده تان قرار میدهیم ،

چرا که یکی از عدیده مشکلات طراحان مبتدی هست، اما بهتر است ساده ترین را در این مرحله انتخاب کنید:
مثلا fardatarh/fardatarh یا admin /admin،

تاکید انتخاب رمز ساده ای مانند اسم خود سایتتان بر این است که در ابتدای راه  اذیت نشوید وگرنه

حدس زدن این که رمز سایتی به نام فرداطرح ، فرداطرح باشد برای یک هکر کار آسانی است.

و سپس ایمیل خود را وارد کنید .

نیازی نیست که ایمیل اصلی تان را در لوکال هاست، از این الگو تبعیت کنید:

fardatarh@fardatarh.ir

 

و کلیک بر روی گزینه “راه اندازی وردپرس”

نصب قالب وردپرس

و در گام های بعد گزینه ” ورود ” را بزنید تا مراحل پیش برود.

 

اموزش نصب قالب وردپرس

نصب قالب وردپرس

حال قالب شما آماده است.

اموزش نصب قالب وردپرس

موفق باشید.

قرار گرفتن در صفحه ی اول گوگل مانند آب خوردن(با وردپرس)

چگونه وردپرس در صفحه اول گوگل بیاید

صفحه اول گوگل

صفحه اول گوگل

در حال حاضر قرار گرفتن در صفحه اول گوگل مهمترین نگرانی های مدیرانی است که در کسب و کار فعالیت دارند.

گوگل  به عنوان پر بازدیدترین وبسایت نقش زیادی برای تجارتهای اینترنتی دارد .

یکی از عالیترین مراکزهایی که توانایی برای ‌سایت‌ها ترافیک مؤثر ایجاد کند.

افرادی که از راه گوگل به وبسایت شما رجوع می‌کنند واقعاً افرادی میباشند که به محصولات و محتوای سایت شما تمایل دارند.

به همین دلیل به راحتی می‌توانید آن‌ها را به مشتریان خود تبدیل کنید.

در این مقاله ابتدا توضیح مختصری راجع به موتور جستجوی گوگل داده می‌شود.

چگونه وردپرس در صفحه اول بیاید

به سئوی بیرونی اهمیت دهید،

مقصود از سئوی بیرونی انجام هرگونه عملی خارج از وبسایت میباشد،

فعالیت در وبسایت های متفاوت و ساخت لینک،

فعالیت در شبکه های اجتماعی، بازاریابی ویدئویی و … از جمله اینگونه فعالیت ها هستند.

شما با انتشار محتوای سایت خود می توانید بیننده زیادی را به سمت وسایتتان راهنمایی کنید.

از سوی دیگر به گوگل و سایر موتورهای جستجو بفهمانید که وبسایت شما مطالب مناسب و جالبی دارد.

افراد مختلف به آن علاقه نشان میدهند و آنها را انتشار میدهند و در صفحه اول گوگل قرار میگیرید.

سیگنالهادر رفتارهای مخاطب تاثیر مستقیمی بر روی رتبه بندی در گوگل و قرار گرفتن در صفحه اول گوگل خواهد داشت.

تولید محتوای مناسب بدین معناست که مطلبی را انتشار دهید که بیننده را به سمت شما بکشاند .

محتوای وبسایت های دیگر را کپی و در وبسایت خود انتشار ندهید .

این نمونه ای از مطالبی مضر در دنیای  وبسایتها برای

نمایان شدن در صفحه اول گوگل است .

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

اول گوگل قرارنمیگیرند.

شاید در همان اول کار شما محتوایی را کپی کنید و در سایت خود قرار دهید و جایگاه خوبی نیز بدست بیاورید.

تکرار کپی همیشگی نخواهد بود و رتبه پست کپی شده پایین خواهد امد .

 

لینک ها در محتواها

دلیل بسیار زیادی در امتیاز دادن از طرف گوگل میباشد پس بسیار مهم هست.

گوگل لینک های خروجی از محتوا را به عنوان امتیاز منفی و لینک های ورودی به مطلب را به عنوان امتیاز مثبت برای آن مطلب

در نظر خواهد گرفت .

پس به تعداد لینک های ورودی به مطالب شما بیشتر شود مطلب شما امتیاز بیشتری خواهد گرفت و در

صفحه اول گوگل ظاهر میشوید و اعتبار مطالب شما بیشتر میشود.

گوگل برای یافتن محتوای جدید وبسایت های که در دایرکتوری  ثبت نشده اند از همین طریق عمل میکند .

به عنوان مثال اگر لینک محتوا از وبسایت شما در سایتی معتبر که گوگل هرروز به ان رجوع میکند قرار بگیرد،

گوگل با همان لینک وارد سایت شما شده و پستهای شما را مورد بررسی قرار میدهد و اگر از نظر الگوریتم های خود مشکلی

وجود نداشته باشد مطلب شما را ثبت می کند.

پس لینک های خود را در سایت های بااعتبار بالا و پربیننده و البته معروف انتشار دهید در نتیجه وبسایت خود را در صفحه اول

گوگل مشاهده کنید.

چگونه به صفحه اول گوگل بیاید

مهمترین عامل برای اینکه وبسایت شما در صفحه اول گوگل قرار بگیرد این است که نام دامنه کوتاه باشد.

راحت به زبان بیاید، و با محتوای وبسایت شما مطابقت داشته باشد .

استفاده از کلمات کلیدی اصلی به موتورهای جستجو و استفاده کنندگان کمک می کند تا از طریق آنها بتوانند علاوه بر درک

مفهوم صفحه، راحت حفظش کنند.

در حال حاضر موتورهای جستجو مطالب وبسایت شما را در هنگام جستجوی کاربر مورد کاوش قرار میدهند میدهند.

سپس دامنه را هم مورد بررسی قرار می دهند. استفاده از کلمات کلیدی لاتین آن، به بهتر شدن وبسایت شما و قرار گیری

درصفحه اول گوگل کمک میکند.

همین امر به وبسایت  شما کمک می کند تا بیننده زیادی بدست آورید.

اولین چیزی که گوگل مورد کاوش قرار میدهد،

نام دامنه است که اگر اسپم باشد آن را نشان ندهد.

منتشر کردن محتوا

قبل از منتشر کردن محتوا بسیار خوب است که سایتهای دیگر را هم مورد بررسی قرار دهیم.

از مطالب آن ها درس بگیریم و به کار ببریم در این صورت به ما کمک میشود تا محتوای مناسبی تولید کنیم.

اگر بخواهیم در صفحه اول گوگل قرار بگیریم. همه ی ما مطلع هستیم که هیچگونه سایتی در دنیا نیست که بتواند تمام انتطارات یک کاربر

را برآورده کند.

پس برای اینکه بتوانیم به صفحه اول گوگل برویم همیشه مطالبی هستند که کاربران نیازمند آنها هستند.

به بازدید ادامه میدهند شما با توجه به بازدید سایت خودتان مطالب مورد توجه کاربران  را متوجه میشوید و بیشتر بر اون مطلب مانور میدهید.

کاربران اگر از محتوایی رضایت داشته باشند آن مطلب را به اشتراک میگذارند.

همین عمل برای شما نزد گوگل عالی هست و

شمارا محبوب تر میکند تا جایی که به صفحه ی اول گوگل سلام میکنید .

نویسنده محتوا باید به پیغام ها توجه داشته باشد.

دیگر کارهایی که باید بدانید که چگونه در صفحه اول گوگل باشیم

گوگل متوجه به این موضوع است که ما ازکدام  سایت لینک گرفته ایم.

و از چه سایتی به ما مراجعه شده است که تاثیر

بسزایی در ورود به صفحه ی اول گوگل دارد.

و اگر وبسایتی که برای گوگل دارای اعتبار زیادی باشد پس شما هم مورد توجه شخص شخیص گوگل قرار خواهید داشت .

توجه داشته باشید که محتوا و مطالب شما با توجه به تخصص شما ساده و روان بیان شود.

خواننده نباید مورد تنش و سردر گمی قرار گیرد چون این کار کاربر را خسته میکند.

این کار همکاری شما با سایتها و افراد دیگر بیشتر می شود و وبسایت شما مورد توجه گوگل قرار میگیرد و به صفحه اول گوگل میروید و به موفقیت میرسید.

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

این تیم توجه بسیاری به مطالب سئو و بهینه سازی دارد  و مطالب بسیار مفیدی را در اختیار شما قرار می دهد .

قالب وبسایت با فتوشاپ، آموزش قسمت سوم طراحی قالب وبسایت

طراحی قالب وبسایت قسمت سوم

در قسمت قبلی طراحی قالب وبسایت تا جای تشکیل باکس ها پیش رفتیم و در این قسمت میخوایم پاین قالب (اسلاید شو، بک گراند ، فوتر) رو طراحی کنیم.

تمام عکس های این قسمت را از اینجا دانلود کنید.
تصویر: ۱

طراحی قالب وبسایت قسمت سوم

مرحله: ۱

در مرحله اول طراحی قالب وبسایت میخواییم اسلاید شو رو درست کنیم.
برای ساخت اسلاید شو باید یک مستطیل رسم کنیم.
برای اینکار از قسمت ابزار، ابزار مستطیل رو انتخاب کنید و یک مستطیل رسم کنید.
تصویر: ۲
حالا یک عکس از منظره بارندگی یا هر عکسی که دوست دارید رو به داخل فتوشاپ بیارید و روی مستطیل قرار بدین.
تصویر: ۳
تصویر: ۴

بعد از اینکه عکس رو روی مستطیل قرار دایدن کلید enter رو بزنید.

حالا روی لایه عکس کلید راست کنید و گزینه ( create clipping mask) رو بزنید تا عکس داخل مستطیل قرار بگیره.

دقت کنید که لایه عکس بالای لایه مستطیل باشه و بعد این کارو انجام بدید.

تصویر: ۵

طراحی قالب وبسایت قسمت سوم

تصویر: ۶

تصویر: ۷
حالا باید عکس قطره های باران رو سیاه و سفید کنیم.

برای اینکار طبق عکس پایین عمل کنید.

تصویر: ۸

حالا یک متن رو روی عکسمون مینویسیم.

برای اینکار از منوی ابزار، ابزار t رو انتخاب کنیید و یک متن به دلخواه بنویسید.

تصویر: ۹

حالا می بینید که متن ما زیاد واضح نیست، حالا باید یک مستطیل دیگه روی همون مستطیل با رنگ مشکی بکشید.

تصویر: ۱۰

طراحی قالب وبسایت قسمت سوم

حالا باید Opacity رو کم کنید تا مستطیل کمرنگ بشه و متن شما واضح بشه.

دقت کنید لایه متن بالای لایه مستطیل جدید باشه.

تصویر: ۱۱

حالا باید چندتا دایره بارای مستطیلمون بکشیم.

تصویر: ۱۲

برای کشیدن دایره، باید از منوی ابزار، ابزار دایره رو انتخاب کنید.

تصویر: ۱۳

حالا یک دایره در قسمت بالا سمت راست مستطیل با رنگ سفید رسم کنید.

تصویر: ۱۴

حالا چندتا کپی از دایره تون بگیرید.

برای اینکار ابزار move tool رو انتخاب کنید و کلید alt رو بگیرید و از دایره یک کپی بگیرید.

تصویر: ۱۵

طراحی قالب وبسایت قسمت سوم

حالا سه تا کپی دیگه به همین صورت بگیرید و کنار همدیگه قرار بدین.

تصویر: ۱۶

مرحله: ۲

در مرحله دوم طراحی قالب وبسایت میخواییم فلش مثلثی ادامه مطلبو زراحی کنیم.

تصویر: ۱۷

برای این کار ما باید یک مربع ۱۰۰ در ۱۰۰ پیکسل در ست کنیم.

از منوی ابزار، ابزار مستطیل رو انتخاب کنید و روی صحفه یک کلید بزنید تا یک پنجره برای اندازه دهی باز بشه و اندازه هارو روی ۱۰۰بزارید.

تصویر: ۱۸

حالا یک مربع برای شما درست شده.

تصویر: ۱۹

حالا باید مربعتونو بچرخونید.

برای اینکار کلید ترکیبی (ctrl+T) رو بزنید و از نوار بالای صحفه درجه رو روی ( ۴۵- ) بزارید.

تصویر: ۲۰

طراحی قالب وبسایت قسمت سوم

حالا ابزار مستطیل رو انتخاب کنید و کلید alt رو نگه دارید و از قسمت بالای مربع تا وسط مربع بکشید تا به شکل مثلث دربیاد.

تصویر: ۲۱

حالا یک رنگ بهش میدیم.

تصویر: ۲۲

حالا باید یک کپی از مثلث بگیرید.

برای کپی گرفتن رو لایه مثلث کلید راست کنید و گزینه ( Duplicate Layer ) رو بزنید تا یک کپی گرفته بشه.

تصویر: ۲۳

حالا از منوی ابزار، ابزار ( Direct Selection tool ) رو انتخاب کنید.

تصویر: ۲۴

حالا باید گوشه سمت راست مثلث رو سلکت کنید و از نقطه فعال شده بگیرید و به سمت چپ بکشید.

تصویر: ۲۵

طراحی قالب وبسایت قسمت سوم

تصویر: ۲۶

حالا باید یک رنگ بهش بدیم.

برای این کار از منوی ابزار، ابزار move tool رو انتخاب کنید و رویه قسمت مشخص شده در عکس پایین دابل کلید کنید.

دقت کنید که روی لایه کپی شده اینکار انجام بدید.

تصویر: ۲۷

حالا از منوی ابزار، ابزارt رو انتخاب کنید و یک متن بالای مثلث بنویسید، برای مثال ادامه مطلب.

تصویر: ۲۸

مرحله: ۳

در مرحله سوم طراحی قالب وبسایت میخوایم قسمت بک گراند رو طراحی کنیم.

تصویر: ۲۹

برای طراحی قسمت بک گراند اول باید یک مستطیل درست کنیم.

برای اینکار از قمست منوی ابزار، ابزار مستطیل رو انتخاب میکنیمو یک مستطیل با رنگ بنفش یا هر رنگی که دوست دارید

درست کنید.

تصویر: ۳۰

طراحی قالب وبسایت قسمت سوم

حالا یک کپی ازش میگیریم.

برای گرفتن کپی روی لایه مستطیل کلید راست کنید و گزینه ( Duplicate Layer ) رو بزنید تا یک کپی از مستطیل گرفته بشه.

تصویر: ۳۱

حالا از منوی ابزار، ابزار ( Direct Selection tool ) رو انتخاب کنید و دوتا گوشه سمت راست مستطیل رو سلکت کنید و به

سمت چپ بکشید.

تصویر: ۳۲

تصویر: ۳۳

تصویر: ۳۴

حالا گوشه سمت راست بالایی رو سلکت کنید و به سمت چپ بکشید.

تصویر: ۳۵

طراحی قالب وبسایت قسمت سوم

حالا طبق تصویر پایین مود رنگشرو عوض کنید.

تصویر: ۳۶

میبینید که رنگ قسمتی که درست کردید عوض شد.

حالا ابزار move tool رو انتخاب کنید و کلید alt رو بگیر و یک کپی از قسمتی که درست کردین بگیرید.

تصویر: ۳۷

حالا کلید ترکیبی ctrl+t رو بزنید و روی همون شکل کلید راست کنید و گزینه ( Flip Horizontal) رو بزنید تا شکلتون به صورت

افقی برعکس بشه.

تصویر: ۳۸

حالا دوباره روی همون شکل کلید راست کنید و گزینه ( Flip Vertical ) رو بزنید تا بصورت عمودی برعکس بشه.

تصویر: ۳۹

حالا به همین شکل کپی بگیرید و برعکس کنید. دیگه بستگی به سلیقه خودتون داره.

حالا متنی که اول کنار لوگو نوشتید رو کپی کنید و بیارید روی بک گراند.

تصویر: ۴۰

طراحی قالب وبسایت قسمت سوم

مرحله:۴

در مرحله چهارم طراحی قالب وبسایت میخواییم فوتر پاین صحفه رو درست کنیم.

تصویر: ۴۱

برای درست کردن فوتر از منوی ابزار، ابزار مستطیل رو انتخاب کنید و یک مستطیل با رنگ مشکی رسم کنید.

تصویر: ۴۲

حالاابزار t رو انتخاب کنید و یک متن بنویسید.

تصویر: ۴۳

تبریک میگم شما الان با فتوشاپ یک قالب وبسایت ساخته اید.

تصویر: ۴۴

طراحی قالب وبسایت قسمت سوم

این هدیه ای بود از طرف امیر سهرابی شرق عضو تحریریه گروه فناورانه فردا طرح فعال در زمینه طراحی وبسایت در تهران و مشهد.

موفق و پیروز باشید.

قالب وب سایت با فتوشاپ.آموزش تصویری(قسمت دوم) طراحی قالب

آموزش تصویری طراحی قالب وب سایت با فتوشاپ.

با سلام خدمت تمامی مخاطبین شرکت فرداطرح امروز با ادامه آموزش طراحی قالب وب سایت در خدمت شما هستیم.

در قسمت قبلی تا مرحله ۹ پیش رفتیم که خط های موربی برای هدر ایجاد کردیم.

در این قسمت به ادامه این مراحل میپردازیم.

عکس های این قسمت از آموزش را از لینک زیر دانلود کنید.

لینک دانلود

مرحله: ۱۰

در این قسمت میخواهیم بر روی هدر قالب وب سایت خود تکست یا متن بنویسیم .

تصویر: ۱

طراحی قالب وب سایت در فتوشاپ قسمت دوم

برای این کار از قسمت ابزار، ابزار(T) را انتخاب کنید و بر روی هدر صحفه یک متن با رنگ مشکی یا به دلخواه بنویسید.

برای مثال ما (fardatarh.ir) را مینویسیم.

تصویر: ۲

شما در قالب اصلی می بینید حروف ofogh.fardatarh  از همدیگر فاصله دارند.

تصویر: ۳

برای این کار باید روی لایه دابل کلید کنید تا متن شما انتخاب شود و طبق تصویر پایین انجام دهید.

تصویر: ۴

حالا ابزار (move tool) را انتخاب کنین و متنتون را بگیرید و به داخل مستطیل حدایت کنید.

تصویر: ۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

مرحله: ۱۱

در مرحله یازدهم طراحی قالب وب سایت میخواهیم لوگوی به شکل ماه را طراحی کنیم.

تصویر: ۶

برای ساخت لوگو باید یک دایره بکشید.

از قسمت ابزار، ابزار (Ellipse Tool) انتخاب کنید.

تصویر: ۷

حالا یک دایره روی هدر صحفه کنار متنتون بکشید، کلید (shift) رو هم نگه دارید تا دایره صاف کشیده بشه.

تصویر: ۸

خوب حالا همون طور که نقطه های دور دایره که کشیدید فعال هستند. کلید alt رو بگیرید و یکه دایره وسط دایره قبلی بکشید تا بصورت حلال ماه در بیاید.

تصویر: ۹

بعد از اینکه دایره را کشیدید باید یک گردنیت مثل دکمه نخست بهش بدیم.

برای اینکار روی لایه دکمه صحفه نخست کلید راست کنید و گزینه (Copy laer Styles) را بزنید.

تصویر: ۱۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

و روی لایه هلال ماه کلید راست کنید و گزینه( Paste leyer Style) رو بزنید تا هلال ماه مثل دکمه نخست رنگ بگیره.

تصویر: ۱۱

حالا ابزار Move tool  را انتخاب کنید و با گرفتن کلید alt یک کپی از هلال ماه بگیرید.

تصویر: ۱۲

بعد از اینکه کپی گرفتید کلید ترکیبی Ctrl+T رو بزنید و کوچیک ترش کنید تا داخل هلال بزرگ تر جای بگیره.

برای اینکه طول و عرض هلال به طور مساوی کوچک بشن کلید shift  راهم نگه دارید و از گوشه هاش بگیرید و مثل تصویر پایین درست کنید.

تصویر: ۱۳

خوب حالا دوباره با ابزار دایره ، یک دایره کوچک میکشیم و مثل کار قبل رنگ هلال ماه را به دایره خودمان میدهیم.

تصویر: ۱۴

مرحله: ۱۲

در مرحله دوازدهم طراحی قالب وب سایت میخوایم قسمت باکس جستجو و آیکون هایی رو ایجاد کنیم.

تصویر: ۱۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

برای این کار از قسمت ابزار، ابزار مستطیل را انتخاب میکنیم و یک رنگ نسبتا تیره بهش اختصاص میدیم.

تصویر: ۱۶

الان لازمه که لایه  مستطیل را به پایین لایه ها ببرید.

برای بردن لایه به پایین همه لایه ها کلید ترکیبی (shift+[) و برای بردن به بالای همه لایه ها کلید ترکیبی (shift+]).

اگه بخواین لایه انتخابیتونو به پاین یک لایه دیگه ببرید ([) و اگه بخواین یکی به بالا حرکت کنه (]) را بزنید.حالا باید لایه مستطیلی که تازه ایجاد کردید به پاین لایه ها و بالای بگ گراند قرار بدید، طبق عکس پاینن.

تصویر: ۱۷

حالا میخواهیم یک سایه ملایم به بالای مستطیلمون بدیم مثل این عکسی که میبینین.

تصویر: ۱۸

برای ایجاد این سایه از منوی ابزار،ابزار دایره انتخاب کنید و مثل تصویر پاین بالای مستطیلی که رسم کردید با رنگ مشکی ایجاد کنید.

تصویر: ۱۹

حالا از قسمت Properties ماسک را انتخاب میکنیم و (Feather) را روی ۷٫۹ قرار بدید.

تصویر: ۲۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

مرحله: ۱۳

در مرحله سیزدهم طراحی قالب وب سایت ،یک مستطیل وسط مستطیل قبلی میکشیم  تا بتونیم باکس جستجو را درآ قرار بدهیم.

از منوی ابزار ابزار مستطیل را انتخاب کنید و مطابق عکس زیر یک مستطیل با رنگ طوسی روشن رسم  کنید.

تصویر: ۲۱

وقتی مستیطیل را رسم کردیم باید یک مستطیل گوشه گرد دیگه وسط اون مستطیل ایجاد کنیم .

برای اینکار ازمنوی ابزار،ابزار مستطیل گوشه گرد را انتخاب کنید و یک مستطییل رسم کنید.

تصویر: ۲۲

تصویر: ۲۳

حالا لازم داریم که یک رنگ مثل کاری که برای دکمه نخست انجام دادیم انجام بدیم.

برای اینکار روی همون لایه کلید راست کنید و(blending Options) را انتخاب کنید و از پنجره باز شده (Gradient Overlay) انتخاب کند و یک تیف رنگی طوسی مثل کاری که با دکمه نخست کردیم انجام بدهید.

تصویر: ۲۴

تصویر: ۲۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

تصویر: ۲۶

تصویر: ۲۷

مرحله: ۱۴

در مرحله چهاردم طراحی قالب وب سایت میخواییم یک (Stroke) برای دور مستطیلمون ایجاد کنیم.

برای این کار در پنجره (Blending Options)  روی گزینه (stroke) را فعال کنید.

Size خط را روی ۱ وopacity را روی ۱۰۰ قرار بدید و رنگش هم سفید بزارید تا دیده بشه

تصویر: ۲۸

مرحله: ۱۵

در مرحله پانزدهم طراحی قالب وب سایت ما باید دکمه جستجو را ایجاد کنیم.

برای این کار از لایه دکمه نخست یک کپی میگیریم.

برای کپی گرفتن از منوی ابزار، ابزار move tool را انتخاب کنید و با گرفتن کلید alt   یک کپی ایجاد کنید و به داخل مستطیلی که برای باکس جستجو ایجاد کردیم هدایت کنین.

تصویر: ۲۹

حالا از منوی ابزار، ابزار نوشتن را انتخاب کنید و یک متن داخل دکمه جستجو بنویسید.

تصویر: ۳۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

و یک متن کنار دکمه بنویسید برای مثال جستجو در سایت….

تصویر: ۳۱

مرحله: ۱۶

در مرحله شانزدهم طراحی قالب وب سایت میخوایم آیکون هایی رو به پروژه اصلی بیاوریم.

برای این کار شما باید آیکون هایی را از وب سایت های مختلف دانلود کنید و در فتوشاپ خودتون باز کنید.

بعداز اینکه آیکون هارو به داخل فتوشاپ آوردین ، اگر فرمتpng بود که هیچ راحت با ابزار move tool بگیریدش و به داخل پروژه اصلی بیاورید.

اگر عکس بود باید از منوی ابزار، ابزار  magic wand tool انتخاب کنید وروی آیکونتون کلید کنید.

اگر آیکونتون چند تیکه بود کلید shift را هم نگه دارید تا انتخاب بشوند.

تصویر: ۳۲

حالا ابزار move tool را انتخاب کنید و آیکون مد نظرتون را به داخل پروژه اصلی ببرید.

تصویر: ۳۳

تصویر: ۳۴

حالا برای کوچک کردن آیکون کلید ترکیبی ctrl+T را بزنید و با گرفتن کلید shift اندازه آیکون را کوچیکتر کنید.

تصویر: ۳۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

حالا نیاز دایم که متنی کنار آیکون بنویسیم.

برای این کار از منوی ابزار، ابزار T را انتخاب کنید و متنی کنار آیکون بنویسید.

تصویر: ۳۶

حالا به همین روش آیکون های دیگه ای را به قالب خود اضافه کنید و برای هرکدوم یک متن بنویسید.

تصویر: ۳۷

مرحله: ۱۷

در مرحله هفدهم طراحی قالب وب سایت میخواهیم باکس های پاین قالبو طراحی کنیم.

تصویر: ۳۸

برای طراحی این باکس ها نیاز داریم صحفه پروژه را بزرگتر کنیم.

برای این کار از منوی ابزار، ابزار crop tool را انتخاب میکنیم و از قسمت پایین صحفه میگیریم و قالبمون را بزرگتر میکنیم.

بعد از اینکه به اندازه مناسب رسید کلید enter را بزنید.

تصویر: ۳۹

بعد از اینکه صحفه قالب را بزرگتر کردید نیاز داریم که یک مستطیل رسم کنیم.

از منوی ابزار، ابزار مستطیل را انتخاب کنید و مطابق تصویر پایین یک مستطیل رسم کنید.

تصویر: ۴۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

حالا میخواهیم خط هایی را اطراف مستطیلمون ایجاد کنیم.

تصویر: ۴۱

برای ایجاد این خط ها شما باید لایه مستطیل را انتخاب کنید و از قسمت Properties به مستطیلمون استروک بدید.

تصویر: ۴۲

مرحله: ۱۸

در مرحله هجدهم طراحی قالب وب سایت میخواهیم استیکر این باکسی که ساخته ایم را ایجاد کنیم.

تصویر: ۴۳

برای ایجاد استیکر، از منوی ابزار، ابزار مستطیل را انتخاب کنید و یک مستطیل مطابق تصویر پایین رسم کنید.

تصویر: ۴۴

بعد از اینکه مستطیل را رسم کردید نیاز داریم تا یک کپی از همون مستطیل بگیریم.

برای گرفتن کپی از کلید ترکیبی ctrl+j استفاده کنید.

و بعد از اینکه کپی ایجاد کردید کلید ترکیبی ctrl+t  را بزنید و از پایین مستطیل بگیرید وآن را به سمت بالا کوچیک کنید.

تصویر: ۴۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

حالا برو روی همون مستطیل کپی شده کلید راست کنید و گزینه Perspective را انتخاب کنید و یکی از گوشه های پاین مستطیل کپی شده را بگیرید و به سمت راست یا چپ بکشید.

تصویر: ۴۶

تصویر: ۴۷

حالا رنگشرو تیره تر میکنیم.

و لایه کپی شده رو به زیر لایه مستطیل اصلی میبریم.

تصویر: ۴۸

حالا یک کپی از تمام کاری که در مرحله هفدهم و هجدهم انجام دادیم میگیریم.

برای این کار از قسمت لایه ها با گرفتن کلید ctrl تمام لایه های مرحله هفدهم و هجدهم را انتخاب میکنیم.

تصویر: ۴۹

و حالا با گرفتن کلید alt یک کپی از تمام این لایه ها بگیرید و به سمت راست هدایت کنید.

تصویر: ۵۰

طراحی قالب وب سایت در فتوشاپ قسمت دوم

حالا یک کپی دیگه به همین شکل ایجاد میکنیم.

تصویر: ۵۱

حالا آیکون هایی رو مثل کاری که برای آیکون های بالاتر انجام دادیم انجام میدهیم و این آیکون هارو داخل استیکر ها قرار میدهیم.

تصویر: ۵۲

و حالا متنی داخل این باکس ها مینویسیم.

تصویر: ۵۳

حالا یک دکمه ( ورود به بخش پشتیبانی ) ایجاد میکنیم.

برای این کار از لایه دکمه جستجو با گرفتن کلید alt یک کپی بگیرید و داخل باکس قرار بدید ، و روی دکمه ورود به بخش پشتیبانی را بنویسید.

تصویر: ۵۴

تصویر: ۵۵

طراحی قالب وب سایت در فتوشاپ قسمت دوم

برای اون دو باکس دیگه هم همین کار ار انجام بدهیدو

ادامه دارد….

 

طراحی قالب وب سایت با فتوشاپ.آموزش تصویری(قسمت اول)

آموزش تصویری طراحی قالب وب سایت با فتوشاپ.

با سلام خدمت تمام مخاطین وب سایت فردا طرح امروز میخوایم طراحی قالب وب سایت با فتوشاپ رو بهتون آموزش بدیم.

این قالب وب سایتی که میخوایم  باهم طراحی کنیم.این قالب بخصوص برای وردپرس طراحی شده است.

اگر مایلید در رابطه با وردپرس و یا دیگر cms های دیگر مانند جوملا بدانید مطلب لینک شده را مطالعه بفرمایید.

تفاوت وردپرس و جوملا

 

 

قبل از شروع کار لطفا این فایل را دانلود کنید و عکس هارو ببینید

لینک دانلود

 

طراحی قالب وب سایت

مرحله اول طراحی قالب وب سایت :

در مرحله اول شما فتوشاپ خودتونو باز میکنید و یک صحفه جدید ایجاد میکنید.

تصویر :۱

اندازه صحفه رو روی ۱۰۲۴ در ۷۶۸ پیکسل با رزولیشن ۷۲ و (color mode) روهم روی (RGB color) بزارید و بعد روی (Create) کلید کنید.

مثل عکس پاین.

 

تصویر:۲

 

برای شروع کار ما به یک بک گراند (Backgraond) داریم از قسمت پاین سمت راست روی (create new) کلید راست میکنیم و گزینه(solid color) رو میزنیم ( طبق عکس پایین ).

تصویر:۳

خوب در پنجره باز شده شما میتونید رنگ دلخواهتونو انتخاب کنید و یا اینکه کد رنگ رو در پاینن صحفه بنویسید.

کد رنگ (e2e2e2) رو وارد میکنیم و ok رو میزنیم.

تصویر:۴

مرحله دوم طراحی قالب وب سایت :

در این مرحله ما باید یک نوار در بالای صحفه بکشیم تا بتونیم دکمه هارو روش قرار بدیم.

برای کشیدن یک نوار باید از قسمت ابزار ، ابزار (rectangle tool) رو انتخاب میکنیم .

تصویر:۵

طراحی قالب وب سایت

و یک مستطیل در بالای صحفه مثل عکس پایین میکشیم.

تصویر:۶

تصویر:۷

خوب در سمت راست پایین صحفه روی لایه ها دوبار کلید چپ میکنید (دابل کلید) و یک رنگ روشن به نوار بدید.

تصویر:۸

مرحله:۳

در مرحله سوم ( طراحی قالب وب سایت ) شما باید به منوی (Blending options) برید.

برای این کار شما باید در قسمت لایه ها رو همون لایه کلید راست کنید و گزینه (Blending options) رو انتخاب کنید یا رو همون قسمت که کلید راست کردید دوبار کلید چپ بزنید(دابل کلید) و به منوی (Blending options) میرید مثل عکس پایین.

تصویر:۹

در پنجره باز شده روی گزینه (Gradient Overlay) بزنید و تیک (Reverse) رو فعال کنید.

(Reverse) جای تیرگی و روشنی عوض میکنه و ما میخوایم قسمت تیره تر رو بالا باشه پس (Reverse) رو فعال میکنیم.

و روی قسمت رنگی (Gradient) میزنیم و یک پنجره جدید برای ما باز میشه.

تصویر:۱۰

طراحی قالب وب سایت

در پنجره باز شده روی (color stop) دوبار کلید چپ کنید(دابل کلید) و در پنجره باز شده یک رنگ روشن بهش میدیم  و برای (color stop) سمت راستمشم همین کارو انجام میدیم.

تصویر:۱۱

تصویر:۱۲

تصویر:۱۳

مرحله ۴:

شما در مرحله چهاروم ( طراحی قالب وب سایت ) باید دوتا خط سفید رو بالا و پایین نوار بکشید.

برای کشیدن خط ها از قسمت ابزار، ابزار(line tool) رو انتخاب میکنیم و بالای نوار یه خط سفید میکشیم.

برای صاف کشیدن خط کلید (Shift) روی کیبورد رو نگه دارید تا خط صاف کشیده بشه.

تصویر:۱۴

مثل عکس پاین خط به نوار چسبیده باشه.

تصویر:۱۵

طراحی قالب وب سایت

خوب حالا باید از همون نوار یک کپی بگیرید.

برای کپی گرفتن ابزار(move tool) رو انتخاب میکنیم و کلید (Alt) بروی کیبورد رو نگه میداریم و خط رو به سمت پایین میکشیم. وقتی به سمت پایین کشیدید باید یک کپی گرفته شده باشه و اونو به پاین نوار بچسبونید.

تصویر:۱۶

مرحله ۵:

در مرحله پنجم طراحی قالب وی سایت ،میخوایم حالا میخوایم دکمه های نوارمونو رسم کنیم ( دکمه های مثل درباره ماف تماس باما،صحفه نخست و…).

برای رسم دکمه ما از منوی ابزار، ابزار( Rounded rectangle tool) رو انتخاب میکنیم و یک مستطیل با گوشه های گرد شده میکشیم و از قسمت (Propertirs) قسمت (۲) مشخص شده در عکس رای روی عدد (۶)  بزارید.

تصویر:۱۷

تصویر:۱۸

خوب حالا میخوایم یک رنگ به دکمه ای که ساختیم بدیم.

برای رنگ دادن روی همون لایه کلید راست کنید و از منوی (Blending options) ،گزینه (Gradient Overlay) رو میزنیم ویک رنگ بهش میدیم.

مثل کاری که برای نوار انجام دادیم انجام میدیم.

(یکم سلیقگی کنید و یه تیف رنگی خوشگل درست کنین).

تصویر:۱۹

تصویر:۲۰طراحی قالب وب سایت

تصویر:۲۱

مرحله۶:

در مرحله ششم ( طراحی قالب وب سایت ) میخواییم یک سایه به دکمه ای که طراحی کردیم بدیم.

برای درست کردن سایه رو همون لایه کلید راست میکنیم و (Blending options) میزنیم و در پنجره ای که باز میشه (Drop Shadow) رو انتخاب میکنیم.

Opacity روی ۷۵،درجه Angle روی ۹۰٫ Distance روی ۰٫ Size روی ۲٫ و بعد اوکی رو بزنید و می بینید که یک سایه زیر دکمه تون درست شد.

تصویر:۲۳

تصویر:۲۴

 

حالا میخوایم یک نوشته داخل دکممون بنویسیم برای مثال صحفه نخست.

برای نوشتن متن از منوی ابزار،ابزار (T) رو انتخاب میکنیم و روی دکمه با رنگسفید  صحفه نخست رو مینویسیم.

تصویر:۲۵

طراحی قالب وب سایت

برای انتخاب رنگ و اندازه و فونت نوششتتون میتونید روی آیکون هایی که وقت نوشتن ظاهر میشه انتخاب کنین.

تصویر:۲۶

حالا اینکه متن صفحه نخست رو وسط دکمه بزاریم اول باید ابزار(move tool) رو انتخاب کنیم.

حالا از قسمت لایه ها، لایه متن صفحه نخست و لایه دکمرو انتخاب میکنیم.

برای انتخاب دوتا لایه باهم دیگه باید کلید (Ctrl) روی کیبورد رو نگه داریم و بعد روی دوتا لایه کلید چپ کنیم.

حالا برای وسط چین کردن طبق تصویر روی اون آیکون ها کلید کنید و هم از عمودی و افقی بیارینش وسط .

تصویر:۲۷

مرحله۷:

در مرحله هفتم ( طراحی قالب وب سایت ) میخوایم یک دکمه دیگه درست کنیم.

برای ساخت دکمه دیگه لازم نیست تمام این مراحلو برین فقط یه کپی از دکمتون بگیرین.

برای کپی گرفتن ابزار (move tool) رو انتخاب کنید، از قسمت لایه ها، لایه متن و لایه دکمرو انتخاب کنید و از روی شکل با گرفتن کلید (alt) یک کپی بگیرید و به سمت چپش بکشید.

اگه میخواین هم تراز کنید همزمان که کلید (alt) رو گرفتید و دارید کپی دکمرو به سمت چپ میبرین کلید(Shift) رو هم نگه دارید تا با دکمه اولی تو یک راستا باشن.

تصویر:۲۸

خوب حالا میخوایم رنگ دکمرو عوض کنیم.

برای عوض کردن رنگ دکمه  روی همون لایه کلید راست کنید و از منوی (Blending options) ،گزینه (Gradient Overlay) رو میزنیم ویک رنگ بهش میدیم.

دقیقا مثل کاری که با دکمه قبلی انجام دادیم فقط رنگشو عوض میکنیم.

تصویر:۲۹

تصویر:۳۰

طراحی قالب وب سایت

تصویر:۳۱

خوب رنگ متنمونم تیره تر میکنیم مثل عکس پاین.

تصویر:۳۲

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

شما با این کار دکمه های فهرست وب سایتو طراحی میکنین و متنشو میتونین عوض کنین و درباره ما یا تماس با ما یا هرچیزی که بخواین میتونین بزارین.

مرحله ۸:

در مرحله هشتم طراحی قالب وب سایت میخوایم هدر قالبو درست کنیم و خط های کجی که تو قالب اصلی می بینین رو ایجاد کنیم.

تصویر:۳۳

خوب برای درست کردن هدر صحفه یک مستطیل میکشیم.

برای درست کردن مستطیل باید از قسمت ابزار ، ابزار (rectangle tool) رو انتخاب کنیم و یک مستطیل بکشیم.

شبیح عکس پاینی.

تصویر:۳۴

حالا رنگشو یکم تیره تر میکنیم یا کد (efefef) رو بزنید.

برای تغییر رنگم روی قسمت مشخس شده دابل کلید کنید.

تصویر:۳۵

 

طراحی قالب وب سایتحالا لازمه مستطیلمونو سلکت کنیم.

با گرفتن کلید (Ctrl) و کلید زدن رو قسمت مشخص شده در عکس پایین کل مستطیل مورد نظرتون سلکت میکنه.

تصویر:۳۶

مرحله ۹:

در مرحله نهم طراحی قالب وب سایت باید یک لایه جدید درست کنیم.

برای ساختن لایه جدید قسمت سمت راست پاین صحفه میتونید لایه جدیدی درست کنید یا کلید ترکیبی( ctrl+shift+alt+n ) رو بزنید و یک لایه جدید درست کنید.

تصویر:۳۷

خوب از قسمت بالای نوار منوی (filter) گزینه(render) و گزینه(clouds) رو میزنیم و یک ابر سیاه و سفید درست میکنیم و بعد با زدن (ctrl+D) سلکشنی که درست کردیم حذف میشه.

تصویر:۳۸

تصویر:۳۹

خوب حالا لازمه که ابر سیاه سفیدمونو به (Mosaic) تبدیل کنیم.

برای این کار بازهم همون لایه ابر سیاه و سفید رو انتخاب کنین و از نوار بالا، منوی  (filter)گزینه (pixelate) و گزینه (Mosaic) انتخاب میکنیم.

از پنجره باز شده (Cell Size) روی ۶۵ بزارید و اوکی بزنید.

تصویر:۴۰

طراحی قالب وب سایت

تصویر:۴۱

تصویر:۴۲

خوب حالا Mosaic رو میخوایم کجش کنیم.

بررای کج کردن یا مورب کردن Mosaic روی همون لایه، از نوار بالای صحفه منوی (filter) گزینه(Blur) و گزینه(Motion Blur) رو میزنیم.

از پنجره باز شده (Angle) روی ۹۰ و (Distance) روی ۲۴۶ میزاریم و اوکی رو میزنیم.

تصویر:۴۳

تصویر:۴۴

حالا میخوایم که این ستون های عمودی که درست کردیم رو به داخل اون محدوده مستطیلمون ببریم.

برای این کار روی همون لایه کلیک راست کنید و گزینه( Create Clipping Mask) رو میزنیم و میبینید که ستون های عمودی ما به داخل مستطیل رفتند.

تصویر:۴۵

طراحی قالب وب سایت

تصویر:۴۶

حالا لازمه که کجشون کنیم.

برای این کار همون لایه رو انتخاب کنین و (Ctrl+T) رو بزنید و روی مستطیل کلید راست کنید و گزینه (Skew) رو بزنید.

حالا از اون نقطه هایی که در عکس میبینید بگیرید و به سمت راست بکشید.

تصویر:۴۷

تصویر:۴۸

برای اینکه اون گوشه که خالی شده رو پر کنید دوباره روی همون مستطیل کلید راست کنید و گزینه (Free Transform) رو بزنید.

تصویر:۴۹

حالا نقطه مشخص شده داخل تصویر رو بگیرید و به سمت چپ بکشید

تصویر:۵۰

طراحی قالب وب سایت

ادامه دارد….