آموزشهای گروهی: <شماره 4> : کلیات و جزئیات طراحی صفحات وب در فتوشاپ

GFX Master

مدیر انجمن گرافیک دو بعدی ومسئول فروشگاه
شما خیلی کلی سوال کردی. در چه موردی راهنمایی میخوای؟
 

mahdyonline

Active Member
سارا جان منظور من اينكه در باره ي مثلان اندازه محل قرار گرفتن لوگو يا اينكه آيا كليدها رو تو هيدر بزاريم يا نه
همين
 

GFX Master

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

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

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

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

در مورد کلیدها هم باز هم سلیقه ایه. مثلا سایت یاهو اینکار رو میکنه و بعضی از ایکنهایی که یوزرهاش بیشتر احتیاج دارن مثل mail و messenger و ... رو در هدر میذاره ولی خیلی جاها هم اینکار رو نمیکنن.

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

موفق باشی
سارا
 

hamid ir

Well-Known Member
سارا جان منظور من اينكه در باره ي مثلان اندازه محل قرار گرفتن لوگو يا اينكه آيا كليدها رو تو هيدر بزاريم يا نه
همين
به نظر من اگه سایتی داری که دارای فروم هستش کلیدهاتو تو هدر نزاری بهتره ولی اگه فقط یه سایت معمولی هستش خوب اگه بزاری تو هدر بهتره
این نظر منه
 
میشه یکی از مدیران لطف کنه وعکسایی که نمیاد رو درست کنه؟
اینا دقیقا از وفتی خراب شدن که سایت وسط تابستون مدتی دان شده بود و وقتی سایت دوباره راه افتاد این عکسا پاک شده بود. تمام عکسایی که نمیاد آدرسشون http://img.majidonline.com/pic هست
 

GFX Master

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

Habibsat2005

New Member
با سلام خدمت زحمت کشان وکاربران محترم سایت وبالاخص این تاپیک:
بعنوان ارسال اولین پستم باید عرض کنم که من این تاپیک رو از سرچی که در گوگل زدم پیدا کردم باور کنید تاپیک بسیار خوب و جالب و در عین حال سودمندی است.وفکر نمیکردم همچین تاپیک پر ثمری پیدا کنم.همه 13 صفحه رو 2ساعتی از ورودم میشه که خوندم.
حدود 10-20 روزی میشد که فکر و ذکرم در مورد طراحی سایت و چگونگی انجام اینکار متمرکز شده بود از سی دی های آموزشی زیادی درمورد دریم ویور -فورنت پیج و سویش مکس استفاده کردم اما هیجا در مورد طراحی قالب با فتوشاپ چیزی ندیدم .وبهمین خاطر داشتم دیگه نامید میشدم وولش میکردم اما دیدن این تاپیک دوباره عزمم رو جزم کرد که ادامه بدم (البته با کمک اساتید مهربانی که در این تاپیک دیدم)
باور کنید بدون هیچ منبع و ماخذی (البته توسط سورسهای آماده وبلاگ)بسیاری از منوهای اونو خودم یاد گرفته بودم اما جزییات رو اصلا نمیدونستم که الحمدالله با این سایت و این تاپیک آشنا شدم و تازه فهمیدم که خیلی راه در پیش دارم.
مایوس نیستم امامطمئنم با کمک دوستان این مشکلم رو حل خواهم کرد.
همانطور که دوستان فرموده بودن برای تازه واردهایی مثل من که تازه با این سایت آشنا شدن واحیانا تازه تو بحث شرکت کردن بسیاری از نکات به جهت حذف عکسهای آموزشی مبهم خواهد بود لذا از تمامی دوستان ارجمند که این توضیحات رو دادن خواهش میکنم که در صورت امکان همکاری بفرمایید.(البته بعدا خودم به همه آنها پیغام خصوصی خواهم داد ودر خصوص قرار دادن عکسها وادیت پستشان خواهش خواهم کرد.)
بهر صورت خیلی خوشحالم که در جمع شما هستم در اسرع وقت سئوالاتم رو خواهم پرسید.

ممنون
موفق باشید.:D :lol:
 

GFX Master

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

موفق باشی
سارا
 

Habibsat2005

New Member
با سلام مجدد:
سئوالی که دارم اینه وقتی در فتوشاپ قالب رو طراحی میکنم در برنامه فورنت پیج وقتی میخوام در قسمتهای مربوطه چیزهایی بنویسم به صورت سفید در میاد وعکس زمینه مربوطه پاک میشه ومتن در یک قسمت سفید نگاشته میشه
من در اینجا یک نمونه بصورت مثال براتون میذارم

35n5ylz.jpg

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


ممنون
متشکرم
 
آخرین ویرایش:

GFX Master

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

Habibsat2005

New Member
خوب شما بهتر بود سوالت رو در انجمن فرانت پیج مطرح میکردی. ولی حالا که پرسیدی بذار جواب بدم. شما اول بگو که این عکسها رو تو فرانت پیج داخل table بصورت عکس قرار میدی یا بصورت بک گراند برای table ؟ چون باید حتما عکس رو بعنوان بک گراند table انتخاب کنی تا عکس جابجا نشه.
با سلام:
شرمنده ام عرض کردم تازه با سایت آشنا شدم شرایط فعلی ام طوری است که زیاد وقت نکردم تمام سایت رو بررسی کنم.
سارا جان من از قرار دادن عکس در تی بل بی اطلاعم.حالا راههایی رو که رفتم براتون میگم.
ببین من از قسمت اوپن او فایلی رو که تحت save for webذخیره شده رو باز کردم و بدون هیچ کار دیگه ای در اون بالا در قسمتی که در فتوشاپ اسلایس بندی شده انتخابش کردم وشروع به نوشتن کردم وعملا شاید اشتباهم همین بوده اما راهش رو بلد نیستم لطفا بصورت کامل بفرمایید که چگونه باید متن را در تی بل قرار بدم یا اونو بصورت بک گراند انتخاب کنم.
منتظر راه حل شمکا هستم اگه بصورت تصویری بااشه که خیلی خوبه.

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

GFX Master

مدیر انجمن گرافیک دو بعدی ومسئول فروشگاه
من متاسفانه رو سیستمم فرانت پیج ندارم که تصویری برات توضیح بدم ولی همینطوری مرحله به مرحله میگم هر جاشو متوجه نشدی بگو تا توضیح بیشتری بدم:

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

2- داخل برنامه فرانت پیج یه Table ایجاد کن.

3- حالا به قسمت table Properties برو و تنظیماتش رو اینطوری که میگم انجام بده.

4- اول از همه میزان ضخامت border رو سفر بگیر تا حاشیه کنار جدولها حذف بشه و به شکل نقطه چین دیده بشه. بعد میزان طول و عرض table رو دقیقا هم اندازه اولین اسلایست از چپ یا راست بگیر (چپ یا راست بودن اسلایس چندان فرقی نمیکنه ولی باید از کناره های عکس شروع کنی). حالا یه منو در همون قسمتی که اندازه رو تعیین کردی وجود داره که محل قرار گرفتن table رو در صفحه مشخص میکنه و 2 تا گزینه داره که یکیش left و یکیش right . حالا نسبت به محل اسلایسی که براش Table طراحی کردی محل راست یا چپ چین شدن Table رو تعیین کن. در آخر هم عکست رو از قسمت پایین همین پنجره که مشخصه نوشته background انتخاب کن. اینطوری اون اسلایس بعنوان بک گراند table تعیین میشه و شما میتونی خیلی راحت متنت رو داخلش بنویسی.

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

امیدوارم متوجه شده باشی.
 

Habibsat2005

New Member
با سلام
ممنون از زحمات شما
واقعا گیج شدم شما میفرمایید که باید دراندازه تمام قسمتهایی رو که در فتوشاپ ایجاد کردم واونا رو کنار هم قرار داده ایم رو بدونم
ولی چه جوری عکسهای کنار هم اگه زیاد باشه چی من براتون عکس کار رو که بصورت یک اسلایس بندی رو نشون میدم که بهم بگید چه جوری اندازه هاشون رو بدونم
4328gm0.jpg

شرمنده ام واقعا گیج شدم شاید خیلی دیر میگیرم اما اگه لطف کنید وواضح تر بفرمایید نهایت سپاسگذاری رو دارم.
در ضمن من ابتدا کل کار رو وارد فورنت پیچ میکنم
2eq3m1j.jpg

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

موفق باشید.
 

GFX Master

مدیر انجمن گرافیک دو بعدی ومسئول فروشگاه
خوب همین دیگه مشکل همینه که شما اشتباه وارد میکنی! ببین کار سختی نیست. شما بعد از اینکه اسلایس بندی کردی و کار رو ذخیره کردی دیگه کارت با فتوشاپ تموم میشه. بعد بیا و روی هر اسلایس راست کلیک کن و گزینه آخر رو یعنی Properties رو انتخاب کن و سایز عکس رو از داخل اون ببین. بعد table رو با همین سایز در نظر بگیر. کار سختی نیست ولی یکمی وقتگیره که خوب هر کاری سختی خودش رو داره دیگه! ولی وقتی دستت راه بیافته کار خیلی راحتیه.

به هیچ وجهی کل کار رو وارد فرانت پیج نکن. اصلا اصول کار فرانت پیج بر اساس table هاست. یعنی شما برای اینکه تمام کار طراحی وبی که انجام میده نظم بگیره باید از Table ها استفاده کنی.

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

mahdyonline

Active Member
سلام
من الان تازه ويندوز عوض كردم براي همين هم فرونت رو ندارم
اما فكر كنم شما اگه رو عكس راست كليك كني و به پروپرتيس بري اونجا خودش چند راه جلوي پات گذاشته كه با عكس هستش و خودت منظورشو ميفهمي اما اگه نداشت يك كليد استايل سمت چپ پنجره داره كه غكر كنم بتوني از اونجا اين تنظيمات رو انجام بدي
باي
 

mostafa_az

Well-Known Member
پسرم بزار راهنمائیت کنم .

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

1.jpg


2.jpg


حالا این پنجره رو ببنید و عکس این قسمت رو حذف کن . خوب . الان با یه سلول بدون عکس روبروی هستی که توش میشه تاپیک کرد . حالا توی این سلول راست کلیک کن و cell propertis رو انتخاب کن . حالا توی این پنجره توی مکان های مورد نظر طول و ارتفاع و مسیر عکس رو وارد کن ( مثل عکس ) :

3.jpg


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

مخلصیم
مصطفی
 

GFX Master

مدیر انجمن گرافیک دو بعدی ومسئول فروشگاه
مرسی مصطفی من متاسفانه فرانت پیج نداشتم که تصویری توضیح بدم. تنکست درد نکنه ;)
 

جدیدترین ارسال ها

بالا