k{"id":3039,"date":"2015-11-03T09:34:25","date_gmt":"2015-11-03T08:34:25","guid":{"rendered":"http:\/\/www.flyeralarm.com\/blog\/de\/?p=3039"},"modified":"2024-05-06T11:59:15","modified_gmt":"2024-05-06T09:59:15","slug":"der-unterschied-von-pixel-und-vektorgrafiken","status":"publish","type":"post","link":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/der-unterschied-von-pixel-und-vektorgrafiken\/","title":{"rendered":"Der Unterschied zwischen Pixelgrafiken und Vektorgrafiken"},"content":{"rendered":"[vc_row type=“in_container“ full_screen_row_position=“middle“ column_margin=“default“ column_direction=“default“ column_direction_tablet=“default“ column_direction_phone=“default“ scene_position=“center“ text_color=“dark“ text_align=“left“ row_border_radius=“none“ row_border_radius_applies=“bg“ overflow=“visible“ overlay_strength=“0.3″ gradient_direction=“left_to_right“ shape_divider_position=“bottom“ bg_image_animation=“none“][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“ column_border_radius=“none“ column_link_target=“_self“ column_position=“default“ gradient_direction=“left_to_right“ overlay_strength=“0.3″ width=“1\/1″ tablet_width_inherit=“default“ animation_type=“default“ bg_image_animation=“none“ border_type=“simple“ column_border_width=“none“ column_border_style=“solid“][vc_column_text]Wer sich schon einmal eingehender mit verschiedenen Bildformaten besch\u00e4ftigt hat, ist dabei sicherlich auch \u00fcber die Begriffe Pixel und Vektor gestolpert. Beides sind Elemente, aus denen ein Bild bestehen kann. Doch was unterscheidet Pixelgrafiken von Vektorgrafiken, welche Vor- und Nachteile haben sie? Und f\u00fcr welche grafischen Arbeiten benutzt man sie jeweils am besten? Wir haben die beiden gegen\u00fcbergestellt und ein wenig n\u00e4her beleuchtet.<\/strong><\/em>[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=“in_container“ full_screen_row_position=“middle“ column_margin=“default“ column_direction=“default“ column_direction_tablet=“default“ column_direction_phone=“default“ scene_position=“center“ text_color=“dark“ text_align=“left“ row_border_radius=“none“ row_border_radius_applies=“bg“ overflow=“visible“ overlay_strength=“0.3″ gradient_direction=“left_to_right“ shape_divider_position=“bottom“ bg_image_animation=“none“][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“ column_border_radius=“none“ column_link_target=“_self“ column_position=“default“ gradient_direction=“left_to_right“ overlay_strength=“0.3″ width=“1\/1″ tablet_width_inherit=“default“ animation_type=“default“ bg_image_animation=“none“ border_type=“simple“ column_border_width=“none“ column_border_style=“solid“][vc_column_text]\n
Pixelgrafiken<\/h2>\n
Der Name Pixel ist eine Kombination der beiden englischen Begriffe \u201epicture\u201c und \u201eelement\u201c, zu Deutsch so viel wie Bildelement oder Bildpunkt. Als Pixel werden einzelne quadratische Punkte bezeichnet, aus denen sich ein Bild zusammensetzt. Jeder dieser Punkte hat eine Farbe und aus ihrer Kombination ergibt sich schlie\u00dflich das Bild. Im Normalfall sind diese Punkte sehr klein, damit m\u00f6glichst viele Farbinformationen widergegeben werden k\u00f6nnen und das Ergebnis scharf ist. Erst bei starker Vergr\u00f6\u00dferung erkennt man die einzelnen Bestandteile. Dabei \u00e4ndern sich die Abmessungen des Bildes, seine Aufl\u00f6sung bleibt aber gleich. Diese wird in dpi, also dots per inch (engl. f\u00fcr Punkte pro Zoll) angegeben. Wird ein Bild zum Beispiel auf das Doppelte vergr\u00f6\u00dfert, wird jedes Pixel doppelt so gro\u00df. Auf einem Inch sind also nur noch halb so viele Bildpunkte. Je st\u00e4rker die Vergr\u00f6\u00dferung, desto grobk\u00f6rniger, pixeliger wird das Bild.[\/vc_column_text][\/vc_column][\/vc_row][vc_row type=“in_container“ full_screen_row_position=“middle“ column_margin=“default“ column_direction=“default“ column_direction_tablet=“default“ column_direction_phone=“default“ scene_position=“center“ text_color=“dark“ text_align=“left“ row_border_radius=“none“ row_border_radius_applies=“bg“ overflow=“visible“ overlay_strength=“0.3″ gradient_direction=“left_to_right“ shape_divider_position=“bottom“ bg_image_animation=“none“][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“ column_border_radius=“none“ column_link_target=“_self“ column_position=“default“ gradient_direction=“left_to_right“ overlay_strength=“0.3″ width=“1\/2″ tablet_width_inherit=“default“ animation_type=“default“ bg_image_animation=“none“ border_type=“simple“ column_border_width=“none“ column_border_style=“solid“][vc_column_text]Damit wird auch schon der deutlichste Nachteil von Pixelgrafiken klar. Das \u00c4ndern der Gr\u00f6\u00dfe bei gleichbleibender Qualit\u00e4t ist nicht m\u00f6glich. Und je gr\u00f6\u00dfer und sch\u00e4rfer das Bild, desto gr\u00f6\u00dfer die Datei. Gerade beim Versenden per Mail ein (im wahrsten Sinne des Wortes) gro\u00dfes Problem. Daf\u00fcr ist eine sehr genaue Darstellung von Details m\u00f6glich \u2013 je nachdem, wie hoch die Aufl\u00f6sung ist. Komplexe Farbabstufungen und Verl\u00e4ufe sind hier kein Problem. Jeder einzelne Punkt kann bearbeitet werden. Es gibt viele verschiedene Dateiformate f\u00fcr unterschiedliche Einsatzbereiche, jeweils auf diese zugeschnitten. Diese Dateiformate sind nicht an ein bestimmtes Programm gebunden, sondern k\u00f6nnen in den meisten Bildbearbeitungsprogrammen angezeigt und bearbeitet werden.<\/p>\n
Formate:<\/strong><\/span> TIF, JPG, BMP, PNG, PSD, GIF, uvm.
\nBearbeitungsprogramme:<\/strong><\/span> z. B. Adobe Photoshop, Fireworks, Corel PaintShop Pro[\/vc_column_text][\/vc_column][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“ column_border_radius=“none“ column_link_target=“_self“ column_position=“default“ gradient_direction=“left_to_right“ overlay_strength=“0.3″ width=“1\/2″ tablet_width_inherit=“default“ animation_type=“default“ bg_image_animation=“none“ border_type=“simple“ column_border_width=“none“ column_border_style=“solid“][image_with_animation image_url=“3040″ image_size=“full“ animation_type=“entrance“ animation=“Fade In“ animation_easing=“default“ animation_movement_type=“transform_y“ hover_animation=“none“ alignment=“right“ img_link_large=“yes“ border_radius=“none“ box_shadow=“none“ image_loading=“default“ max_width=“100%“ max_width_mobile=“default“][\/vc_column][\/vc_row][vc_row type=“in_container“ full_screen_row_position=“middle“ column_margin=“default“ column_direction=“default“ column_direction_tablet=“default“ column_direction_phone=“default“ scene_position=“center“ text_color=“dark“ text_align=“left“ row_border_radius=“none“ row_border_radius_applies=“bg“ overflow=“visible“ overlay_strength=“0.3″ gradient_direction=“left_to_right“ shape_divider_position=“bottom“ bg_image_animation=“none“][vc_column column_padding=“no-extra-padding“ column_padding_tablet=“inherit“ column_padding_phone=“inherit“ column_padding_position=“all“ column_element_direction_desktop=“default“ column_element_spacing=“default“ desktop_text_alignment=“default“ tablet_text_alignment=“default“ phone_text_alignment=“default“ background_color_opacity=“1″ background_hover_color_opacity=“1″ column_backdrop_filter=“none“ column_shadow=“none“ column_border_radius=“none“ column_link_target=“_self“ column_position=“default“ gradient_direction=“left_to_right“ overlay_strength=“0.3″ width=“1\/1″ tablet_width_inherit=“default“ animation_type=“default“ bg_image_animation=“none“ border_type=“simple“ column_border_width=“none“ column_border_style=“solid“][vc_column_text]\n
Vektorgrafiken<\/h2>\n
Den Begriff Vektor kennen die meisten wahrscheinlich noch aus dem Mathe-Unterricht. Und tats\u00e4chlich ist eine Vektorgrafik eine Art mathematische Formelsammlung. Aus den Informationen von geometrischen Figuren wie Linien, Kurven, Kreisen oder Polygonen entstehen Grafiken, die zu einem komplexeren Bild zusammengef\u00fcgt sind. Dabei werden keine Pixel, sondern Pfade gespeichert, die zum Beispiel die Informationen zu Gr\u00f6\u00dfe und Farbe enthalten. Diese Pfade k\u00f6nnen ver\u00e4ndert werden, ohne dass ein Qualit\u00e4tsverlust entsteht. Vor allem bei einer Vergr\u00f6\u00dferung wird hier der Unterschied zu Pixelgrafiken deutlich. Eine Vektorgrafik kann beliebig vergr\u00f6\u00dfert werden, ohne an Sch\u00e4rfe einzub\u00fc\u00dfen. Die gespeicherten Angaben werden auf die neue Gr\u00f6\u00dfe umgerechnet und die Figuren entsprechend gezeichnet. So eignen sich Vektorgrafiken besonders f\u00fcr Logos oder Icons, die oft in verschiedenen Gr\u00f6\u00dfen gebraucht werden. Weil das Bild dadurch nicht mehr, sondern nur ge\u00e4nderte Informationen enth\u00e4lt, wird auch die Datei nicht gr\u00f6\u00dfer.<\/p>\n
Im Gegensatz zu einer Pixelgrafik lassen sich in einer Vektorgrafik komplexe Details nur sehr schwer darstellen. Effekte wie Schatten oder Reflektionen zum Beispiel m\u00fcssen aufw\u00e4ndig mit zus\u00e4tzlichen Elementen in den entsprechenden Farbabstufungen per Hand angelegt werden. Die Dateiformate, als die Vektorgrafiken abgespeichert werden, erfordern meist spezielle Programme, mit denen sie kompatibel sind. Eine Ansicht und Bearbeitung ist dann nur in diesem Programm m\u00f6glich. Eine .ai-Datei kann zum Beispiel nur mit Adobe Illustrator ge\u00f6ffnet werden.<\/p>\n
Formate:<\/strong><\/span> z. B. EPS, AI, CDR, WMF, PDF
\nBearbeitungsprogramme:<\/strong><\/span> z. B. Adobe Illustrator, Corel Draw, Macromedia FreeHand[\/vc_column_text][\/vc_column][\/vc_row]\n","protected":false},"excerpt":{"rendered":"
Wer sich schon einmal eingehender mit verschiedenen Bildformaten besch\u00e4ftigt hat, ist dabei sicherlich auch \u00fcber die Begriffe Pixel und Vektor gestolpert. Beides sind Elemente, aus denen ein Bild bestehen kann. Doch was unterscheidet Pixelgrafiken von Vektorgrafiken, welche Vor- und Nachteile haben sie? Und f\u00fcr welche grafischen Arbeiten benutzt man sie jeweils am besten? Wir haben die beiden gegen\u00fcbergestellt und ein wenig n\u00e4her beleuchtet.<\/p>\n","protected":false},"author":53,"featured_media":99959,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[11],"tags":[294,451,158,449,450,448,452,444,446,445,447,453,454],"class_list":{"0":"post-3039","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-know-how","8":"tag-aufloesung","9":"tag-bearbeitung","10":"tag-bilder","11":"tag-bildformate","12":"tag-dpi","13":"tag-fotos","14":"tag-informationen","15":"tag-pixel","16":"tag-pixelgrafik","17":"tag-vektor","18":"tag-vektorgrafik","19":"tag-vergroessern","20":"tag-vergroesserung"},"acf":[],"_links":{"self":[{"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3039","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/comments?post=3039"}],"version-history":[{"count":2,"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3039\/revisions"}],"predecessor-version":[{"id":99972,"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/posts\/3039\/revisions\/99972"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/media\/99959"}],"wp:attachment":[{"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/media?parent=3039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/categories?post=3039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/staging-blog.flyeralarm.com\/blog\/de\/wp-json\/wp\/v2\/tags?post=3039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}