How VMapp Logo Maker works
VMapp logo maker can quickly make logos and banners for your websites. You are "not" limited to using pre-made logo templates and simply writing your domain name on it like most online logo makers. With VMapp.org logo maker, you can let your imagination run wild and design your logos and banners online, the way you want it! You can even save your VMapp files for future editting, or to make changes to your logos and banners later.
- Start by filling the boxes towards your left hand side. This controls how your logo background will look like.Use the gradient options to give your background a shadow or light fade effect.
- Use the right hand side section to add shapes and text layers on your background. These are the visible text or shapes that will actually form your logo or banner.
- You can supply your own shapes here, or use some from the "shapes gallery" VMapp has. You can fill the shapes and text with colors of your choice, give them shadow effects, or gradient effects, rotate them, resize them, give a border using stroke, etc stuff that you normally use photoshop for.
- You can combine 2 or more shape layers to come up with your own shape! If you already have a logo or colorful image that you want to use as a logo, then type its URL here, leave the color fill box empty, and add that on the background as your logo, then write your company's name as a new text layer and you are done!
- Important, when you create a new layer, do not forget to click "ADD" button to add it to the list of layers. List of added layers is shown just below the "ADD/SAVE" etc buttons. If you want to change something in a layer, click the layer name from the list, make changes in the form, then click "SAVE" button. You can delete a layer in the same way. Use the "CLEAR" button to clear the form. Clear does not deletes or saves a layer, simply clears the form for you to enter new values.
- CSS style auto positioning! VMapp supports both fixed positions for layers and a CSS type positioning. You can either give values like "50,100" to place a layer at top left 50x and 100y position on your background, or you can simply give "top/left/bottom/right" (any one) keywords and let VMapp automatically join your layers! You can even leave all position boxes empty and let VMapp decide which layer goes where! The default image that you are seeing below is 100% CSS positioned, background height and width also decided by VMapp automatically!
- The tiny up and down arrows next to layer names in the list is similar to what photoshop does with its "align layers" feature. Use this to place one or more shape layers above or below other layers. Important, the layer which is lowest in the list displayed, that layer is processed last by VMapp, which means that it will be the last layer which will be placed on the background image. This means that in your image this layer will appear as the top most layer, covering any other layers placed before on same position. So if you are placing 2 layers at same position (50,100), then second layer will cover the first layer. You can change this by moving the last layer upwards in the list.
- Gradient fill: Currently VMapp supports gradient effect between 2 colors and you can choose how much solid colors will be visible on either side of gradient effect, and how much area gradient effect will cover. Simply give it a percentage. Like 5,15,80 means that first color will be visible for 5% of the image, followed by 15% of gradient effect, followed by 80% of final color, total 100% image fill. This way you can control which part of your image should have the gradient effect shown. In the default image you see, I used 1% solid gray, followed by 9% gradient effect, followed by 90% solid black. I also used a -45% angle for the gradient. This gave the background image an effect as if light is falling from top left corner on a black image!
- Shadow styles: You can use some of the pre-made styles to give a realistic 3D shadow effect to your shape layers. For example, the "3D Glass shadow" will make your image appear as if its placed on a glass table and shadow of your image layer is falling on the table. Likewise, "3D front/back shadows" make it appear as if your image is standing straight and a 5:00 shadow is falling in the front or behind the image. These shadows look best on a white background image with a corner gradient effect on the background. Do not let the gradient effect reach the shadow itself.
- Once you have created the layers you want in your image, then click the "Make LOGO" button and give it a minute to process all layers and background. Whistle for a while! Once your image is processed, it will appear in the area where the default image is being shown. If you like what you see, click the "Download PNG" link just above it to get a PNG file of your image, and also click "Download VMapp file" to get your VMapp file for future editting. This is like a photoshop PSD file which you can edit later using VMapp.org logo maker. Save the VMapp file somewhere for future use. Use the PNG file in your websites or your projects!
Have a VMapp logo file made earlier?
Upload your VMapp file to edit it and re-make your logo, or create a completely new one below.
Background of logo:
Color of background: (Both RGBA and HEX are allowed)
Optional second color for gradient effect:
Type of gradient:
Percentage of gradient (center) and solid colors (edges): example: 30,50,20:
Angle of gradient? zero means no angle straight line gradient, values between -360 and +360 are valid here.
Optional Place another image on background? Enter URL of your image:
Position of this image on background: (Enter top left x,y position, or enter "full" to stretch the image and fit on entire background, or enter "tile" for tiled fill )
Smooth & blur final image:
Note, you can use CSS's "float" values to autoposition shapes on this background, without having to use fixed x,y positioning.
Shapes & text on background of logo
Enter text or URL of image to add on background image:
View Shapes gallery
Color of text or image: (RGBA or HEX)
Optional Gradient fill color:
Your original color will slowly fade into this color
Percentage of gradient effect. 3 values are needed here, total to 100, example: 30,50,20
Direction of gradient:
Position on Background, example 200,100 means x=200 & y=100:
(use CSS "float" values for auto positioning):
Size of image: Enter percentage here, like -50,-50 to reduce image to 50% of its original size, or 100,100 to double its size, leave empty to keep original size.
Font size of text: (used only if first box is plain text, not a URL)
Font to use: (used only if first box is plain text, not URL)
Rotate text or image at angle: Enter value between -360 to 360, leave empty for no rotation
Flip Image or text?
Color of stroke border: (leave empty for no border)
Stroke thickness? (used only if stroke border color is provided)
Optional Shadow Style of text or image:
Optional colors for shadows, enter 2 colors separated by comma sign, leave this empty and I will use my default colors:
3dShadowBehind 3dShadowFront 3dGlassShadow 3dRising 3dFalling 3dZoomTop 3dZoomBottom 3dSplash 3dBlossom innerShineLeft innerShineRight innerShineTop innerShineBottom embossLeft embossRight engrave dropShadowRight dropShadowLeft shineLeft shineRight
Optional Distort or surround:
If circle is checked below: Circle settings:
if skew/perspective is checked below: Skew or Perspective percentage & direction:
skew perspective circle ellipse ellipseOpen
Shapes currently on background are listed below. Click name to edit or delete