در صورت داشتن سوال يا بروز مشکل در سايت با ما تماس بگيريد 09304293050

اسلايد شو

جستجو

تبليغات

محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما محل تبليغات شما

موضوعات

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

قالب وبلاگ

محل تبلیغات شما اینجاست

محل تبليغات شما
کانال مجازي آنلاين را دنبال کنيد : telegram.me/majazionline

استفاده از فتوشاپ در طراحي وب

فتوشاپ, طراحان وب, کار با فتوشاپ, طراحي صفحات وب

 

مي‌توان گفت فتوشاپ، نرم‌افزاري چندكاره است. يعني تقريبا در هر جايي كه به طراحي يا كار روي تصوير و عكس نياز باشد خودي نشان مي‌دهد و قابل استفاده است. بر مبناي نوع كاربرد مي‌توان كاربران فتوشاپ را به 3 دسته تقسيم كرد:

 

1- طراحان گرافيست

2- عكاسان

3- طراحان وب و چندرسانه‌اي

 

تاكنون ابزارهاي فراواني را براي دسته‌هاي اول و دوم با هم بررسي كرده‌ايم و با كاربرد آنها آشنا شده‌ايم‌، اما براي دسته سوم كه همان طراحان وب هستند زياد صحبت نكرده‌ايم. در اين مقاله مي‌خواهيم درباره طراحي صفحات وب به كمك فتوشاپ و ابزارها و فراميني كه به ما در اين زمينه كمك مي‌كنند صحبت كنيم و با آنها آشنا شويم.

 

هر صفحه وب از 2 بخش تشكيل شده است؛ بخش اول محيط گرافيكي صفحه و بخش دوم محيط كدنويسي است كه به كمك آن محيط گرافيكي ايستا به يك محيط پويا تبديل مي‌شود. به جرات مي‌توان گفت به همان اندازه كه كدنويسي درست در طراحي وب‌سايت مهم است، طراحي گرافيكي وب سايت نيز اهميت ويژه‌اي دارد. اينجاست كه فتوشاپ پا به ميدان مي‌گذارد و طراح وب مي‌تواند با كمك آن به بهترين نحو ممكن قدرت كدنويسي خود را به نمايش بگذارد. معمولا قبل از شروع به كار طراحي وب‌سايت، طرح جامعي از سايت و صفحات مورد نياز آن تهيه و با توجه به آن قالب گرافيكي سايت طراحي مي‌شود. پس از اتمام طراحي، با انتقال قالب به محيط برنامه‌هاي طراحي وب، ارتباط بين قسمت‌هاي مورد نظر تعريف شده و خروجي نهايي صورت مي‌گيرد.

 

اولين كار براي ايجاد قالب سايت، تعريف يك پروژه جديد با اندازه مورد نظر سايت است. براي اين كار ابتدا از قسمت File گزينه New را انتخاب و پروژه جديد را تعريف مي‌كنيم. فقط بايد دقت كرد كه در محيط وب واحد اندازه‌گيري بر مبناي پيكسل بوده و از استاندارد معيني تبعيت مي‌كند. براي سهولت كار مي‌توانيم در پنجره New با كليك در قسمت Preset و انتخاب گزينهWeb از اندازه‌هاي استانداردي كه در قسمت Size ظاهر مي‌شود استفاده كنيم. رزولوشن محيط وب نيز برخلاف چاپ كه تاكيد كرديم ‌300 انتخاب شود، بايد 72 يا حداكثر 96 باشد، زيرا بيشتر از اين مقدار تغيير چنداني در كيفيت تصوير ايجاد نمي‌شود، فقط حجم فايل خروجي را بيهوده افزايش داده‌ايم.

 

در نهايت با تاييد ابعاد پروژه وارد محيط كاري فتوشاپ مي‌شويم. استفاده از خطوط راهنمايي كه در شماره گذشته درباره آن صحبت كرديم در طراحي قالب، وب يكي از كاربردي‌ترين بخش‌هاست و به كمك آن مي‌توانيم نسبت به مشخص كردن موقعيت و محل قسمت‌هاي مختلف سايت خود اقدام كنيم. پس در ابتداي كار با مشخص كردن Header و Footer و محل چيدمان ستون‌هاي سايت خود، خطوط راهنمايي را در موقعيت مناسب آنها قرار مي‌دهيم.

 

در ادامه به كمك ابزارهاي موجود مثل ابزارهاي برداري، شيب رنگ، Layer Style و... به طراحي قالب مورد نظرمان اقدام مي‌كنيم. يكي از مهم‌ترين نكاتي كه يك طراح سايت بايد در نظر داشته باشد، كم حجم كردن سايت براي سهولت بارگذاري آن در اينترنت‌هاي كم‌سرعت است و با توجه به اين كه بيشتر حجم يك سايت نيز مربوط به تصاوير استفاده شده در آن است، بنابراين به كمك فتوشاپ و ترفندهاي طراحي سايت مي‌توانيم سايتي با كمترين حجم ممكن بدون صرف‌نظر كردن از جلوه‌هاي گرافيك توليد كنيم.

 

يكي از ترفندهاي طراحي سايت استفاده از دستور تكرار (Repeat) در كدنويسي سايت است كه در آن با تكرار يك تصوير به صورت پشت سر هم، اندازه وسيعي از فضاي مورد نظر بدون افزايش حجم پوشانده مي‌شود. مثلا براي پوشش پس‌زمينه سايت يا قسمت سرصفحه يا پاصفحه سايت مي‌توانيم از اين ترفند استفاده كنيم و حجم سايت خود را تا حد بسيار زيادي كاهش دهيم.

 

براي توليد تصويري كه با تكرار آن، شكل مورد نظر ايجاد مي‌شود مي‌توانيم از قسمت جعبه ابزار فتوشاپ و مجموعه ماركي ابزار Single Row يا Single Column را براي انتخاب يك پيكسل از تصوير به صورت افقي يا عمودي از محيط كاري استفاده كنيم. درمرحله بعد با قرار دادن خطوط راهنما در ابتدا و انتهاي قسمت انتخاب‌شده، به كمك ابزار Crop آن بخش را برش داده و از آن براي تكرار و ايجاد حالت مورد نظر استفاده كنيم.

 

يكي ديگر از قسمت‌هاي كاربردي فتوشاپ براي طراحان وب، ابزار Slice در زير مجموعه ابزار Crop است كه به كمك آن طراح مي‌تواند تصوير خود را به قسمت‌هاي كوچك‌تري تقسيم كرده و باعث افزايش سرعت بارگذاري سايت شود. حتي مي‌تواند براي هر بخش انتخاب شده آدرس URL دلخواهي را تعريف كند تا كاربر با كليك روي آن بخش، به صفحه مورد نظر طراح هدايت شود. براي اين كار كافي است پس از تعريف Slice در گوشه سمت چپ و بالاي آن دوبار كليك كنيد و در پنجره باز شده آدرس مورد نظر و ساير مشخصات دلخواه را بنويسيد. يكي ديگر از قابليت‌هاي مهم فتوشاپ براي طراحان وب توليد خروجي مناسب وب از صفحه طراحي شده بدون استفاده از برنامه‌هاي طراحي وب است. براي اين كار پس از اتمام طراحي، از قسمت File گزينه save for web را انتخاب كرده و با تعريف فرمت دلخواه از قسمت Preset گزينه save را انتخاب مي‌كنيم.

 

البته كاربرد اصلي اين بخش، توليد تصاوير كم‌حجم به منظور استفاده در صفحات اينترنتي است، اما همان‌گونه كه گفته شد مي‌توانيم اين تصاوير را همراه صفحه html مورد نظر نيز توليد و آن را در سايت خود آپلود كنيم.

 

از فرمت‌هاي كم حجم رايج عكس براي استفاده در صفحات وب مي‌توان به JPEG، Gif و PNG اشاره كرد كه از بين آنها فرمت Gif و PNG جهت ذخيره‌سازي لايه‌هاي شفاف نيز كاربرد دارد كه البته حجم بيشتري نيز نسبت به فرمت JPEG دارد. در صورت استفاده از تصاوير شفاف روي ديگر تصاوير در وب، كادري اطراف تصوير مورد نظر ظاهر نمي‌شود و از اين بابت حرفه‌اي‌تر خواهد بود.

 

فتوشاپ, طراحان وب, کار با فتوشاپ, طراحي صفحات وب

 

با انتخاب گزينه Save for Web‌ از قسمت File‌ پنجره‌اي مطابق شكل ظاهر مي‌شود كه از آن مي‌توانيم براي ايجاد تناسب دلخواه بين كيفيت و حجم تصوير از بين حالت‌هاي فراواني كه وجود دارد، استفاده كنيم.

1- فعال‌كردن حالت مقايسه‌اي تصوير بين حالت اصلي و حالت انتخاب شده براي ايجاد خروجي كم حجم.

 

2- پيش‌نمايش تصوير قبل و بعد از اعمال تغييرات.

 

3- توضيحات مربوط به اندازه تصوير نهايي و سرعت بارگذاري آن در اينترنت.

 

4- گزينه‌هاي قابل انتخاب براي تنظيم حالت دلخواه تصوير نهايي از بين 3 فرمت JPEG، Gif و PNG (از حالت‌هاي پيشفرض موجود در قسمت Preset نيز مي‌توان استفاده كرد).

 

5- نمايش يا عدم نمايش متا ديتا مخفي شده در عكس.

 

6 – جدول رنگ‌هاي استفاده شده در صورتي كه حالت Gif انتخاب شده باشد.

 

7- تنظيم سايز تصوير نهايي.

 

8- تنظيم انيميشن موجود در تصوير در صورت تعريف انيميشن و ايجاد خروجي Gif.

در نهايت با كليك روي دكمه save و انتخاب حالت دلخواه Image Only يا html Only يا هر دو، فايل خود را با كمترين حجم ممكن ذخيره مي‌كنيم.

گردآوری وتنظیم: www.majazionline.ir

کانال مجازي آنلاين را دنبال کنيد : telegram.me/majazionline

اين مطلب را با دوستان خود به اشتراک بگذاريد
225 دوشنبه 26 فروردين 1392 majazionline نظرات () موضوع(آموزش فتوشاپ)

مطالب مرتبط

آموزش چند ترفند کاربردی در فتوشاپPhotoshop
آموزش تصویری کارکرد سریعتر در فتوشاپ
آموزش جدیدترین تکنیک های روتوش در فتوشاپ
آموزش تصویری قراردادن میوه در لباس مبدل
آموزش تصویری تبدیل یک تصویر متحرک GIFبه یک ویدیو بافتوشاپ
آموزش تصویری آرایش لب با فتوشاپ
نمونه سوالات تئوری و عملی فتوشاپ CS6
نمونه سوالات آزمون فتوشاپ-potoshop
آموزش نوشته‌های فارسی را در فتوشاپ تصحیح کنید
آموزش تصویری ایجاد افکت متنی بهاری با فتوشاپ
آموزش افکت باران با فتوشاپ
آموزش تصویری تبدیل تصاویر به حالت قدیمی در فتوشاپ
آموزش 10 عادت بد در فتوشاپ که باید آن ها را ترک کنید
آموزش تصویری حذف چین و چروک صورت
آموزش تصویری سفید کردن دندان‌ها
آموزش تصویری ایجاد افکت بافت در فتوشاپ CS6
آموزش تصویری ایجاد اشکال نورانی در فتوشاپ
آموزش تصویری ویرایش حاشیه عکس با فتوشاپ CS5
آموزش تصویری حذف عوامل اضافی از تصویر درفتوشاپ
آموزش چطور تصاویر جعلی ، دسکاری شده و فوتوشاپی را بشناسیم
آموزش نحوه ایجاد مسیرهای برش خورده با فتوشاپ
آموزش 60 نکته جهت گرافیست شدن
آموزش تبدیل روز به شب با فتوشاپ
لیست كليدهاي ميانبر در فتوشاپ
آموزش تصاویر خود را درفتوشاپ به شکل پروانه رویائی کنید
آموزش ایجاد یک پشت زمینه موجی در فتو شاپ
آموزش تصویری ساخت کارت پستال ولنتاین با فتوشاپ
آموزش پيكان‌ها در فتوشاپ
آموزش حذف و ترميم هوشمندانه در فتوشاپ
آموزش چگونگي استفاده از فيلترها در فتوشاپ
آموزش حلقه کردن گوشه کاغذ در فتوشاپ
آموزش ایجاد افکت پلاستیک درفتوشاپ
آموزش حذف عیبهای صورت در فتوشاپ
آموزش ساخت تصاویرHDRدرفتوشاپ
آموزش ایجاد افکت زمستانی بروی چهره در فتوشاپ
scratch disk چیست و چطور خطای “scratch disk full” را در فتوشاپ رفع کنیم؟
آموزش تصویری عوض کردن پس زمینه عکس در فوتوشاپ
دانلود کتاب آموزش ساخت افکت آبرنگی در فتوشاپ
کتاب آموزش تصویری کار با نرم افزار فتوشاپ
آموزش تصویری ایجاد افکت بخار بر روی متن
آموزش تصویری تغییر رنگ در عکس درفتوشاپ
آموزش تصویری تایپوگرافی فرو رفته در فتوشاپ
آموزش تصویری طراحی بافت طبیعی کاغذ در فتوشاپ
آموزش تصویری ایجاد افکت طبیعی اشک در فتوشاپ
آموزش تصویری طریقه ساخت بارکد روی اشیاء با فتوشاپ
آموزش تصویری رنگی کردن عکس های سیاه و سفید در فتوشاپ
آموزش تصویری طراحی کارت ویزیت خیلی شیک با فتوشاپ
آموزش تصویری روتوش سورئال تصاویر در فتوشاپ
آموزش تصویری آتشی کردن عکسهای شخصی در فتوشاپ
آموزش تصویری تغییر رنگ چشم ها در فتوشاپ

صفحات سايت

تعداد صفحات : [Blog_Page_Count]
[Blog_Page]

آخرين مطالب ارسالي

-براي پاسخ سريع لطفا با شماره 09304293050 تماس بگيريد


نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
قوانين بخش نظرات
1 - نظرات اسپم و تبليغاتي تاييد نخواهد شد.
2 - فقط نظراتي که جنبه عمومي داشته باشند تاييد و منتشر مي شوند.
3 - نظرات فينگليش تاييد نخواهند شد.
4 - هرگونه درخواست و يا حل مشکلات فقط در انجمن امکان پذير است.
5 - لطفا انتقادات و پيشنهادات و همچنين درخواست هاي خود را از بخش هاي تماس با ما و درخواستي ها ارسال نماييد.

تبليغات

محل تبليغات شما

اطلاعات کاربري

نام کاربری :
رمز عبور :

مطالب پربازديد

مطالب تصادفي

محل تبليغات شما
محل تبليغات شما
محل تبليغات شما
محل تبليغات شما
محل تبليغات شما
محل تبليغات شما

مجوزهاي سايت

logo-samandehi

آمار سايت

کل مطالب : 7340
کل نظرات : 1208
افراد آنلاين : 15
تعداد اعضا : 7430
بازديد کل سايت : 14,738,240

چت باکس

[My_Chat_Box]