نوشته‌ها

چگونه در قالب وردپرس نوشته اضافه کنیم ؟

چگونه در وردپرس نوشته اضافه کنیم ؟

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

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

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

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

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

خب حالا باید برید سراغ localhost سیستم خود .

مرورگر سیستم و بازکنید و در قسمت نوار بالا localhost/test  جستجو کنید .

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

(دقت کنید که چون نام پایگاه داده ای که تعریف کرده ایم  test  هست به همین دلیل به این نام جستجو کردیم شما نام پایگاه داده ی خود را جستجو کنید )

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

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

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

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

 

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

شما با کلیک راست کردن بر روی نام پایگاه دادتون ، یک کادر مشاهده میکنید. با انتخاب گزینه open link in new tab  یک صفحه ی جدید در مرورگرتون باز میشه .

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

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

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

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

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

در این صفحه چند قسمت وجود داره.

بخش های قالب وردپرس

 

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

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

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

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

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

در قسمت بعدی گزینه ای به نام افزودن پرونده چندرسانه ای  میبینید که با کلیک کردن میتونین تصاویر و یا ویدئو به متن خود اضافه کنید .

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

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

 

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

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

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

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

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

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

نکات مهم

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

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

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

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

۵-بر روی افزودن دسته ی تازه کلیک کرده و طبق موضوع متن خود دسته اضافه کنید.

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

۷-حدود ۴ الی ۵ برچسب کافیه و کارتونو راه میندازه

 

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

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

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

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

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

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

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

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

 

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

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

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

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

دانلود آن که تمام شد باید نرم افزار زمپ (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

 

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

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

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

 

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

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

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

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

موفق باشید.

وردپرس چیست

وردپرس چیست ؟

و هر انچه درمورد وردپرس باید بدانیم.

 

 

با بیانی ساده تر :

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

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

(فضای اینترنتی همان قسمتی است که سایتتان و جزییاتش روی آن  گذاشته میشود و اجرا میشود)

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

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

. با بیانی ماهرانه تر:

به صورت کامل  وردپرس یک نرم افزار زیر نظر وب ، و متن باز (open source) است  که در گروه  سیستم های مدیریت محتوا یا همان CMS ها که مخفف

(Content Management System) می باشند، قرار میگیرد.

چون   نرم افزاری بدون هزینه است،

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

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

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

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

وردپرس

وردپرس و سئو :

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

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

هیچوقت فراموش نکنید که توجه به موتورهای جستجو یابهینه ساز سایت برای موتورهای جستجو(SEO  =  Search Engine Optimization) بسیار مهم  است

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

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

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

 

پوسته ها ی وردپرس :

پوسته ی وردپرس، یا به معنی  دیگر بدنه وردپرس ویا همان تم ها، طرح اصلی سایتتان است.

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

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

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

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

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

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

ورد پرس یا جوملا:

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

تا نرم افزار مورد علاقه خود را به نام نرم افزار مدیریت محتوای بهتر و کار امد تر، عرضه کنند

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

و همه ی  این ها در صورتی است که مطرح کردن اینمدل مبحث ها از اساس ،  غلط و اشکالدار است.

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

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

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

چرا ورد پرس؟

همان طور که گفتیم  وردپرس یک نرم افزار مدیریت محتوا است  براساس php و mysql  که شما را قادر میسازد

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

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

۱  مدیریت محتوا

۲ وبلاگ نویسی

 

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

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

 

 

وردپرس مثل  API پهناور خود، یک برنامه  فرم سازی قدرتمند دارد.

هر شخص آشنا با زبان PHP می تواند خصلت  های نمایان سایت و یا حتی شیوه ی کارکرد سیستم وردپرس را عوض کند  و آن را مطابق با احتیاج خود، برنامه ریزی نماید.

 

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

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

سازگاری با موتورهای جست و جو:

 

در کنگره سانفرانسیسکو، مت کاتز از کارمندان google  خبر داد  که وردپرس مفید ترین  پلت فرم سایت نویسی است

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

بعضی از  سایت های قابل ساخت با وردپرس:

وبلاگ های خصوصی

کانال های وبلاگ نویسی

کانال های اجتماعی

دانشگاه ها و مدارس

سایت های تجاری

 

منعطف بودن  این نرم افزار :

وردپرس، یکی از انعطاف پذیر ترین نرم افزار های مدیریت محتوای دنیا است

که اشخاص با کمترین شناخت با کد، میتوانند آن را برای استفاده کنندگان مورد پسند خودشان تغییر کنند.

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

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

 

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

 

انتخاب بهترین ترین قالب برای خود :

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

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

با دقت به متنوع بودن قالب های حاضر در بازار،

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

وردپرس چیست

 

قالب مجانی یا قالب ماهرانه :

یکی از اصلی ترین دلیل های بهره  از قالب حرفه ای،

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

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

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

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

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

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

با دقت به نکته هایی که گفته  شد برای مشخص کردن یک قالب حرفه ای به نکته های زیر  دقت کنید:

۱گرافیک زیبا، جذاب و جدید:

دقت  کنید که استفاده کنندگان وب سایت شما به آن عادت می کنند.

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

چند نکته برای طراحی وب سایت ، که توسط تمام طراحان ماهر استفاده میشود، عبارت است از:

  • ترکیب رنگ متناسب
  • تایبوگرافی مفید
  • چیدمان مناسب و منظم
  • عکس های دلنشین

در نظر گرفتن این مورد ها، باعث ایجاد تناسب در وب سایت شما خواهد شد که بیننده را جذب می کند.

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

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

اضافه براین باید از به کار بردن تایپوگرافی مفید در طرح خود، مطمئن شوید.

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

مثلاً اگر در وب سایت خود، بخشی برای عرضه ی ی نمونه کار ها دارید،

حتماً از قسمتی که در دموی طرح برای این مبحث در نظر گرفته شده، بیننده کنید.

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

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

۲-  قالب و افزونه ها چیست؟

تفاوت مهم و اصلی بین قالب ها و افزونه ها این است که :

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

افزونه ها ، قسمت های عملیاتی را انجام می دهند.

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

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

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

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

که این موضوع جابجا کردن  قالب را دشوار و زمان بر می کند.

جدا از این ها، قالب های  وجود دارند که مثل یک افزونه کار می کنند.

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

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

زیرا که امکان دارد قالب های دیگر، عملی  هماهنگ با قالب قبلیتان را نداشته باشند.

۳-دارای امنیت خوب و کارایی بالا باشد

اکثر استفاده کنندگان تازه کار ، در زمان خریداری کردن یک قالب ماهرانه و با کیفیت، دقت زیادی به سرعت قالب و کدنویسی مناسب با خواسته خود ندارند.

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

اضافه  کردن بیش از اندازه ، امکانات و ویژگی هاست که می تواند

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

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

پس چگونه متوجه کیفیت قالب خوب بشویم؟

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

دوم اینکه: قسمت نظرات را حتما بخوانید.

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

۴ – با اهداف شما سازگار باشد

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

 

پلاگین =  افزونه

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

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

چون هزاران افزونه دارد وکه می توانید با یه سرچ افزونه که می خواید رو نصب کنید

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

برای هر چیزی که بخواهید افزونه ایی وجود دارد تنها کافی است آن را نصب کنید .

افزونه ها  :

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

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

نکاتی برای نصب پلاگین:

  1. بعضی  کیفیت  خوبی دارند و بغضی  کیفیت  مناسب  ندارند .
  2. آخرین به روز رسانی آن را بررسی کنید.
  3. کاربران دیگر چه امتیازی به آن داده اند .

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

 

 

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

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

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

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

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

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

لینک دانلود

مرحله: ۱۰

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

تصویر: ۱

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

برای این کار از قسمت ابزار، ابزار(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) رو بزنید.

تصویر:۴۹

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

تصویر:۵۰

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

ادامه دارد….