نوشته‌ها

آیتم های آزار دهنده در طراحی سایت چیست؟ (آیتم های آزار دهنده را بشناسید)

آیتم های آزار دهنده در طراحی سایت

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

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

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

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

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

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

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

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

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

طراحی سایت آزار دهنده در مورد همین موضوع بحث میکند.آیتم های آزار دهنده

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

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

مثلا داشتن یک هدر جذاب و شکیل برای صحفه های سایت بد نیست ولی لازمه با استفاده کردن چنین چیزی ذهن مخاطب را پریشون کنیم؟

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

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

آیا طراحی وب سایت شما آزاردهنده است؟

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

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

آیتم های آزار دهنده

۱-موزیک زمینه:

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

۲-فونت های بزرگ:

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

۳-فونت های کوچیک:

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

۴-پیام های تمام صفحه:

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

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

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

۵-صفحه های پاپ آپ:

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

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

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

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

وب سایت املاک | طراحی وب سایت املاک در مشهد | ویژگی های طراحی سایت املاک

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

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

وب سایت املاک

نشان دادن محدوده ی املاک شما در نقشه:

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

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

دسته بندی ملک ها بر طبق قسمت های مختلف:

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

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

معرفی املاک برای فروش ویژه ،فوری:

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

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

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

معرفی املاک جدید:

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

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

داشتن چند عکس برای هر ملک :

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

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

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

استعلام کد رهگیری:

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

با برسی این سیستم و طراحی روی وب سایت شما  جستجوی کد رهگیری و ثبت آن را میتونید انجام بدهید.

البته باید توجه داشته باشید که  اول باید مجوز های لازم و دسترسی های لازم را داشته باشید

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

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

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

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

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

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

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

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

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

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

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

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

معرفی شرکت های ساختمانی:

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

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

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

شما در ازاء گذاشتن تبلیغات شرکت های ساختمانی هزینه ای دریافت میکنید.

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

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

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

ثبت ملک:

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

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

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

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

خدمات ساختمانی:

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

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

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

ملک های خارج از ایران:

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

این کار در عمل باعث بیشتر شدن کسب درآمد شما میشود،

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

طراحی وب سایت خود را به شرکت فردا طرح بسپارید

قیمت طراحی سایت

بازاریابی تولید محتوا

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

چگونه برای سایت بک لینک رایگان بسازم

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

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

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

(دقت کنید که صحفه های اینترنتی پیدا میکنم نه وب سایت).

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

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

و به احتمال خیلی زیاد اینو هم میدنین که موقعیت های زیادی برای ثبت کردن بک لینک تو داخل اینترنت دارین  که یکی از این مکان هارو میشه فروم ها یا همون تارلارگفتگو، وبسایت های مختلف، وبلاگ، شبکه های اجتماعی مثل توییتر و فیسبوک و گوگل پلاس و… و هم میتونین از کوتاه کننده لینک مثل کوتاه کننده لینکgoo.gl که مال خود شرکت گوگله استفاده کنید و اینکار روی سئوی وب سایت تاثیر خوبی میزاره و گوگل خوشش میاد.

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

خوب حالا میخوایم بگیم که چجوری وبسایتی مربوط به موضوع خودمون پیدا کنیم و بک لینک مون رو ثبت کنیم؟

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

فرض بر این میزاریم که کلمه کلیدی (keyword) من اینه : وردپرس

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

در اول کار برای بک لینک درست کردن باید گوگل را باز کنید.

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

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

طریقه ثبت بک لینک داخل فروم

Site:.com inturl:forum intitle: ” وردپرس ”

 به جستجوی متن بالا (Search Query) میگن.

ما با وارد کردن این متن به از گوگل درخواست میکنیم که تمام وبسایت هایی که پسوند .comو توی آدرس یو آر ال (url) کلمه فروم نوشته شده و داخل عنوانشون کلمه وردپرس رو نوشته برای ما بیار. نتیجه این کار میشه عکس پایین:

تصویر ۱:

ساختن بک لینک

خب میبینین که ۱۱۸۰ تا سایت مرطب با موضوع ما پیدا شد و شما میتونید داخل تمام اینها بک لینک بزارید. ولی بهتره که داخل همش نذاریم چون گوگل خوشش نمیاد.

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

Inurl:forum intitle:وردپرس

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

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

 طریقه لینک سازی داخل وبلاگ

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

مثل کاری که برای بک لینک ساختن داخل فروم ها انجام دادین برای وبلاگ هم انجام بدین و جمله پایین رو سرچ کنین:

 

Site:.com inurl:blog intitle:وردپرس

تصویر ۲:

ساختن بک لینک

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

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

تصویر۳:

ساختن بک لینک

تصویر۴:

ساختن بک لینک

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

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

طریقه لینک سازی داخل سایت ها

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

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

 

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

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

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

در مرحله اول آموزش بلور کردن عکس باید شما عکسی رو که مد نظرتون هست رو داخل فتوشاپ باز کنید برای مثلال تصویر زیر:

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

 

تصویر ۱

آموزش بلور کردن عکس

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

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

تصویر ۲

بعد از این که عکس رو داخل فتوشاپ باز کردین باید از لایه (Background) با زدن کلید ترکیبی (ctrl+j) دوتا کپی بگیرید.

تصویر۳

مرحله دوم آموزش بلور کردن عکس

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

تصویر ۴

تصویر ۵

آموزش بلور کردن عکس

عکس پنجم آموزش بلور کردن عکس

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

تصویر ۶

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

تصویر ۷

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

تصویر ۸

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

و بقیه تنظیمات رو انجام بدید.

تصویر ۹

 مرحله سوم آموزش بلور کردن عکس

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

تصویر۱۰

آموزش بلور کردن عکس

تصویر دهم آموزش بلور کردن عکس

حالا لایه پاینی رو انتخاب کنید و از نوار بالای صحفه گزینه Filter و Blur Gallery و گزینه Tilt-shift… رو انخاب کنید.

تصویر۱۱

حالا در پنجره باز شده کادر های درست شده رو طبق تصویر تنظیم کنید و blur را روی ۲۳ قرار بدهید و گزینه ok رو بزنید.

تصویر۱۲

مرحله چهارم آموزش بلور کردن عکس

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

برای اینکار لایه اولی رو انتخاب کنید و از قسمت پاین لایه ها گزینه create new fill… و بعد گزینه Curves.. رو انتخاب کنید.

تصویر ۱۳

تصویر ۱۴

حالا تنطیماتش رو تغییر بدید و input:155و output: 123 قرار بدید.

تصویر ۱۵

آموزش بلور کردن عکس

تصویر ۱۵ آموزش بلور کردن عکس

حالا همون طور که روی لایه Curves.. هستید دوباره از قسمت پایین لایه گزینه create new fill… رو انتخاب کنید و بعد گزینه Hue/Saturatuon… رو انتخاب کنید.

تصویر ۱۶

تصویر ۱۷

حالا از پنجره باز شده تنظیمات را به این شکل تغییر بدین Hue : +16 و Saturabion : +44  .

تصویر ۱۸

حال همونطور که لایه Hue/Saturatuon… فعاله دوباره از بخش پایین لایه ها گزینه create new fill… و بعد گزینه  Exposure رو انتخاب کنید.

تصویر ۱۹

تصویر ۲۰

آموزش بلور کردن عکس

عکس ۲۰ آموزش بلور کردن عکس

حالا از منوی باز شده تغییرات رو به این صورت تغییر بدین، Exposure : 0,77 و Gamma Corraction : 0,79 .

تصویر ۲۱

مرحله پنجم آموزش بلور کردن عکس

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

برای این کار، همونطور لایه Hue/Saturatuon… فعاله یک لایه جدید میسازیم و لایه رو Layer 1 . Layer 1 copy قرار میدیم.

تصویر ۲۲

بعد از اینکه لایه جابه جا کردین از منوی ابزار، ابزار brush tool رو انتخاب کنید و Hardness رو روی صفر بزارد و opacity رو هم روی ۵۰ درصد.

تصویر ۲۳

تصویر ۲۴

حالا رنگ رو انتخاب کنید و کد رنگ  رو f2720a بزارید.

تصویر ۲۵

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

تصویر ۲۶

تصویر ۲۷

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

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

 

 

تفاوت طراحی و توسعه سایت(تفاوت طراحان و توسعه دهندگان)

تفاوت طراحی سایت و توسعه سایت

طراحی سایت

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

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

منظور از بصری زیبایی های سایت و عواملی مثل تایپوگرافی ، رنگ ، روابط اجزا و… هستش.

ویژگی های طراحی سایت خوب

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

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

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

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

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

بنابراین سئو سایت هم پایین می آید.

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

ظاهر زیبا

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

رنگ ها

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

تصاویر

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

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

فونت ها

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

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

تفاوت طراحی سایت و توسعه سایت

توسعه سایت

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

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

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

که معمولا به جزئیات سایت اهمیت بیشتری می دهد.

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

ویژگی های توسعه دهنده ی خوب

سرعت بالای سایت

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

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

مهارت های ارتباطی

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

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

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

تمایل به یادگیری

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

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

تفاوت طراحی سایت و توسعه سایت

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

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

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

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

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

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

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

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

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

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

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

کوتاه کننده لینک goo.gl یکی از بهترین سرویس های گوگل

کوتاه کننده لینک ( goo.gl ) یا ( google url shortener )

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

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

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

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

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

دو تا دلیل برای استفاده از کوتاه کننده لینکgoo.gl وجود داره.

۱: اشتراگ گذری لینک کوتاه خیلی راحت تره.

۲: در برخی از از شبکه های اجتماعی بطور مثال توییتر، در کرکتر های توییتر محدودیت هایی وجود دارد.

برای مثال شما در پست های توییتر فقط میتونید از ۱۴۰ کرکتر استفاده کنین.

معرفی goo.gl

تصویر:۱

goo.gl

گوگل در ۱۴ دسامبر ۲۰۰۹ یک سرویس کوتاه کننده لینک را در اختیار عموم گذاشت به اسم goo.gl.

دامنهgoo.gl خیلی به اسم گوگل شبیه است و از دو بخش ایجاد شده.

بخشه اسم دامنه goo و بخش tld یا پسوند gl.

پسوند gl مرتبط با منطقه Greenland ( گرین لند یک منطقه در شمال رقی کاندا است.

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

goo.gl اوایل فقط برای سرویس خود گوگل بود، ولی در سال ۲۰۱۰ سرویس goo.gl برای همه url در دسترس بود.

دوتا از فواید goo.gl که بسیار مفید و کاربردی است.

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

طرریقه استفاده از goo.gl

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

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

۱: وارد اکانت جیمیل خود شوید.

۲: سایت goo.gl را باز کنید.

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

طبق تصویر وارد کنید و shorten url را بزنید.

تصویر:۲

goo.gl

ایجاد لینک کوتاه

۴: همانطور که مشاهده میکنید در سمت راست صحفه لینک کوتاه شده شما با goo.gl شروع میشود.

تصویر: ۳

goo.gl

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

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

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

اگر جیمیل ندارید باید این لینک را در فایل های متنی مثل word ذخیره کنید.

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

همانطور که میدانید یکی از مهم ترین فواید سرویس goo.gl نشان دادن آمار دقیق بازدید کننده ها است.

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

۱: وارد اکانت گوگل خود بشوید.

۲: سایت goo.gl را  باز کنید.

۳: طبق تصویر زی میتوایند آمار بازدید از لینک هارا ببینید.

تصویر: ۴

goo.gl

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

لینک ادامه دار liong url.

تاریخ درج لینک cteated.

لینک کوتاه شده short url.

تعداد بازدید از لینک clicks.

گزینه details برای دیدن آمار کلی لینک مورد نظر.

تصویر:۵

goo.gl

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

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

تصویر: ۶

goo.gl

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

Referrers: منبع های بازدید

Browsers: متور جستجوی بازدید کننده

Countries: کشورهایی که مخاطبین لینک شمارو نگاه کردن

Platforms: سیستم عامل های بازدید کننده

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

 

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

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

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

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

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

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

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

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

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

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

بزرگ ترین فیلترین این شبکه اجتماعی مرتبط با تظاهراتی که در سال ۱۳۹۶ در ایران بوده، رخ داد.

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

امنیت این شبکه اجتماعی در سال ۲۰۱۵ شرکت امنیتی غیر انتفاعی بنیاد مرزهای الکترونیکیرتبه ۴ از ۷  رو در قسمت پیام رسانی و در قسمت چت مخفیانه رتبه ۷ از ۷ به این شبکه اجتماعی دادن.

ساخت اکانت تلگرام همراه باعکس

مرحله : ۱

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

تصویر : ۱

ساخت اکانت تلگرام

مرحله : ۲

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

تصویر : ۲

ساخت اکانت تلگرام

مرحله : ۳

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

تصویر : ۴

ساخت اکانت تلگرام

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

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

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

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

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

مرحله: ۱

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

بعد از اینکه عکس رو روی مستطیل قرار دایدن کلید 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) رو بزنید.

تصویر:۴۹

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

تصویر:۵۰

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

ادامه دارد….