واضح آرشیو وب فارسی:سایت ریسک: درست کردن قالب وب سايت با فتوشاپ bernadet 15 فروردين 1385, 16:53منبع در این درس یاد می گیریم که چقدر راحت و آسان می توان توسط فتوشاپ یک تمپلیت زیبا درست کرد . شما در این درس روش کلی کار را می آموزید و بعد طبق سلیقه خود می توانید انواع و اقسام قالب های زیبا درست کنید . * یک داکیومنت جدید با ابعاد 600 * 778 و پس زمینه با رنگ #F1F1F1 درست کنید . * یک لایه جدید ایجاد کنید Ctrl + shift + n و از نوار ابزار Rectangular marquee tool ابزار انتخاب مستطیلی را بردارید .درست در زیر نوار منو برای شما نوار آپشنز مربوط به تنظیمات این ابزار ظاهر می شود . مطابق زیر در نوار آپشنز در قسمت Style گزینه Fixed size را انتخاب کنید . و دوباره در همان نوار آپشنز برای طول و عرض مقادر زیر را به کار برید Width : 728 Height : 600 این گزینه Fixed size باعث می شود که وقتی انتخاب می کنید به طور خودکار برای شما ناحیه ای با ابعادی که تعیین کرده اید انتخاب شود . قسمت انتخاب شده را به رنگ سفید در آورید .یعنی کلید D دی روی کیبور را بزنید که رنگ فورگراند سیاه شود و دوباره کلید X ایکس روی کیبورد را بزنید که رنگ فورگراند سفید شود و Alt + backspace را بزنید که ناحیه انتخابی سفید شود . با ابزار Move ناحیه سفید را جوری حرکت دهید که از نظر افقی درست در وسط باشد . ناحیه کاری ما حالا به این صورت شده * خوب حالا به این لایه سفید رنگ Outer glow میدهیم روی پلت لایه ها این لایه سفید را انتخاب نموده و Layer > layer style > outer glow و تنظیمات زیر را در موردش اعمال کنید . Blend mode : normal Opacity : 25% Noise : 0 Color: یک رنگ خاکستری تیره Technique : softer Spread : 0% Size : 5px Contor: به صورت پیش فرض رهایش کنید Anti – aliased : un checked تیک نخورد Range : 50% Jitter : 0% تا اینجا بک گراند وب سایتمان آماده شد . حالا قسمت بالایی وب سایت را درست می کنیم که مهمترین قسمت سایت است زیرا این قسمت هدر در تمام صفحات یک وب سایت مشترک است و زیبایی آن اهمت دارد . یک لایه جدید ایجاد کیند و برای ایجاد نظم نام مناسبی به آن بدهید . ابزار انتخاب مستطیلی را برداشته و در نوار آپشنز گزینه Style : fixed size را انتخاب کنید و برای طول و عرض ناحیه انتخاب مقادر زیر را قرار دهید Width : 728 Height : 20 وبه ناحیه انتخاب رنگ # 494F1C و آن را در وسط تراز کنید . * یک لایه جدید ایجاد کنید و نام مناسب بدهید و یک عکس با ابعاد 728 * 125 باز کنید و عکس را در این لایه جدید قرار دهید . شکل زیر تا اینجای کار به دست آمده * یک لایه جدید ایجاد کنید و نام مناسب بدهید و با ابزار انتخاب مستطیلی یک ناحیه به ابعاد 728 * 20 ایجاد کنید و با رنگ # B 1C144 پر کیند و در زیر عکس جایش دهید . به این صورت : * حالا لوگوی سایت را روی عکس قرار می دهیم . یک لایه جدید درست کنید و با ابزار انتخاب مستطیلی یک کادر به ابعاد 85 * 285 ایجاد کنید و با رنگ سفید پرش کنید و اپاسیتی لایه را در پلت لایه ها به 50% کاهش دهید و برای این لایه Outer glow را با همان تنظیماتی که در بالا ذکر شد اعمال کنید . به اینجا رسیدیم * یک لایه جدید درست کنید و نام مناسب بدهید و با ابزار Rectangular marquee tool یک کادر با ابعاد 370 * 175 رسم کنید .برای این کار در نوار اپشنز گزینه Style : fixed size را انتخاب کنید و طول و عرضی که گفته شد وارد کنید . و محل انتخابی را به رنگ F1f1f1 در آورید هنوز از انتخاب خارج نشوید و Edit > strok را با تنظیمات زیر اعمال کیند . Width : 1 px Color : d 1d 1d 1 Location : outside Blending : normal Opacity : 100% Preserve trancpareny : un checked تیک نخورد به این صورت شد * دوباره یک لایه جدید ایجاد کنید و نام مناسب بدهید و یک کادر به ابعاد 370 * 530 ایجاد کنید و رنگ F1f1f1 بدهید و در جای خود قرارش دهید . به این صورت * برای فوتر سایت هم یک لایه جدید درست کنید نام مناسب بدهید با ابزار انتخاب مستطیلی یک کادر به ابعاد 25 * 728 و رنگ F1f1f1 ایجاد کنید و کادر را در پایین ترین قسمت صفحه قرار دهید . * حالا در کادر سمت چپ لینکها را اضافه کنید و در کادر سمت راست هم متن صفحه را بنویسید . البته در فتوشاپ در این قسمت فقط انگلیسی می توان نوشت برای نوشتن فارسی می توانید این فایل را با پسوند Html ذخیره کنید و در فرانت پیج باز کنید و متن فارسی را در آنجا اضافه کنید . شما در همین فتوشاپ لینکهای سمت چپ را نیز می توان سازمان دهی کنید به این صورت که با استفاده از ابزار Slice دور هر یک از موارد ی که می خواهید لینک باشد را کادر بکشید و بعد ابزار Slice select tool را بردارید و روی هر یک از این کادرها دبل کلیک کنید و در کادری که ظاهر می شود گزینه ها را پر کنید و این فایل را به صورت اچ تی ام ال ذخیره کنید برای این کار باید File > save for web کنید . برای توضیحات بیشتر در مورد کار با ابزار Slice و درست کردن لینکها می توانید در انجمن سرچ کنید . S4DEGH 16 فروردين 1385, 01:28آقا من چند تا آموزش ساخت صفحات وب دارم كه خيلي قشنگ و زيبا هستن ! آدرس بدم ..!؟ mohsenshahab 16 فروردين 1385, 01:35آقا من چند تا آموزش ساخت صفحات وب دارم كه خيلي قشنگ و زيبا هستن ! آدرس بدم ..!؟ نیکی و پرسش؟؟؟ Mehdi Pardazesh 16 فروردين 1385, 12:59سلام صادق جان متشکر می شم موفق باشی S4DEGH 16 فروردين 1385, 16:04بفرماييد ... بسه يا بازم بگم !؟ همه اينها مال يك سايت هست ! bernadet 16 فروردين 1385, 16:40قالبا عاليه مرسي GFX Master 16 فروردين 1385, 23:36صادق خیلی خوب بود دستت درد نکنه. کاشکی هر کی میخواست یه لینک به یه آموزش تو سایتای دیگه بده مثل تو یه نمونه بذاره تا آدم ببینه نتیجه نهایی کار چیه و اگر خواست وقت بذار برای دیدن آموزش. بازم مرسی collarian 13 ارديبهشت 1385, 02:51بفرماييد ... بسه يا بازم بگم !؟ همه اينها مال يك سايت هست ! خیلی ممنون صادق جان. بیشتر بزاری ممنون میشم :) sutinevis 19 ارديبهشت 1385, 15:17من تو درست کردن قالب برای سرویسای بلاگ مشکل دارم. وقتی ارتفاع قالب زیاد میشه همه چی بهم میریزه. در ضمن با خود فتوشاپ اسلایس بندی میکنم. کسی میتونه از اول آموزش طراحی قالب مثلا برای بلاگفا رو بذاره؟ S4DEGH 21 ارديبهشت 1385, 11:47من تو درست کردن قالب برای سرویسای بلاگ مشکل دارم. وقتی ارتفاع قالب زیاد میشه همه چی بهم میریزه. در ضمن با خود فتوشاپ اسلایس بندی میکنم. کسی میتونه از اول آموزش طراحی قالب مثلا برای بلاگفا رو بذاره؟ __________________ ببين شما اون بخشي كه مربوط به ارتفاء قالب هست رو عكس تصور ميكني .. براي همين موقعي كه ارتفا زياد ميشه قالب بهم ميريزه ! شما بايد تصوير رو بهصورت ضمينه در بياري تا تكرار بشه در اين صورت است كه قالب درست ميشه !
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 1410]