تعداد زیادی از الگوهای وب سایت در وب وجود دارد ، اما آنها یک اشکال دارند - منحصر به فرد نیستند. اگر صاحب سایت نمی خواهد طراحی سایتش در جای دیگری تکرار شود ، می تواند الگویی را از طراح حرفه ای سفارش دهد یا خودش بخواهد آن را ایجاد کند.
لازم است
برنامه Adobe Photoshop
دستورالعمل ها
مرحله 1
ایجاد الگوی شخصی خود کار سختی نیست که در نگاه اول به نظر می رسد. برای کار ، به Adobe Photoshop نیاز دارید - البته ، شما باید حداقل درک اساسی از کار با آن داشته باشید. اما قبل از شروع برنامه و شروع به ایجاد ، باید از قبل به فکر طراحی آینده باشید. راحت ترین راه برای این کار ابتدا آشنایی با حداقل صد قالب آماده ، ارزیابی مزایا و معایب آنها است. به راه حل های موفقیت آمیز عناصر خاص طراحی توجه کنید. این بدان معنا نیست که آنها را کپی خواهید کرد ، اما بسیار منطقی است که برخی راه حلهای زیبا و راحت را مبنا قرار دهید.
گام 2
بر اساس تجزیه و تحلیل الگوهای دیگران و خلاقیت خود ، باید از شکل ظاهری سایت خود ایده بگیرید. بهتر است طرح های خشن طراحی آینده را با مداد رنگی روی ورق های A4 معمولی انجام دهید. کار با فتوشاپ را فقط باید شروع کنید پس از اینکه تصور واضحی از آنچه قرار است ترسیم کنید ، دارید.
مرحله 3
فتوشاپ را شروع کنید ، یک پروژه جدید 1200x1600 ایجاد کنید ، یک پس زمینه شفاف تنظیم کنید. ابزار Ruler را روشن کنید ، اگر از قبل روشن نیست ، برای این کار کلید کلید Ctrl + R را فشار دهید. فعال کردن اسنپ: نمای - اسنپ.
مرحله 4
اکنون باید الگو را با راهنماهایی تقسیم کنیم که حاشیه عناصر آن را نشان می دهد - اضلاع ، ستون ها و غیره. به عنوان مثال ، شما می خواهید الگو را شکاف دهید تا یک ستون باریک در سمت چپ ، یک ستون عریض در سمت راست سمت راست الگو وجود داشته باشد ، و در بالای صفحه برای یک هدر وجود داشته باشد. این بدان معنی است که شما به سه خط عمودی (مرز سمت چپ الگو ، راست و خط بین آنها) و یک خط افقی نیاز دارید ، که حاشیه پایین هدر را نشان می دهد. برای تنظیم یک خط عمودی ، مکان نما را به خط کش سمت چپ در سمت چپ منتقل کنید ، V را فشار دهید و در حالی که کلید را نگه دارید ، خط را به مکان مورد نظر بکشید. همین کار را با دو خط عمودی دیگر انجام دهید. موارد افقی به همین ترتیب ساخته می شوند ، فقط از خط کش بالایی استفاده می شود.
مرحله 5
پس زمینه ای برای الگوی خود پیدا کنید ، این باید یک الگوی کوچک و تکراری باشد. آن را در فتوشاپ باز کنید ، انتخاب کنید ، کپی کنید. سپس هر چند بار که لازم است آن را درون الگو بچسبانید تا آن را با پس زمینه پر کنید. چسباندن به این صورت انجام می شود: "ویرایش" - "چسباندن" ، و سپس قسمت پس زمینه را به مکان مورد نظر بکشید. قرار دادن تصویر با استفاده از دستور Ctrl + V حتی سریعتر است. به همین ترتیب پس زمینه ای برای سربرگ سایت اضافه کنید. برای ایجاد پس زمینه می توانید از انواع مختلف گرادیان استفاده کنید.
مرحله 6
با استفاده از ابزار Pencil ، با تمرکز روی خطوطی که قبلاً ترسیم شده اند (یعنی در بالای آنها) ، مرزهای الگو را رسم کنید. شما اساس ساده ترین الگو را دریافت کرده اید ، اکنون باید آن را با جزئیات لازم تکمیل کنید - دکمه های ناوبری ، خطوط منو ، عناصر مختلف تزئین و غیره. برای کسب اطلاعات بیشتر در مورد نحوه ایجاد دکمه ها و سایر عناصر ، مقالات مربوط به کار با Adobe Photoshop را بخوانید.
مرحله 7
الگوی ایجاد شده ، اکنون باید آن را قطعه قطعه کنید تا در صفحه html قرار گیرد. برای برش از ابزار Slice استفاده کنید. برای یافتن آن ، روی ابزار Frame کلیک راست کرده و از فهرست باز شده Cutout را انتخاب کنید. اکنون می توانید الگو را به دلخواه لانه کنید ، سپس ذخیره کنید: "File" - "Save for Web". در پنجره باز شده ، نوع پرونده را انتخاب کنید: HTML & images ، نام فایل را مشخص کنید: index.htm و آن را ذخیره کنید. شما یک فایل index.htm و یک پوشه تصاویر با تصاویر برش خورده خواهید داشت.
