Psd to html bangla tutorial pdf

Uploaded on 

 

Once again we have gathered a very useful and helpful collection of detailed tutorial for PSD to HTML conversion. Today, every designers, web. We have six unique text and video PSD to HTML conversion tutorials in this article. You will learn how to design web layouts in Adobe. Hire a provider of PSD-to-HTML/CSS conversion services. And here comes Collect information: Design-to-XHTML/CSS tutorials, reviews of automated.

Author:MEDA DOMENICE
Language:English, Spanish, Arabic
Country:Armenia
Genre:Art
Pages:265
Published (Last):04.06.2016
ISBN:464-3-58492-943-5
Distribution:Free* [*Register to download]
Uploaded by: RORY

56630 downloads 137012 Views 21.38MB PDF Size Report


Psd To Html Bangla Tutorial Pdf

Live psd to html css bangla video tutorial. Start to practice one tutorial series along with them. Type the code while watching the tutorial. There are many tutorials available on the Internet explaining how to convert PSD to HTML, ready for a completed web design. This post brings. From PSD to HTML: Building a Set of Website Designs Step by Step It's a massive tutorial, so if you're going to follow through to the end.

This technique is very important for them because with this technique they can easily convert their designs into active blogs or websites. And also this technique makes their work easy and save their valuable time too. In this round up, we have collected some useful, free and professionally created tutorials on PSDs to HTML conversion only for you so that you can take help from this collection. So enjoy browsing through this collection and collect useful tutorials that will be helpful for you in your future projects. Do share with us what you feel about this compilation. Enjoy and have fun everyone!! With this tutorial you can easily convert your PSD designs into simply elegant and fully functional CSS3 web layout without wasting any time. You will see in this tutorial all codes are semantic and standards compliant. If you do not know the process of coding then this tutorial will teach you the process of coding to convert your designs into HTML and CSS. In this tutorial you will see the working example that helps you. If you are searching how to code a Grunge web design from Scratch then this well detailed tutorial will definitely help you. If you want to create a fresh and professional business website design by converting your PSDs into HTML conversion then this tutorial will help you in this purpose.

For the Call I floated it right and apply a 1px gray border also a 25px padding from right. Note that to get this value you need to go back to Photoshop and use the Ruler Tool I to measure the distance. Since I styled the h3 and h4 with a 25px bottom margin in our base text format we need to reset it and change it to 0.

PSD To HTML Expert TIps, PSD To Bootstrap

This will make the h4 and h3 in the call section back to normal. All li are floated left except for the last li element, also it has a left and right border except for the the home there is no left border and for the last there is no right border. All a is styled 30px padding from left and right 0 for top and bottom, a height of 50, a text shadow, a line-height of 50 to make it center vertically. For the class home I pushed out the text and replace it with the home icon.

Lastly, I styled the search input with a rounded radius, a green background, dark border on top and light border on bottom. Also to target placeholder attribute refer to the CSS which I comment to style place holder this is a part of css3 property. Before previewing this to IE lower versions make sure to copy and paste the code below in the header section of our HTML file. Fusce viverra commodo rhoncus. Nam ipsum magna, faucibus non semper et, vestibulum quis arcu.

Nulla in tellus eu nunc cursus scelerisque ac nec nibh. Also I added a class for the heading slide-heading, paragraph info and for the read more readmore. This is helpful so that we can position the inside elements prev, next, and pagination absolutely which are auto-generated by the JavaScript.

For the slide-right which contains the heading, info and read more, all positioned absolutely, 0 out top, and pushed it px from left. For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly.

Then followed by the readmore styling which has a green color with background arrow and a gray hover. For the pagination, prev, and next buttons this is auto-generated by the JavaScript in order to style this first we need to identify what is the tag or the applied html class attribute. Now that you know the element, we will target it in the CSS. For the Pagination I positioned it absolutely, placed it 25px from the bottom and left, also I applied z-index 99px — this will make the pagination right on the very top over the other elements.

Then I floated the pagination li elements to left, gave it a right margin of 10px, added a background image with a fixed width and height.

I positioned the background by default to top since the normal state image is on top, for the current or the active state we will be going to reverse the positioning from top to bottom and lastly display it as a block level element and hide the text.

For the. Noticed the prev-next. I positioned the.

250+ Free Photoshop Tutorials, eBooks and Resources To Learn

Copy the slides. You should add this script just before the. Maecenas ullamcorper, nibh tristique ullamcorper lacinia, tellus nisi blandit elit, id pulvinar tortor.

In the heading you can see I added a span and applied a class of green since the heading is combined with different colour. For the read more link we apply the same class we did in the slider area. For the paragraph I gave it a fixed width with a margin, for the image I floated it right and give it a right margin, pretty much the same on vector image and text. Now our layout should look like this.

Also, I added a class group on the media div. I styled h4 and h5 centered and added a dropshadow, for the play button which has a class of. For twitter div I gave it a fixed width and height of px by px and added a background image positioned in bottom, also I gave the. For facebook this is the same to twitter heading and floated to right. The purpose of the group class is to force the element to self-clear its children a. What this means is the media is the parent element which holds child elements inside of it that are floating left this are video, twitter and facebook.

Next I created 3 div links which contains an unordered list, blog which contains a heading, image, title, date and read more link. Lastly, location which contain an image, and the address. For the widget div I appled px width and position it centered. For the links div I gave it a width of px, floated it to left and give it a right margin 75px, for the ul list. For the blog div I gave it a width of px, floated it to left, apply a 75px margin and position it relatively.

For the heading I added a backround, indented the text, and added 58px line height to make the text centered vertically. For the blog img since we just positioned blog div to relative we can now position this absolutely to position the image the same to psd design which is left 18px.

For the location the same also in blog where it is positioned relatively and position the inside image absolutely, and for the address I added margin and paddings and give it a 1px border to the right. Lastly I added clickable back to top image.

For the copyright text I made it smaller and changed the color to a lighter one. For the links I floated the ul to the right and floated li to left, gave a margin of 30px, for the last-child I removed the margin, for the links I styled it the same with the copyright text and added 2px border when its hovered.

This took me so long to write. I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below. Add the search text using Text Tool T , font is Helvetica 14pt.

Then, place the Search Icon 20px to the left. Last step in this part is to add Drop Shadow on the icons and text to make it more crisp. The slider part will be px high and 40px below the navigation, so go ahead and measure it with Ruler Tool I.

Select Rounded Rectangle Tool U and create the same shape as shown in the screenshot below. All you need to do is first create a px by px shape and customize the bottom right corner the same in the screenshot below using Direction Tool A.

Next using Ellipse Tool U create a px by px shape. Place this shape at the center of the bottom right corner. Create another shape using the same tool. For the purpose of the presentation I made it a green so that you can see how the shape will look.

The shape size is px by 88px.

PSD to HTML | E-commerce PSD | Asset Cutting From Adobe Photoshop | Bangla | Part 1

Next we will be adding the slider controls. Using Ellipse Tool U create a 3 13px by 13px shape. Place it as shown in the screen shot below. Next is the previous and next button. I created this using Pencil Tool B. Normal state color will be 4f4c4d and for the Active the same green color. Place this as shown in the screenshot below. All you need to do is create a new layer above the shape and place your image there, then Right Click and click Create Clipping Mask.

Do the same on the ellipse shape. I will leave it up to you what image you use. For the heading title I used the same font as the call to action part, then for the paragraph I use Helvetica 13pt, and for the read more I made it Italic and used the same color green and added an arrow using Pencil Tool B beside it. The service area will be px high and 40px below the slider, so go ahead and measure it with Ruler Tool I.

Using Rounded Rectangle Tool U with a fill color of f9f9f9 create a shape as shown in the screen shot below. We will be dividing the shape into two so that we can align our service blocks properly.

Add the following text and Icons as shown in the screen shot below. Note that text sizes and color are all the same so feel free to copy some elements as we did previously. Also the distance from the shape left and above is 30px.

Adding the shadow to the bottom part is very simple. All you need to do is duplicate the base shape and make the fill color , place it below the original shape layer. We will work first on the Video section.

PSD To HTML Tutorial Step By Step PDF – PSD To HTML Expert TIps, PSD To Bootstrap

The video will take up px by px and the same distance from above. Go ahead and measure it with Ruler Tool I. Using Rounded Rectangle Tool U create a px by px shape as shown in the screen shot below with the same green color. Using Ellipse Tool U create a 45px by 45px shape with a fill color of f5f5f5. I also added a play icon I created using the Pencil Tool B with the same green color. Add some text with the same font, the size will be 18pt and 14pt.

Lastly add the macbook air icon and place it as shown in the screen shot below. Create a px shape of width, the height will not matter.

Place it as shown in the screenshot below. Heading font size is 18pt , paragraph 13pt and for the link color and the hours color is c9 , The footer will be px by px and 50px distance from top, so go ahead and measure it with Ruler Tool I.

Then, Fill the whole space using Rectangle Tool U with a fill color of Create a new 5px by 5px transparent document and create a dot on the bottom left part of the canvas as shown in the screen shot below.

I used the same font style and size, the links have a distance of 25px from each other. The distance of the heading from the top is 50px and 30px below. Also, I create an arrow shape using Pencil Tool U and add it beside the links.

Using Rounded Rectangle Tool U create a px by 58px shape as shown in the screenshot below. Distance from the links section is 77px. Add the icon and fill it with text using Text Tool T. For the date color cccccc and for the link is ffffff.

For the location just duplicate the heading and change the text to Our Location. Add the map Icon. I already customized the map to show where is my exact location so feel free to customize yours. For the text color will be cccccc and for the line This section will take up px of height so, place the icons accordingly and make sure it is centered.

Text size 12pt , paragraph color , distance from top 30px , distance from text 15px.

Text size 12pt , link color , 2px c8c8c8 bottom line border. For the back to top button. I create it using Ellipse Tool U , 30px by 30px shape. I apply 1px bdbdbd inside stroke and create an arrow facing top using Pencil Tool B. We will be coding this from scratch and by the end you will have an awesome and fully functional agency layout. It is important to test code using different browsers every step of the way so that we can keep on track of our code.

For IE6 trust me, it still looks fine. Also we need to export the images to be used in the PSD file.

To build our HTML layout we should first analyze our design by looking at the Photoshop layout and identify the sections that are unique. Pay attention to the naming of id or class in every screenshot I made, these will be the names we will use when we markup the HTML.

Notice that the naming of the divs in every section is based on the naming we did earlier when we analyzed the PSD layout. Note that this layout is a fixed width of px.

I know it would be better if we used a CSS framework for this project. But like I have said, we will do it from scratch. Now lets focus more on the header section we will mark up the HTML elements that can be found in this section. Followed by the the call number which is wrapped in a div with an id of call. All CSS should be added in the style. Also, make sure you just copy the CSS reset which I provided in the resources and place it in style.

In the above CSS, since we have reset styles we need to style our text formats. But for now we will replace it with Helvetica. Notice also I added the classes green and white, this will be used when we style green or white text that can be seen in the design. In the above CSS I styled header-wrap with a 10px green border, since a div by default is styled in a block display this will fill the whole width of the screen.

Then I centered the header with margin: Next, I styled the Logo with a fixed width and height. I also floated it the left.

For the Call I floated it right and apply a 1px gray border also a 25px padding from right. Note that to get this value you need to go back to Photoshop and use the Ruler Tool I to measure the distance. Since I styled the h3 and h4 with a 25px bottom margin in our base text format we need to reset it and change it to 0. All li are floated left except for the last li element, also it has a left and right border except for the the home there is no left border and for the last there is no right border.

All a is styled 30px padding from left and right 0 for top and bottom, a height of 50, a text shadow, a line-height of 50 to make it center vertically. For the class home I pushed out the text and replace it with the home icon. Lastly, I styled the search input with a rounded radius, a green background, dark border on top and light border on bottom. Also to target placeholder attribute refer to the CSS which I comment to style place holder this is a part of css3 property.

Before previewing this to IE lower versions make sure to copy and paste the code below in the header section of our HTML file. Also I added a class for the heading slide-heading , paragraph info and for the read more readmore. In the above CSS since slides, service and media are wrapped with the container div, we will style this first to make them centered.

This is helpful so that we can position the inside elements prev, next, and pagination absolutely which are auto-generated by the JavaScript. For the slide-right which contains the heading, info and read more, all positioned absolutely, 0 out top, and pushed it px from left.

For the slide-heading I gave it a fixed width and height equal to the background image, and gave it a padding to make the text align properly, also a margin to give a space and align it correctly. Then followed by the readmore styling which has a green color with background arrow and a gray hover. For the pagination, prev , and next buttons this is auto-generated by the JavaScript in order to style this first we need to identify what is the tag or the applied html class attribute.

Now that you know the element, we will target it in the CSS. For the Pagination I positioned it absolutely, placed it 25px from the bottom and left, also I applied z-index 99px — this will make the pagination right on the very top over the other elements.

Then I floated the pagination li elements to left, gave it a right margin of 10px, added a background image with a fixed width and height.

I positioned the background by default to top since the normal state image is on top, for the current or the active state we will be going to reverse the positioning from top to bottom and lastly display it as a block level element and hide the text.

For the. Noticed the prev-next. I positioned the. Copy the slides. Finally, we need to add the JavaScript code that will allow the slider to work on our layout.

You should add this script just before the. I created a unique div id web and vector which contains the same elements such as an image, headings, paragraphs and readmore link. In the heading you can see I added a span and applied a class of green since the heading is combined with different colour. For the read more link we apply the same class we did in the slider area.

I styled the service div 40px from above to bottom and added an auto left and right, I also added a height that is equal to the background image. For the paragraph I gave it a fixed width with a margin, for the image I floated it right and give it a right margin, pretty much the same on vector image and text.

I created 3 different sections: Also, I added a class group on the media div.

Related Posts:


Copyright © 2019 nvrehs.info. All rights reserved.
DMCA |Contact Us